iliah Опубликовано 13 июня, 2015 Поделиться Опубликовано 13 июня, 2015 Хотелось бы аналогичное меню естественно со своими пиктограммами, как и где это сделать? Подскажите пожалуйста. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Topce Опубликовано 13 июня, 2015 Поделиться Опубликовано 13 июня, 2015 Хотелось бы аналогичное меню естественно со своими пиктограммами, как и где это сделать? Подскажите пожалуйста. В 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; } AlexOrekhofff, ARGRESSOR, iliah и 1 другой 4 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
iliah Опубликовано 13 июня, 2015 Автор Поделиться Опубликовано 13 июня, 2015 (изменено) В 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 Artemka 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Fateswhisper Опубликовано 13 июня, 2015 Поделиться Опубликовано 13 июня, 2015 content:"\f073"; это вот и есть картинка, можно ли ставить свою и где они лежат? а изменение цвета кнопки при наведение где поменять? Это шрифт font awesome, погугли коды для иконок. Цвет при наведении: #ipsLayout_mainNav > li > a:hover { opacity: 1; color: #fff; background: #3FB2E1; } iliah 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
iliah Опубликовано 14 июня, 2015 Автор Поделиться Опубликовано 14 июня, 2015 Это шрифт font awesome, погугли коды для иконок. Цвет при наведении: #ipsLayout_mainNav > li > a:hover { opacity: 1; color: #fff; background: #3FB2E1; } Спасибо!! Вроде настроил. За значки особое спасибо то что надо! Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Artemka Опубликовано 14 июня, 2015 Поделиться Опубликовано 14 июня, 2015 Спасибо Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Ruyk Опубликовано 20 июня, 2015 Поделиться Опубликовано 20 июня, 2015 Спасибо! Много где искал подобное, но нашел только здесь Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
andros0789 Опубликовано 20 июня, 2015 Поделиться Опубликовано 20 июня, 2015 Чтоб не мучаться для тех кто не особо знаток в стилях и шрифтах, просто пропишите в head <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> И можете смело прописывать шрифты в менюшках и где угодно) Это подключение с офсайта) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Fateswhisper Опубликовано 20 июня, 2015 Поделиться Опубликовано 20 июня, 2015 Для чего это делать, если шрифт изначально присутствует в четвёрке и обычные вставки классов шрифта понимаются движком без проблем. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Helios Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 В 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 Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 2 часа назад, Sergis сказал: Вставил в custom.css этот код и ни чего не изменилось, подскажите как сделать такое меню? У вас версия форума какая? Это было для IPB 3.4 актуально. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Helios Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 Только что, andros0789 сказал: У вас версия форума какая? Это было для IPB 3.4 актуально. Версия IPS 4.1.4, не подскажете код для этой версии? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
andros0789 Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 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 и Helios 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Helios Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 10 минут назад, andros0789 сказал: Это примерное будет выглядеть вот так=) В custom положите, думаю тут все доступно описано Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
andros0789 Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 4 часа назад, Sergis сказал: Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом) Можете сделать проще, к каждому меню добавить отдельно, от вас требуется правой кнопкой мыши посмотреть какой айди присвоен каждому меню и прописать для каждой вкладки свой стиль вот пример: a[data-navitem-id="10"]:before { content: "\f019"; font-family: FontAwesome; } Вот на скрине видно id 32 и 10)) Вот создаете для каждой вкладки свой стиль и радуетесь) а картинки прописываете у казывал выше, с сайта фонтавесом) Удачи rustav, Redneck, benix и 1 другой 4 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Redneck Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 16 минут назад, andros0789 сказал: Можете сделать проще, к каждому меню добавить отдельно, Спасибо большое! Так получилось! Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Redneck Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 Вот и на меню стало похоже Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
andros0789 Опубликовано 7 декабря, 2015 Поделиться Опубликовано 7 декабря, 2015 1 час назад, Redneck сказал: Спасибо большое! Так получилось! Пожалуйста) Я думаю самый простой способ) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Helios Опубликовано 8 декабря, 2015 Поделиться Опубликовано 8 декабря, 2015 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 Опубликовано 8 декабря, 2015 Поделиться Опубликовано 8 декабря, 2015 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 и rustav 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Helios Опубликовано 10 декабря, 2015 Поделиться Опубликовано 10 декабря, 2015 В 08.12.2015 в 16:24, andros0789 сказал: К стилю добавить :hover и добавить туда цвет при наведении. А "шире в высоту" это надо добавить height побольше и все)) В какое место добавлять :hover? И про ширину не понял, меня интересует вся полоска, что бы чуть шире в высоту была (пример, как на этом сайте), а не пункты меню. я же не разбираюсь в этом, скинь пожалуйста готовый код, по этим вопросам. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Сергей Ананасов Опубликовано 11 декабря, 2015 Поделиться Опубликовано 11 декабря, 2015 a:hover Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
MurderCore Опубликовано 27 декабря, 2015 Поделиться Опубликовано 27 декабря, 2015 У меня такой вопрос: А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
jack007 Опубликовано 27 декабря, 2015 Поделиться Опубликовано 27 декабря, 2015 29 минут назад, MurderCore сказал: У меня такой вопрос: А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое. Группы пользователей - Нужная группа - Форматирование <i class="fa fa-book"></i> Вставляем код в начало если хотим что бы перед ником было, или в конец. Иконки можно брать с офф. сайта http://fortawesome.github.io/Font-Awesome/icons/ MurderCore 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Doker Опубликовано 27 декабря, 2015 Поделиться Опубликовано 27 декабря, 2015 2 часа назад, MurderCore сказал: У меня такой вопрос: А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое. Перед названием группы или после добавляешь <i class="fa fa-star"></i> MurderCore 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.