Меню как на Мафии

[iliah]

Хотелось бы аналогичное меню естественно со своими пиктограммами, как и где это сделать? Подскажите пожалуйста.

[Topce]

Хотелось бы аналогичное меню естественно со своими пиктограммами, как и где это сделать? Подскажите пожалуйста.

​В custom.css 

ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

 

[iliah]

​В custom.css 

ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

 

​

 content:"\f073"; 

это вот и есть картинка, можно ли ставить свою и где они лежат?

а изменение цвета кнопки при наведение где поменять?

у меня по ипс 4 одни вопросы блин) хорошо хоть конвертировать базу с 3.х.х научился без потерь)

Изменено 13 июня, 2015 пользователем iliah

[Fateswhisper]

​

 content:"\f073"; 

это вот и есть картинка, можно ли ставить свою и где они лежат?

а изменение цвета кнопки при наведение где поменять?

​Это шрифт font awesome, погугли коды для иконок.

Цвет при наведении:

#ipsLayout_mainNav > li > a:hover {
		opacity: 1;
		color: #fff;
      background: #3FB2E1;
	}

 

[iliah]

​Это шрифт font awesome, погугли коды для иконок.

Цвет при наведении:

#ipsLayout_mainNav > li > a:hover {
		opacity: 1;
		color: #fff;
      background: #3FB2E1;
	}

 

​Спасибо!! Вроде настроил. За значки особое спасибо то что надо!

[Artemka]

Спасибо

[Ruyk]

Спасибо! Много где искал подобное, но нашел только здесь

[andros0789]

Чтоб не мучаться для тех кто не особо знаток в стилях и шрифтах, просто пропишите в head 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

И можете смело прописывать шрифты в менюшках и где угодно) Это подключение с офсайта)

[Fateswhisper]

Для чего это делать, если шрифт изначально присутствует в четвёрке и обычные вставки классов шрифта понимаются движком без проблем.

[Helios]

В 13.06.2015, 21:20:13, Topce сказал:

В custom.css 

ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

Вставил в custom.css этот код и ни чего не изменилось, подскажите как сделать такое меню?

[andros0789]

2 часа назад, Sergis сказал:

Вставил в custom.css этот код и ни чего не изменилось, подскажите как сделать такое меню?

У вас версия форума какая? Это было для IPB 3.4 актуально.

[Helios]

Только что, andros0789 сказал:

У вас версия форума какая? Это было для IPB 3.4 актуально.

Версия IPS 4.1.4, не подскажете код для этой версии?

[andros0789]

1 минуту назад, Sergis сказал:

Версия IPS 4.1.4, не подскажете код для этой версии?

#elUserLink_menu a[href*="/profile/"]:before {
     content: "\f007"
 }
 #elUserLink_menu a[href='/index.php?/messenger/']:before {
     content: "\f01c"
 }
 #elUserLink_menu a[href*="/content/"]:before {
     content: "\f03a"
 }
 #elUserLink_menu a[href*="/followed/"]:before {
     content: "\f1d8"
 }
 #elUserLink_menu a[href*="/attachments/"]:before {
     content: "\f0c6"
 }
 #elUserLink_menu a[href*="/settings/"]:before {
     content: "\f013"
 }
 #elUserLink_menu a[href*="/clients/"]:before {
     content: "\f07a"
 }
 #elUserLink_menu a[href*="edit"]:before {
     content: "\f040"
 }
 #elUserLink_menu a[href*="/ignore/"]:before {
     content: "\f05e"
 }
 #elUserLink_menu a[href*="/notifications/options/"]:before {
     content: "\f0ac"
 }
 #elUserLink_menu a[href*="/modcp/"]:before {
     content: "\f046"
 }
 #elUserLink_menu a[href*="/admin"]:before {
     content: "\f023"
 }
 #elUserLink_menu a[href*="/logout/"]:before {
     content: "\f08b"
 }
 #ipsLayout_mainNav a:before {
     margin-right: 3px;
     opacity: 0.6;
 }
 #ipsLayout_mainNav a:hover:before,
 #ipsLayout_mainNav a.ipsNavActive:before {
     opacity: 1;
 }
 html[dir="rtl"] #ipsLayout_mainNav a:before {
     margin-right: 0;
     margin-left: 3px;
 }
 #elCreateNew_menu a:before {
     content: "\f0fe"
 }
 #elCreateNew_menu a[href*="module=status"]:before {
     content: "\f086"
 }
 #ipsLayout_mainNav a[class*="downloads_"]:before,
 #elCreateNew_menu a[href*="/files/"]:before {
     content: "\f019"
 }
 #ipsLayout_mainNav a[class*="gallery_"]:before,
 #elCreateNew_menu a[href*="/gallery/"]:before {
     content: "\f03e"
 }
 #ipsLayout_mainNav a[class*="nexus_Store"]:before {
     content: "\f07a"
 }
 #ipsLayout_mainNav a[class*="nexus_Support"]:before {
     content: "\f1cd"
 }
 #ipsLayout_mainNav a[class*="blog_"]:before,
 #elCreateNew_menu a[href*="/blogs/"]:before {
     content: "\f02d"
 }
 #ipsLayout_mainNav a[class*="calendar_"]:before,
 #elCreateNew_menu a[href*="/calendar/"]:before {
     content: "\f073"
 }
 #ipsLayout_mainNav a[class*="cms_"]:before,
 #elCreateNew_menu a[href*="/articles"]:before {
     content: "\f0f6"
 }
 #ipsLayout_mainNav a[class*="forums_"]:before,
 #elCreateNew_menu a[href*="/forum/"]:before {
     content: "\f086"
 }
 #ipsLayout_mainNav a[class*="core_Core"]:before {
     content: "\f015"
 }
 #ipsLayout_mainNav a[class*="chat_"]:before {
     content: "\f022"
 }
 #ipsLayout_mainNav a#elNavigationMore_dropdown:before {
     content: "\f0fe";
     display: none;
 }

Это примерное будет выглядеть вот так=)  В custom положите, думаю тут все доступно описано, а здесь изображения https://fortawesome.github.io/Font-Awesome/icons/

[Helios]

10 минут назад, andros0789 сказал:

Это примерное будет выглядеть вот так=)  В custom положите, думаю тут все доступно описано

Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом) 

[andros0789]

4 часа назад, Sergis сказал:

Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом) 

Можете сделать проще, к каждому меню добавить отдельно, от вас требуется правой кнопкой мыши посмотреть какой айди присвоен каждому меню и прописать для каждой вкладки свой стиль вот пример:

a[data-navitem-id="10"]:before {
    content: "\f019";
    font-family: FontAwesome;
}

Вот на скрине видно id 32 и 10)) Вот создаете для каждой вкладки свой стиль и радуетесь) а картинки прописываете у казывал выше, с сайта фонтавесом) Удачи

[Redneck]

16 минут назад, andros0789 сказал:

Можете сделать проще, к каждому меню добавить отдельно,

Спасибо большое! Так получилось!

[Redneck]

Вот и на меню стало похоже  

[andros0789]

1 час назад, Redneck сказал:

Спасибо большое! Так получилось!

Пожалуйста) Я думаю самый простой способ)

[Helios]

20 часов назад, andros0789 сказал:

Можете сделать проще, к каждому меню добавить отдельно, от вас требуется правой кнопкой мыши посмотреть какой айди присвоен каждому меню и прописать для каждой вкладки свой стиль вот пример:

 

a[data-navitem-id="14"]{background:#15a606 !important;color:white !important;}
a[data-navitem-id="14"]:before {
    content: "\f02d";
   font-family: FontAwesome;
  
}

Сделал вот так, цвет поменялся, но при наведении мышки на это меню цвет не меняеться, как правильно сделать не подскажете? И еще как сделать всю полоску, где меню чуть шире в высоту?

[andros0789]

3 минуты назад, Sergis сказал:

 

a[data-navitem-id="14"]{background:#15a606 !important;color:white !important;}
a[data-navitem-id="14"]:before {
    content: "\f02d";
   font-family: FontAwesome;
  
}

Сделал вот так, цвет поменялся, но при наведении мышки на это меню цвет не меняеться, как правильно сделать не подскажете? И еще как сделать всю полоску, где меню чуть шире в высоту?

К стилю добавить :hover и добавить туда цвет при наведении. А "шире в высоту" это надо добавить height побольше и все))

[Helios]

В 08.12.2015 в 16:24, andros0789 сказал:

К стилю добавить :hover и добавить туда цвет при наведении. А "шире в высоту" это надо добавить height побольше и все))

В какое место добавлять :hover? И про ширину не понял, меня интересует вся полоска, что бы чуть шире в высоту была (пример, как на этом сайте), а не пункты меню. я же не разбираюсь в этом, скинь пожалуйста готовый код, по этим вопросам.

[Сергей Ананасов]

a:hover

[MurderCore]

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

[jack007]

29 минут назад, MurderCore сказал:

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

Группы пользователей - Нужная группа - Форматирование 

<i class="fa fa-book"></i>

Вставляем код в начало если хотим что бы перед ником было, или в конец.

Иконки можно брать с офф. сайта 
 

http://fortawesome.github.io/Font-Awesome/icons/

 

[Doker]

2 часа назад, MurderCore сказал:

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

Перед названием группы или после добавляешь 

<i class="fa fa-star"></i>