Nav icon

[_Twisted_Mods_]

Ok First I have looked all over this form and couldn't find the answer so i apologize if somehow i missed it


what im trying to do is put a custom icon or bg image for a nav link on my nav bar..



in the CSS Stylesheet theres code like this

Code:

html #i_icon_mini_index{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/forum_zps32460145.png);
width: 100px;
height: 100px;
}
#i_icon_mini_index:hover{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/forum2_zpsd708c0a7.png);
width: 100px;
height: 100px;

i wanna do that but for a custom html page ..the page name is "h1-games"

i have tryed
#i_icon_mini_h1-games
#i_icon_mini_h1
#i_icon_mini_games

and anything else i could find online with no luck.. so if anyone could help me it would be much appreciated

[Ange Tuteur]

Hello thetwistedkilla,

Try using this for your selector :

Code:

a.mainmenu[href*="h1-games"]

[_Twisted_Mods_]

i assumed u meant like this

Code:

a.mainmenu[href*="h1-games"]{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games_zpsa661c322.png);
width: 90px;
height: 90px;
}
a.mainmenu[href*="h1-games"]:hover{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games2_zps2d6d6b4f.png);
width: 90px;
height: 90px;
}

this did not work for me

[SLGray]

Add it to the top of your CSS stylesheet.

[_Twisted_Mods_]

still no luck

[SLGray]

Code:

a.mainmenu[href*="h1-games"]{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games_zpsa661c322.png);
width: 90px;
height: 90px;
}
a.mainmenu[href*="h1-games"]:hover{
background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games2_zps2d6d6b4f.png);
width: 90px;
height: 90px;
}

Add !important to each line, except for the beginning and closing.

[_Twisted_Mods_]

i still am unable to get this to work

[SLGray]

Did you create the new navigation menu button?  If you did, there should have been a box to enter an image link.

[_Twisted_Mods_]

yes i used a blank image

[_Twisted_Mods_]

ok i think i figured out what i need to do is add a
img id

but i have looked all in the templates and couldn't find where to add it tho

[SLGray]

I replied to your pm.

Edit:  After using a test account, I fixed the first issue by adding the image URL to the creation page for the button.  The only thing left is the hover effect.

[_Twisted_Mods_]

never was able to figure this out so i figure out a temp work around .. i dont use my gallery so i just deleted the index and added a url redirect to my html page and used the image id for the gallery

[_Twisted_Mods_]

Bump

[_Twisted_Mods_]

Ok after weeks of trial and error i finally got the damn thing

Code:

a.mainmenu[href*="/h1-"] img {

background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games_zpsa661c322.png);
background-repeat: no-repeat;
float: initial;


Code:

a.mainmenu[href*="/h1-"]:hover img {

background-image: url(http://i884.photobucket.com/albums/ac50/TwistedKilla/Stuff/games2_zps2d6d6b4f.png);
background-repeat: no-repeat;
float: initial;


[Base]

Topic has been marked as solved and solution posted => Archived