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://illiweb.com/fa/pbucket.gif);
width: 100px;
height: 100px;
}
#i_icon_mini_index:hover{
background-image: url(http://illiweb.com/fa/pbucket.gif);
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)
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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"]
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

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://illiweb.com/fa/pbucket.gif);
width: 90px;
height: 90px;
}
a.mainmenu[href*="h1-games"]:hover{
background-image: url(http://illiweb.com/fa/pbucket.gif);
width: 90px;
height: 90px;
}


this did not work for me
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40875
Reputation : 2775
Language : English
Location : United States

https://fmthemes.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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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://illiweb.com/fa/pbucket.gif);
width: 90px;
height: 90px;
}
a.mainmenu[href*="h1-games"]:hover{
background-image: url(http://illiweb.com/fa/pbucket.gif);
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40875
Reputation : 2775
Language : English
Location : United States

https://fmthemes.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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40875
Reputation : 2775
Language : English
Location : United States

https://fmthemes.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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40875
Reputation : 2775
Language : English
Location : United States

https://fmthemes.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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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://illiweb.com/fa/pbucket.gif);
background-repeat: no-repeat;
float: initial;


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

background-image: url(http://illiweb.com/fa/pbucket.gif);
background-repeat: no-repeat;
float: initial;
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
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
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
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