The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Nav icon

View previous topic View next topic Go down

Solved Nav icon

Post by _Twisted_Mods_ on October 1st 2014, 1:58 pm

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


Last edited by thetwistedkilla on October 7th 2014, 7:27 pm; edited 1 time in total (Reason for editing : solved)

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by Ange Tuteur on October 1st 2014, 5:21 pm

Hello thetwistedkilla,

Try using this for your selector :
Code:
a.mainmenu[href*="h1-games"]

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 2nd 2014, 12:22 am

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by SLGray on October 2nd 2014, 12:43 am

Add it to the top of your CSS stylesheet.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 2nd 2014, 1:03 am

still no luck

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by SLGray on October 2nd 2014, 1:05 am

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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 2nd 2014, 1:15 am

i still am unable to get this to work

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by SLGray on October 2nd 2014, 1:22 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 2nd 2014, 1:25 am

yes i used a blank image

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 2nd 2014, 2:53 am

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by SLGray on October 2nd 2014, 2:54 am

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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 3rd 2014, 6:05 am

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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 7th 2014, 1:32 pm

Bump

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by _Twisted_Mods_ on October 7th 2014, 6:13 pm

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;

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Nav icon

Post by Base on October 7th 2014, 7:37 pm

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum