Вместо них поставить картинки "Правила,Форум,Ресурсы,Пользователи,Главная"

[Matey]

Как сделать чтобы в меню навигации вместо текста вставить картинки?

 

[Hope]

В EXTRA.css:

.navTabs .publicTabs .navTab.forums:before {
content: url('@imagePath/путь/до/изображения.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

Это для вкладки "Форум". Для других вкладок свои обозначения, например home - это "Главная", members - это "Пользователи" и т.п.

Да и некоторые сторонние плагины могут добавлять вкладки в меню через свои обработчики и чтобы добавить иконку для такого плагина - придётся лезть в .php файл. :(

 

[Matey]

попробовал картинка встает левее не активная и не заменяет вкладку "Форум", В EXTRA.css нету значений на навигационные кнопки.

Спойлер

.discussionList .memberParticipatedThread {
background-color: #DCF2D4 !important;
}

.discussionList .memberParticipatedThread .posterAvatar, .discussionList .memberParticipatedThread .stats {
background-color: #DCF2D4 !important;
}

.nodeInfo.unread .nodeTitle:after {
content: "NEW";
display: inline-block;
line-height: 14px;
height: 14px;
vertical-align: 2px;
margin-left: 5px;
padding: 0 5px;
border-left: 10px solid rgba(0, 0, 0, 0);
border-radius: 2px;
background-color: red;
background-color: hsla(0,0%,0%,0);
background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
background-clip: padding-box, border-box, border-box;
background-origin: padding-box, border-box, border-box;
background-size: auto auto, 20px 100%, 20px 100%;
background-repeat: repeat, repeat-y, repeat-y;
background-position: 0 0, 0 21px, 0 21px;
color: #FFF;
font-size: 9px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* public_control ===================================================== */
.message .publicControls .item {
-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

background-color:#33bdef;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;

border:1px solid #057fd0;

display:inline-block;
color:#ffffff;
font-family:arial;
font-size:10px;
font-weight:bold;
padding:4px 8px;
text-decoration:none;

text-shadow:0px -1px 0px #5b6178;
}

.message .publicControls .item:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

background-color:#019ad2;
}

.message .publicControls .item:active {
position:relative;
top:1px;
}

/* private_control ==================================================== */
.message .privateControls .item {
-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);

background-color:#33bdef;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;

border:1px solid #057fd0;

display:inline-block;
color:#ffffff;
font-family:arial;
font-size:10px;
font-weight:bold;
padding:4px 8px;
text-decoration:none;

text-shadow:0px -1px 0px #5b6178;
}

.message .privateControls .item:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);

background-color:#019ad2;
}

.message .privateControls .item:active {
position:relative;
top:1px;
}

/* private_control_muted:none ==================================================== */
.message .privateControls .muted {
background:none;
background-color:none;
border-radius:none;
border:none;

display:inline-block;
color:#969696;
font-family:Trebuchet MS;
font-size:11px;
font-weight:none;

text-shadow:none;
}
.message .privateControls .muted:hover {
background:none;
background-color:none;
}

 

[Hope]

Так Вы не описали, что именно нужно, но тут уже по коду сами смотрите и меняйте на нужные значения, например:

.navTabs .publicTabs .navTab.forums:after {
content: url('@imagePath/путь/до/изображения.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

 

[Matey]

Так Вы не описали, что именно нужно, но тут уже по коду сами смотрите и меняйте на нужные значения, например:

.navTabs .publicTabs .navTab.forums:after {
content: url('@imagePath/путь/до/изображения.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

замена слов навигации (например Форум) на картинку, т.е. при нажатии картинки отобразились те же функции что и при нажатии навиг. слова Форум.

 

[Hope]

Тогда это Вам уже нужно смотреть шаблон navigation, эта строка (для вкладки "Форум"):

<a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>

Для вкладки "Пользователи" эта:

<a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>

Для примера на вкладке "Пользователи". Вот эту строку:

<a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>

Заменяем на такую:

<a href="{$tabs.members.href}" class="navLink"><img src="http://xenforo.info/styles/default/xenforo/smilies/facepalm.png" alt="Пользователи"></a>

И получаем такое:

 

[Skaiman]

Во иконок куча, можно их использовать. А у клиенты не могут файл залить.

 

[Matey]

Последний вопрос не смог найти в navigation.css строку которая делает шире синию строку.

 

[Skaiman]

background-color: @primaryDark;

 

[Matey]

background-color: @primaryDark;

мне не цвет нужен ,а размер

 

[Skaiman]

Я про цвет, а вопрос про ширину, сорь. Там наверное нет фиксированной высоты, просто за счет внутреннего отступа padding: 0 25px;. Если попробывать вместо 0 другое значение

 

[Matey]

Я про цвет, а вопрос про ширину, сорь. Там наверное нет фиксированной высоты, просто за счет внутреннего отступа padding: 0 25px;. Если попробывать вместо 0 другое значение

пробовал не канает

 

[Skaiman]

есть высота

.navTabs {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #2b485c;
    border-color: #65a5d1 #65a5d1 #032a46;
    border-image: none;
    border-style: solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-width: 1px;
    font-size: 11px;
    height: 25px;
    padding: 0 25px;
}

 

[Matey]

есть высота

.navTabs {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #2b485c;
    border-color: #65a5d1 #65a5d1 #032a46;
    border-image: none;
    border-style: solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-width: 1px;
    font-size: 11px;
    height: 25px;
    padding: 0 25px;
}

в каком файле это? в navigation.css такого нет

 

[Skaiman]

эт исходный код. Попробуй в EXTRA.css добавить
.navTabs {
height: 25px!important;
}
Вместо 25px, свое

 

[Matey]

эт исходный код. Попробуй в EXTRA.css добавить
.navTabs {
height: 25px!important;
}
Вместо 25px, свое

не прет(

 

[Skaiman]

А здесь не пробовал? Настройки стиля: "Шапка" (header) и навигация Контейнер закладок навигации (navTabs)

 

[Matey]

А здесь не пробовал? Настройки стиля: "Шапка" (header) и навигация Контейнер закладок навигации (navTabs)

начал экспериментировать, но пока без результатно

 

[sexo]

в navigation ищу стоки с помощью которых можно надписи ссылок Входящие и Оповещения заменить на иконки, примерно как тут, на этом форуме - Не подскажите какие именно строки нужно править?

 

[Hope]

Ответ на Ваш вопрос уже есть в теме. Читаем.