Jump to content

Navigation Icons


sweethoney

Recommended Posts

Posted
2 minutes ago, sweethoney said:

ok i took everything out of the custom css and just use that and its not working but if i put my codes back in it works fine

here this is my test site see for your self

test

This is your code

<li class="ipsNavBar_active" data-active="" id="elNavSecondary_10" data-role="navBarItem" data-navapp="forums" data-navext="Forums" data-navtitle="Forums" style="" data-originalwidth="103" data-fontawesome="Forums">			

notice it has small letters in it all the css has to match

  • Replies 95
  • Created
  • Last Reply
Posted
3 minutes ago, TheJackal84 said:

This is your code


<li class="ipsNavBar_active" data-active="" id="elNavSecondary_10" data-role="navBarItem" data-navapp="forums" data-navext="Forums" data-navtitle="Forums" style="" data-originalwidth="103" data-fontawesome="Forums">			

notice it has small letters in it all the css has to match

<li {{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-navTitle="{$item->title()}" data-FontAwesome="{$item->title()}">			{{$children = $item->children();}}

this is mine see the different at the end and if u dont have the custom css it wont work

all you need to do is add this and than the custom css that i add it

Posted
Just now, sweethoney said:

<li {{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-navTitle="{$item->title()}" data-FontAwesome="{$item->title()}">			{{$children = $item->children();}}

this is mine see the different at the end and if u dont have the custom css it wont work

something is converting it to lowercase letters then, try in the css file to make it the same and see then your current ones must look

But I cant seem to find your custom.css file anywhere so make sure there is no error in there

Posted

its in the

2 minutes ago, TheJackal84 said:

something is converting it to lowercase letters then, try in the css file to make it the same and see then your current ones must look

But I cant seem to find your custom.css file anywhere so make sure there is no error in there

/* 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" }

with out that the code u give wont work

Posted
Just now, sweethoney said:

its in the


/* 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" }

 

when I checked your css that weren't in it so that's why it wont show

Posted

yea i know i did not have it in it when i used yours witch i thought it was so i revert everything back and took just this code

<li {{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-navTitle="{$item->title()}" data-FontAwesome="{$item->title()}">			{{$children = $item->children();}}

and than used my custom css and it worked fine

Posted
5 minutes ago, sweethoney said:

yea i know i did not have it in it when i used yours witch i thought it was so i revert everything back and took just this code


<li {{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-navTitle="{$item->title()}" data-FontAwesome="{$item->title()}">			{{$children = $item->children();}}

and than used my custom css and it worked fine

So any update of theme just find that line and add

data-FontAwesome="{$item->title()}"

to the end of it and it will work and you don't have to replace the whole code

Posted
Just now, TheJackal84 said:

So any update of theme just find that line and add


data-FontAwesome="{$item->title()}

to the end of it and it will work and you don't have to replace the whole code

i will do that

Just now, TheJackal84 said:

what ones?

 

leader board portal chatbox follow us stuff like that

Posted
6 minutes ago, sweethoney said:

i will do that

leader board portal chatbox follow us stuff like that

.ipsNavBar_primary > ul > li[data-FontAwesome='Chatbox'] > a:before {
    content:"\f0e5"
}

.ipsNavBar_secondary > li[data-FontAwesome='Leaderboard'] > a:before {
    content:"\f091"
}

.ipsNavBar_secondary > li[data-FontAwesome='Clubs'] > a:before {
    content:"\f0c0"
}

I cant see where portal is to do it for you

Posted
a#elNavSocialIcons::before {
  content: "\f2dd";
  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;
}

li.ipsthemesSocialIcons.ipsMenu_item >a::before{
  content: "";
}

To get rid of the horrible ones on the social secondary tab and add one to the actual tab

Posted
2 minutes ago, Martin A. said:

If you use "data-navTitle" in your CSS, you don't need to edit a single template. The parameter is there, with the same value as the one you're adding. Seems pointless. 

 

yeah i was wondering why no one had suggested using one of the many data selectors the menu adds in...

Posted
3 hours ago, TheJackal84 said:

.ipsNavBar_primary > ul > li[data-FontAwesome='Chatbox'] > a:before {
    content:"\f0e5"
}

.ipsNavBar_secondary > li[data-FontAwesome='Leaderboard'] > a:before {
    content:"\f091"
}

.ipsNavBar_secondary > li[data-FontAwesome='Clubs'] > a:before {
    content:"\f0c0"
}

I cant see where portal is to do it for you

i have it blocked from guest

27 minutes ago, CodingJungle said:

you mean "my way is better ya'll"? they might be the same person, but his grammar is better.

who are you say to

Posted
Just now, CodingJungle said:

i am me, that is all you need to know 

no you are a nobody on here but if you are saying.... you mean "my way is better ya'll"? they might be the same person, but his grammar is better.

witch i dont think so may be other members but me na...

ps

this topic is guide for nava not wise guys

4 hours ago, TheJackal84 said:

.ipsNavBar_primary > ul > li[data-FontAwesome='Chatbox'] > a:before {
    content:"\f0e5"
}

.ipsNavBar_secondary > li[data-FontAwesome='Leaderboard'] > a:before {
    content:"\f091"
}

.ipsNavBar_secondary > li[data-FontAwesome='Clubs'] > a:before {
    content:"\f0c0"
}

I cant see where portal is to do it for you

sorry im back  i had to fire one of my workers they blow a moter in a car

Posted
49 minutes ago, Martin A. said:

If you use "data-navTitle" in your CSS, you don't need to edit a single template. The parameter is there, with the same value as the one you're adding. Seems pointless. 

 

never even thought of that lol

Posted
Just now, CodingJungle said:

I think i might know a thing or two about "nava"

 

i dont want to buy any of your stuff nor will i i dont see the point when i can hard code it witch would ne better for me

Posted
Just now, sweethoney said:

i dont want to buy any of your stuff nor will i i dont see the point when i can hard code it witch would ne better for me

yeah we all know about how you don't like to "buy" stuff.

Posted
1 minute ago, TheJackal84 said:

never even thought of that lol

even if i put that will it work i dont want just any codes

Just now, CodingJungle said:

yeah we all know about how you don't like to "buy" stuff.

i buy stuff but i wont let you know and plus never have time im always firing someone who cant do a job right

 

3 minutes ago, TheJackal84 said:

never even thought of that lol

data-navTitle

that dont work in my css

Posted
2 minutes ago, sweethoney said:

even if i put that will it work i dont want just any codes

if you do what the other man said by adding that other code to the css then you won't need no html edits

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...