В данной теме речь пойдет о том, как поставить картинку или покрасить в другой цвет меню навигации. Но для начала мне хотелось, чтобы вы поняли, что такое меню навигации и в будущем правильно называли этот "участок" форума.
Меню навигации - это информационная строка, на которой располагаются ссылки на форум, участники, поиск, профиль, сообщения и т.д. Меню навигации не является частью шапки. Шапка есть шапка, а меню навигации есть меню навигации.
Теперь приступим к изменению "внешнего вида" меню навигации(МН).
Для этого мы заходим в Администрирование - Стиль, там сначала работаем с вторым окном. Во втором окне находим /* CS1.8 */, под ним располагается именно то, с чем нам предстоит работать в первую очередь, то есть вот это:
#pun-navlinks .container {
background: url("ваша ссылка на картинку");
color: #403c2d;
height: 20px;
}
Как вы видите, тот вариант, который выставил я, уже прописан так, чтобы можно было поставить свою картинку. Естественно, для того, чтобы покрасить в другой цвет, то вам нужно background-color, а там все по старой схеме. Подбираете новый цвет и после решетки "#" прописываете шестизначный код цвета. Но я буду рассматривать вариант с картинкой. Данный вариант прописан на то, что вставленная картинка будет повторяться. Для того, чтобы она не повторялась, мы прописываем background-repeat: no repeat. Что мы получаем:
#pun-navlinks .container {
background: url("ваша ссылка на картинку");
color: #403c2d;
height: 20px;
background-repeat: no repeat;
}
Нeight - отвечает за высоту отображения графического изображения. Но помните о том, чем больше высота, тем дальше находится меню пользователя (Активные сообщения, Новые сообщения и т.д.) Допустим, что мы хотим расположить графическое изображение по центру, так же как и текст ссылок, тогда мы прописываем background-position: top center, или просто background-position: center. Результат:
#pun-navlinks .container {
background: url("ваша ссылка на картинку");
color: #403c2d;
height: 20px;
background-repeat: no repeat;
background-position: top center;
}
Эти все действия нужны только тогда, когда вы хотите, чтобы графическое изображение НЕ повторялось, если же оно будет повторяться, то вам хватит и первого шага.
Теперь займемся перекраской ссылок и их расположением. Чтобы перекрасить ссылки, вам нужно все в том же втором окне найти /* CS3.3 */ и /* CS3.4 */.
/* CS3.3 */ - не активные ссылки (курсор мыши не наведен)
/* CS3.4 */ - активные ссылки (курсор мыши наведен)
То есть, вам нужно найти вот это:
/* CS3.3 */
#pun-navlinks a {
color: #4a4a49;
border-bottom: 0px none #000;
text-decoration: none;
font-style: none;
}
/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #8c8a85;
border-bottom: none;
text-decoration: none;
}
Сolor - отвечает за цвет ссылок.
За расположение ссылок отвечает D3 Forum navigation, находится в первом окне Стиля. Работать надо с /* D3.1 */:
/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
border-style: none;
border-width: 0;
}
Текст может располагаться с лева(left), с права(right) и по центру(center). Для того, чтобы разместить текст так, как вам хочется, надо прописать text-align. Я выравнивал текст по центру, поэтому у меня такой вариант:
/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
border-style: none;
border-width: 0;
text-align: center;
}
by Suo
