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

Posted 13 июня, 20159 yr

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

13 июня, 20159 yr

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

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

Цитата

Artemka, ARGRESSOR, iliah and 1 other
4

13 июня, 20159 yr

Author

comment_88911

В 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.х.х научился без потерь)

Edited 13 июня, 20159 yr by iliah

Цитата

Artemka
1

13 июня, 20159 yr

comment_88918

 content:"\f073"; 
это вот и есть картинка, можно ли ставить свою и где они лежат?

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

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

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

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

Цитата

iliah
1

14 июня, 20159 yr

Author

comment_88924

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

Цвет при наведении:
#ipsLayout_mainNav > li > a:hover {
		opacity: 1;
		color: #fff;
      background: #3FB2E1;
	}

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

Цитата

14 июня, 20159 yr

comment_88926

Спасибо

Цитата

20 июня, 20159 yr

comment_89289

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

Цитата

20 июня, 20159 yr

comment_89293

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

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

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

Цитата

20 июня, 20159 yr

comment_89312

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

Цитата

7 декабря, 20158 yr

comment_97102

В 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 этот код и ни чего не изменилось, подскажите как сделать такое меню?

Цитата

7 декабря, 20158 yr

comment_97106

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

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

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

Цитата

7 декабря, 20158 yr

comment_97107

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

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

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

Цитата

7 декабря, 20158 yr

comment_97108

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/

Цитата

rustav and Helios
2

7 декабря, 20158 yr

comment_97110

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

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

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

Цитата

7 декабря, 20158 yr

comment_97137

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

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

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

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

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

Цитата

Redneck, benix, rustav and 1 other
4

7 декабря, 20158 yr

comment_97142

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

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

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

Цитата

7 декабря, 20158 yr

comment_97146

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

Цитата

7 декабря, 20158 yr

comment_97149

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

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

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

Цитата

8 декабря, 20158 yr

comment_97207

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

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

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

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

Цитата

8 декабря, 20158 yr

comment_97208

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 and rustav
2

10 декабря, 20158 yr

comment_97425

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

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

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

Цитата

11 декабря, 20158 yr

comment_97430

a:hover

Цитата

27 декабря, 20158 yr

comment_98193

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

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

Цитата

27 декабря, 20158 yr

comment_98195

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

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

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

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

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

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

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

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

Цитата

MurderCore
1

27 декабря, 20158 yr

comment_98196

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

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

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

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

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

Цитата

MurderCore
1

Sign In

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

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search