Начало IPS Suite IPB (IPS) – Awesome menu

IPB (IPS) – Awesome menu

От

PoleznoBG

3 октомври, 2016

1137

Създаване на красиво меню. Списък с иконките и кодовете за тях тук: http://astronautweb.co/snippet/font-awesome/

За 4.0.x

Customization> Themes> see what your skin and click the icon <> and click CSS> CORE> FRONT> CUSTOM> custom.css

Добавете това:

#ipsLayout_mainNav a:before,
#elNavMore_menu a:before{
	content: "\f02b";
	font-family: "FontAwesome";
	font-size: 14px;
	font-weight: normal;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	{prefix="transform" value="translate(0,0)"}
}

html[dir="rtl"] #ipsLayout_mainNav a:before{ margin-right: 0; margin-left: 3px; }
#ipsLayout_mainNav a:before{ margin-right: 3px; opacity: 0.6; }
#ipsLayout_mainNav a:hover:before, #ipsLayout_mainNav a.ipsNavActive:before{ opacity: 1; }
#ipsLayout_mainNav a[id*="elNavigation_app_downloads"]:before{ content: "\f0ed" }
#ipsLayout_mainNav a[id*="elNavigation_app_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 { content: "\f02d" }
#ipsLayout_mainNav a[id*="elNavigation_app_calendar"]:before{ content: "\f073" }
#ipsLayout_mainNav a[class*="cms"]:before{ content: "\f0f6" }
#ipsLayout_mainNav a[id*="elNavigation_app_forums"]: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; }
#ipsLayout_mainNav .fa-caret-down{ font-size: 12px; }

2. За 4.1.x

Templates -> Core -> front -> global ->navBarItems and find

{{if $active}}class=’ipsNavBar_active’ data-active{{endif}} id=’elNavSecondary_{$item->id}’ data-role=”navBarItem” data-navApp=”{expression=”mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), ‘\\’, 4 ) – 4 )”}” data-navExt=”{expression=”mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), ‘\\’ ) + 1 )”}” >

Заменете го с:

Добавяте само това – data-FontAwesome=”{$item->title()}” в края. Запазете промените.

Сега в CSS -> Core -> custom.css добавете:

/* Primary Menu */
.ipsNavBar_primary > ul > li > a:before,
.ipsNavBar_secondary > li > a:before{
content: “\f00b”;
font-family: “FontAwesome”;
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
margin-right: 3px;
opacity: 0.6;
line-height: 1;
}

/* The User menu and Create */
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
content: “\f02b”;
font-family: “FontAwesome”;
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
line-height: 1;
}

#elUserLink_menu a[href*=”admin”] i{
display: none;
}

#elUserLink_menu a:before,
#elCreateNew_menu a:before{
display: inline-block;
width: 22px;
opacity: 0.7;
}

#elUserLink_menu a:hover:before,
#elCreateNew_menu a:hover:before{
opacity: 1;
}

/* Add Icon on the primary navigation bar */
.ipsNavBar_primary > ul > li[data-FontAwesome=’Browse’] > a:before{ content: “\f00b” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Store’] > a:before{ content: “\f07a” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Support’] > a:before{ content: “\f1cd” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Forums’] > a:before{ content: “\f086” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Gallery’] > a:before{ content: “\f030” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Downloads’] > a:before{ content: “\f019” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Articles’] > a:before{ content: “\f15c” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Blogs’] > a:before{ content: “\f02d” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Calendar’] > a:before{ content: “\f073” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Chat’] > a:before{ content: “\f27a” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Staff’] > a:before{ content: “\f007” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Users Online’] > a:before{ content: “\f0c0” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Activity’] > a:before{ content: “\f0ac” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Search’] > a:before{ content: “\f002” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Guidelines’] > a:before{ content: “\f0e3” }
.ipsNavBar_primary > ul > li[data-FontAwesome=’Tutorials’] > a:before{ content: “\f19d” }

/* Add Icon on the secondary navigation bar */
.ipsNavBar_secondary > li[data-FontAwesome=’Browse’] > a:before{ content: “\f00b” }
.ipsNavBar_secondary > li[data-FontAwesome=’Store’] > a:before{ content: “\f07a” }
.ipsNavBar_secondary > li[data-FontAwesome=’Support’] > a:before{ content: “\f1cd” }
.ipsNavBar_secondary > li[data-FontAwesome=’Forums’] > a:before{ content: “\f086” }
.ipsNavBar_secondary > li[data-FontAwesome=’Gallery’] > a:before{ content: “\f030” }
.ipsNavBar_secondary > li[data-FontAwesome=’Downloads’] > a:before{ content: “\f019” }
.ipsNavBar_secondary > li[data-FontAwesome=’Articles’] > a:before{ content: “\f15c” }
.ipsNavBar_secondary > li[data-FontAwesome=’Blogs’] > a:before{ content: “\f02d” }
.ipsNavBar_secondary > li[data-FontAwesome=’Calendar’] > a:before{ content: “\f073” }
.ipsNavBar_secondary > li[data-FontAwesome=’Chat’] > a:before{ content: “\f27a” }
.ipsNavBar_secondary > li[data-FontAwesome=’Online Users’] > a:before{ content: “\f0c0” }
.ipsNavBar_secondary > li[data-FontAwesome=’Activity’] > a:before{ content: “\f0ac” }
.ipsNavBar_secondary > li[data-FontAwesome=’Search’] > a:before{ content: “\f002” }
.ipsNavBar_secondary > li[data-FontAwesome=’Todays Activities’] > a:before{ content: “\f06e” }
.ipsNavBar_secondary > li[data-FontAwesome=’My Searches’] > a:before{ content: “\f00e” }
.ipsNavBar_secondary > li[data-FontAwesome=’Unread Content’] > a:before{ content: “\f111” }
.ipsNavBar_secondary > li[data-FontAwesome=’My Created Content’] > a:before{ content: “\f005” }
.ipsNavBar_secondary > li[data-FontAwesome=’Guidelines’] > a:before{ content: “\f0e3” }
.ipsNavBar_secondary > li[data-FontAwesome=’Tutorials’] > a:before{ content: “\f19d” }
.ipsNavBar_secondary > li[data-FontAwesome=’Staff’] > a:before{ content: “\f132” }

/* Add Icon on the user bar */

/* Profile */
#elUserLink_menu > li[data-menuItem=’profile’] > a:before{ content: “\f007” }

/* Attachments */
#elUserLink_menu > li[data-menuItem=’attachments’] > a:before{ content: “\f0c6” }

/* Followed Content */
#elUserLink_menu > li[data-menuItem=’manageFollowed’] > a:before{ content: “\f1d8” }

/* Administrator Panel */
#elUserLink_menu > li[data-menuItem=’content’] > a:before{ content: “\f03a” }

/* Account Configurations */
#elUserLink_menu > li[data-menuItem=’settings’] > a:before{ content: “\f013” }

/* Mod Panel */
#elUserLink_menu > li[data-menuItem=’modcp’] > a:before{ content: “\f132” }

/* Admin Panel */
#elUserLink_menu > li[data-menuItem=’admincp’] > a:before{ content: “\f023” }

/* Logout */
#elUserLink_menu > li[data-menuItem=’signout’] > a:before{ content: “\f08b” }

/* Clients */
#elUserLink_menu a[href*=”/clients/”]:before{ content: “\f07a” }

/* Edit */
#elUserLink_menu > li[data-menuItem=’edit’] > a:before{ content: “\f040” }

/* Ignored Users */
#elUserLink_menu > li[data-menuItem=’ignoredUsers’] > a:before{ content: “\f235” }

/* Options */
#elUserLink_menu > li[data-menuItem=’options’] > a:before{ content: “\f0ac” }

/* Messages */
#elUserLink_menu > li[data-menuItem=’messages’] > a:before{ content: “\f01c” }

/* Add Icon on create bar */

/* Default icon that is displayed if you do not add */
#elCreateNew_menu a:before{ content: “\f0fe” }

/* Announcement */
#elCreateNew_menu a[href*=”/announcements/”]:before{ content: “\f0a1″ }

/* Update Status */
#elCreateNew_menu a[href*=”module=status”]:before{ content: “\f021″ }

/* Member Notes */
#elCreateNew_menu a[href*=”module=notes”]:before{ content: “\f14b” }

/* IPS Downloads */
#elCreateNew_menu a[href*=”/files/”]:before { content:”\f019″ }

/* IPS Gallery */
#elCreateNew_menu a[href*=”/gallery/”]:before { content:”\f030″ }

/* IPS Blogs */
#elCreateNew_menu a[href*=”/blogs/”]:before { content:”\f02d” }

/* Tutorials */
#elCreateNew_menu a[href*=”/tutorials/”]:before { content:”\f19d” }

/* IPS Calendar*/
#elCreateNew_menu a[href*=”/calendar/”]:before { content:”\f073″ }

/* IPS Articles */
#elCreateNew_menu a[href*=”/articles”]:before { content:”\f0f6″ }

/* Create new topic , I stopped two ways to work if the forum has at the root folder or forum*/
#elCreateNew_menu a[href*=”/index.php?/submit/”]:before { content:”\f075″ }
#elCreateNew_menu a[href*=”/forums/”]:before { content:”\f075″ }
#elCreateNew_menu a[href*=”/index.php?/submit/”]:before { content:”\f075″ }

Подобни статииОще от същия автор

Как да нулираме паролата си за IPB от phpmyadmin

Създаване на бекъп и възстановяване на бази данни

Преместване на IPB форум на друг хостинг

Инсталиране, настройкa, поддръжка и български език за IPS suite (IPB форум)

Компактна информация под аватара (IPB форуми)

Подобни статии Още от същия автор