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

Matey · 6 Авг 2014

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

Hope · 6 Авг 2014

В 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 · 6 Авг 2014

попробовал картинка встает левее не активная и не заменяет вкладку "Форум", В 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 · 6 Авг 2014

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

Код:

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

Matey · 6 Авг 2014

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

Код:

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

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

Hope · 6 Авг 2014

Тогда это Вам уже нужно смотреть шаблон 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 · 6 Авг 2014

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

Matey · 6 Авг 2014

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

Skaiman · 6 Авг 2014

background-color: @primaryDark;

Matey · 6 Авг 2014

Skaiman написал(а):
background-color: @primaryDark;

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

Skaiman · 6 Авг 2014

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

Matey · 6 Авг 2014

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

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

Skaiman · 6 Авг 2014

есть высота

Код:

.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 · 6 Авг 2014

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;
}

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

Skaiman · 6 Авг 2014

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

Matey · 6 Авг 2014

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

не прет(

Skaiman · 6 Авг 2014

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

Matey · 6 Авг 2014

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

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

sexo · 10 Янв 2015

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

Hope · 10 Янв 2015

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

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

Matey

Hope

Matey

Hope

Matey

Hope

Skaiman

Вложения

Matey

Вложения

Skaiman

Matey

Skaiman

Matey

Skaiman

Matey

Skaiman

Matey

Skaiman

Matey

sexo

Hope

Похожие темы

Мы ценим вашу конфиденциальность