Копилка воспоминаний

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Копилка воспоминаний » Дизайн и все, что с ним связано » Полезные ссылки и советы.

Полезные ссылки и советы.

Страница: 1

Сообщений 1 страница 4 из 4

1

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2014-12-07
  • Приглашений: 0
  • Сообщений: 139
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Провел на форуме:
    18 часов 35 минут
  • Последний визит:
    2017-07-01 09:42:45

http://futura.rusff.me/viewtopic.php?id=70
Сборка стиля форума

0

2

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2014-12-07
  • Приглашений: 0
  • Сообщений: 139
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Провел на форуме:
    18 часов 35 минут
  • Последний визит:
    2017-07-01 09:42:45

В общем, Lichtgestalt ответил, спасибо ему огромное. Выкладываю его ответы, как есть. Надеюсь, я ничего не упустил, спрашивая.

Надписи (меню):
в админке "свой стиль", там первое окно ("Структура style.css"):

/* D3.1 */
#pun-navlinks {
  border-style: none;
  border-width:0px;
  margin: 3;
  background-color: transparent;
font-family: "Times New Roman";
text-transform: uppercase;
margin-left: 52px;
}

#pun-navlinks a{color: #e8c692}

{color: #e8c692} - тут вставляете нужный цвет
font-family: "Times New Roman"; - тут можно вписать другой шрифт в пределах разумного, какой-нибудь из расхожих стандартных
text-transform: uppercase; - это превращает маленькие буквы в большие, т.е. в итоге текст ссылок будто капсом написан
цифры, честно, все не помню, методом научного тыка выясняю при необходимости - изменяю цифру, смотрю что изменилось. margin это обычно какой-то отступ.

и далее в этом же коде у меня такой блок есть:

/* D3.2 */
#pun-navlinks .container {
position: absolute;

top: 390px;
  margin: 0px;
  padding: 0.3em;
  background-color: transparent;
  width: 705px;
  font-weight:normal;
  text-align: center;
  border-style: none;
  }

top: 390px; - это отступ от верха страницы, если менять, меню будет выше/ниже.

а в другом коде, который ковчеговский, чуть иначе:
во втором окне стиля

div#pun-navlinks {
width: 100%;
text-align: center;
text-decoration-style: dotted;
top: -32px;
margin-top: -85px;
}

цифры опять же отступы, а цвет регулируется в том же окне этим блоком:

/* CS3.3 */
#pun-navlinks a {
  color: #b42a13;
    border-bottom: 0px none #000;
  text-decoration: none;
  font-weight: bold;

  }

сюда же можно добавить шрифт, как я понимаю.

другие коды скину в следующем письме.

что касается швов:
шапку и низ можно сделать рвано-прозрачными с того края, который должен состыковываться с телом форума. просто мягким ластиком в фотошопе  подстереть, и в таком полупрозрачном виде и сохранить в png. они тогда на тело будут мягко накладываться, и стык будет незаметен - если, конечно, сам фон достаточно абстрактный.
тело форума тоже надо аккуратно подбирать, швов не должно быть видно при стыках - как на фоне, так и по рамке. т.е. грубо говоря тело - это вот такая картинка по ширине форума - https://forumstatic.ru/files/0013/47/67/67466.jpg
я обычно делаю подобную в фш таким образом:
подбираю какой-то умеренно абстрактный фон (выше ссылка - не мое, просто иллюстрация) ), разрезаю его горизонтально посередине, меняю местами верх и низ, и фотошопными средствами их состыковываю - ластиком тем же мягко стираю там-сям, чтобы стыка не было видно. и пододвигаю так, чтобы рамка тоже была ровной, благо, высота такой картинки может быть любой. потом сохраняю - и когда фон замостится на форуме, стыков не будет.

0

3

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2014-12-07
  • Приглашений: 0
  • Сообщений: 139
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Провел на форуме:
    18 часов 35 минут
  • Последний визит:
    2017-07-01 09:42:45

картинки вместо стандартных надписей.
у меня два способа:

1. во втором окне стиля

/* menu */

#pun-navlinks a {
        display: inline-block;
   height : 16px;

        width: auto;

margin: -7px;}
        #navindex a
{background: url(https://forumstatic.ru/files/0013/47/67/46857.png) no-repeat top center; width: 60px;}
        #navuserlist a
{background: url(https://forumstatic.ru/files/0013/47/67/57090.png) no-repeat top center; width: 68px;}
        #navsearch a
{background: url(https://forumstatic.ru/files/0013/47/67/10892.png) no-repeat top center; width: 63px;}
        #navprofile a
{background: url(https://forumstatic.ru/files/0013/47/67/79627.png) no-repeat top center; width: 79px;}
        #navpm a
{background: url(https://forumstatic.ru/files/0013/47/67/84396.png) no-repeat top center; width: 96px;}
        #navadmin a
{background: url(https://forumstatic.ru/files/0013/47/67/29070.png) no-repeat top center; width: 170px;}
        #navlogout a
{background: url(https://forumstatic.ru/files/0013/47/67/80676.png) no-repeat top center; width: 56px;}
        #navlogin a
{background: url(https://forumstatic.ru/files/0013/47/67/26118.png) no-repeat top center; width: 50px;}
        #navregister a
{background: url(https://forumstatic.ru/files/0013/47/67/43359.png) no-repeat top center; width: 103px;}

#pun-navlinks a span {display: none;}

последняя строчка скрывает текстовые надписи, чтобы видно было только картинки.
к каждой картинке надо проставлять ширину - зависит от самих картинок, какие нарисуете.
по надписям, вроде бы, интуитивно должно быть понятно, для какой картинки что - navregister регистрация, navindex форум, navpm личные сообщения и т.д.
  height : 16px; - высота картинок меню. зависит от того, какие нарисуете.
margin: -7px; - расстояние между картинками-меню. меняется цифра - ссылки ближе/дальше друг от друга.

но при этом способе не видно, когда приходит новое лс. потому дополнительно надо какой-нибудь скриптик, например такой:
в настройки, в html-низ

<script type="text/javascript">
var nrisunok="https://forumupload.ru/uploads/0000/0a/f2/68797-1.gif";
if( (document.getElementById("navpm").innerHTML.indexOf("(") != -1))
{
document.getElementById("navpm").innerHTML="<img src='"+nrisunok+"'> "+document.getElementById("navpm").innerHTML;
};
</script>

nrisunok="https://forumupload.ru/uploads/0000/0a/f2/68797-1.gif"; - вот тут можно вставить свою картинку.

2. способ, чтобы сохранить циферку новых сообщений возле картинки-лс.
в хтмл-низ:

<script type="text/javascript">
$(function(){
$('li#navindex>a>span:contains("Форум")').html('<img src="https://forumstatic.ru/files/0014/38/b7/40824.png" title="Форум"/> ');
$('li#navuserlist>a>span:contains("Участники")').html('<img src="https://forumstatic.ru/files/0014/38/b7/20967.png" title="Участники"/> ');
$('li#navsearch>a>span:contains("Поиск")').html('<img src="https://forumstatic.ru/files/0014/38/b7/23464.png" title="Поиск"/> ');
$('li#navprofile>a>span:contains("Профиль")').html('<img src="https://forumstatic.ru/files/0014/38/b7/39839.png" title="Профиль"/> ');
$('li#navadmin>a>span:contains("Администрирование")').html('<img src="https://forumstatic.ru/files/0014/38/b7/24087.png" title="Администрирование"/> ');
$('li#navlogout>a>span:contains("Выход")').html('<img src="https://forumstatic.ru/files/0014/38/b7/97260.png" title="Выход"/> ');
$('li#navlogin>a>span:contains("Войти")').html('<img src="https://forumstatic.ru/files/0014/38/b7/47677.png" title="Войти"/> ');
$('li#navregister>a>span:contains("Регистрация")').html('<img src="https://forumstatic.ru/files/0014/38/b7/37483.png" title="Регистрация"/> ');
});
</script>

<script>
<!--
pismaof="<img src='https://forumstatic.ru/files/0014/38/b7/98814.png' />"
str = document.getElementById("navpm").innerHTML
pos = str.indexOf("Сообщения")
document.getElementById("navpm").innerHTML=str.substring(0,pos)+pismaof+str.substring(pos+9,str.length-1)
-->
</script>

обратите внимание, что блок с личными сообщениями отдельно.
это я сам мучился-совмещал пару лет назад два разных кода *лицорука* но все работало, и довольно долго, а это главное, наверное

0

4

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2014-12-07
  • Приглашений: 0
  • Сообщений: 139
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Провел на форуме:
    18 часов 35 минут
  • Последний визит:
    2017-07-01 09:42:45

иконки-кнопочки... старые-новые сообщения, да?
в первом окне стиля:

/* C2.14 */
    .punbb td div.tclcon {
            margin-left: 56px;
    }

/* C2.15 */
.punbb div.icon {
  float: left; /* расположение */
  display: block;
  width: 63px; /* ширина */
  height: 51px; /* высота */
  padding-top: 2px;
  margin-top: 1px;
  background-position: center center;
margin-left: -10px;
}

тут устанавливаются параметры блока. т.е. можно сделать сами иконки, например, крохотными, а здесь установить параметры так, что расстояние от иконки до текста будет большое, например. если не морочиться, то тут размеры можно задать по размерам картинки-иконки.

и во второе окно стиля:

/*ikonki mess*/

.punbb table Div.icon {float: left; display: block; border-style: none none none none;
width: 63px;
height: 51px;

background-image : url(https://forumstatic.ru/files/0013/47/67/88313.png);
background-repeat: no-repeat;
}

TR.inew Div.icon {
background-image : url(https://forumstatic.ru/files/0013/47/67/60362.png);
background-repeat: no-repeat;
width: 63px;
height: 51px;
}

TR.isticky Div.icon {
background-image : url(https://forumstatic.ru/files/0013/47/67/86144.png);
background-repeat: no-repeat;
width: 63px;
height: 51px;
}

TR.iclosed Div.icon {
background-image : url(https://forumstatic.ru/files/0013/47/67/76057.png);
background-repeat: no-repeat;
width: 63px;
height: 51px;
}

размеры для каждой иконки устанавливаются отдельно. можно их сделать разными по размеру, но не больше блока, размер которого установили выше (в первой цитате код)
первая картинка - это иконка по умолчанию, старые сообщения в открытой теме/разделе.
TR.inew Div.icon - иконка для новых сообщений
TR.isticky Div.icon - иконка для важной темы
TR.iclosed Div.icon - иконка закрытой темы

0

Страница: 1

Вы здесь » Копилка воспоминаний » Дизайн и все, что с ним связано » Полезные ссылки и советы.

Рейтинг форумов | Создать форум бесплатно