Я бы предложил поставить такой код:
1. Настройки, которые может поменять пользователь.
#pun-navlinks .container {
padding: 2.1em !important;
text-align: center;
}
Красное число отвечает за высоту меню навигации. Уменьшайте или увеличивайте это значение, если изображения не помещаются или наоборот, остаётся слишком много пространства.
Зелёное отвечает за положение пунктов меню. Текущее положение - по центру можно заменить на left - слева или right - справа.
#pun-navlinks li a {
border-style: none !important;
padding: 15px 25px !important;
text-decoration: none;
}
Два выделенных красным значения - это параметры размера самого изображения для пункта меню. Первое из них отвечает за высоту, второе - за ширину области для значка пункта меню. Регулируйте их так, чтобы все изображения были полностью видимы.
#pun-navlinks li a:hover {
padding: 30px !important;
text-decoration: none;
}
То же самое, что и предыдущий пункт, но уже при наведении мыши. Подойдёт тем, кто желает сделать увеличение значков при наведении курсора. Тем, кто не желает делать этого, этот пункт можно удалить.
2. Установка кода и вставка изображений.
Код вставляется в ХТМЛ-верх форума или во второе окно стиля, без дескрипторов <style type="text/css">...</style>.
Рассмотрим процесс вставки изображений в код. Для начала я бы хотел посоветовать всем: заливайте графические материалы, в том числе и эти иконки на Ваш форум. Это уменьшит время загрузки форума (так как многие сервисы хранения изображений притормаживают из-за высокой нагрузки), и, ко всему прочему, не потеряете в один прекрасный момент всё из-за сбоев на сервисе и прочего в этом роде.
Теперь непосредственно, о том, как добавить изображения.
#navindex a {
background: url(http://onserial-letay-16.ru/uploads/000 … 4322-1.png) no-repeat center center !important;
}
#navindex a:hover {
background: url(http://onserial-letay-16.ru/uploads/000 … 4322-3.png) no-repeat center center !important;
}
Это пример вставки изображения в код для пункта меню "Форум". Вы можете заметить два адреса: первый - это иконка в обычном состоянии, то есть, когда на неё не наведён курсор мыши. Вторая ссылка - тоже иконка, но при наведённом на неё курсоре. Если Вы не планируете создавать отдельные иконки для наведённого состояния, для Вас достатосно будет использовать такой код:
#navindex a {
background: url(http://onserial-letay-16.ru/uploads/000 … 4322-1.png) no-repeat center center !important;
}
Аналогично проделываем и для оставшихся пунктов меню. А именно navuserlist - "Участники", navrules - "Правила", navsearch - "Поиск", navprofile - "Профиль", navpm - "Сообщения", navadmin - "Администрирование", navregister - "Регистрация", navlogin - "Вход", navlogout - "Выход".
3. Дополнительные пункты меню.
Даный код позволяет заменять на изображения и дополнительные пункты меню, то есть те, который Вы сами добавляете.
Процесс добавления прост: перейдите в меню Администрирование---Настройки---Возможности---Дополнительные пункты меню, и в поле для кода вписывайте следующее:
0=<a href="Адрес гиперссылки"><span>Заменяющий текст</span></a>
Адрес гиперссылки - это адрес страниы, на которую должен привести этот пункт меню. Заменяющий текст - это то, что в самом меню должно появиться, то есть слово. Цифра в самом начале кода отвечает за положение нового пункта меню: 0 - в самом начале (перед словом "Форум"), 1 - второй (после слова "Форум") и так далее.
В нашем коде за иконки для дополнительных пунктов меню отвечает эта часть:
#navextra1 a{
background: url(http://onserial-letay-16.ru/uploads/000 … 4359-1.png) no-repeat center center !important;
}
#navextra1 a:hover{
background: url(http://onserial-letay-16.ru/uploads/000 … 4359-2.png) no-repeat center center !important;
}
#navextra2 a{
background: url(http://onserial-letay-16.ru/uploads/000 … 4362-1.png) no-repeat center center !important;
}
#navextra2 a:hover{
background: url(http://onserial-letay-16.ru/uploads/000 … 4362-2.png) no-repeat center center !important;
}
#navextra3 a{
background: url(http://onserial-letay-16.ru/uploads/000 … 4436-1.png) no-repeat center center !important;
}
#navextra3 a:hover{
background: url(http://onserial-letay-16.ru/uploads/000 … 4436-2.png) no-repeat center center !important;
}
Как Вы уже смогли догадаться, стандартно указаны лишь три дополнительных пункта, при этом первый из них - navextra1, второй - navextra2, ну и так далее. Принцип вставки для них изображений тот же, что и описано выше. При необходимости, можно дописать новые пункты меню или удалить текущие, если, к примеру, у Вас всего один новый пункт или их нет вообще.
Пример работы кода можно увидеть здесь: http://tps.bbmy.ru.
Отредактировано rps (Вс, 14 Ноя 2010 21:56:14)
