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

Hello thetwistedkilla,

Try using this for your selector :

Code:

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

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

Add it to the top of your CSS stylesheet.

still no luck

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.

i still am unable to get this to work

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

yes i used a blank image

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

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.

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

Bump

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;


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