blog documentation FAQ followers forum marketplace services youtube

solved Change menu button color

The Jamroom Network » Forum » Design and Skin Customization » Page » Change menu button color
Eddy
Eddy
@eddy
9 years ago
479 posts
I'm using the Nova Skin, but I wanted to change the "Create Account" button color to yellow, right now it does but when I place the mouse over it only, I wanted to make the button yellow by default, and if I place the mouse over it, for the button to change to a different color, I have looked and tried different things but wasn't able to do it, can someone help me out?

Thank you

Eddy
updated by @eddy: 03/01/16 01:14:42PM
michael
@michael
9 years ago
7,715 posts
That link is in
/skins/jrNova/header_menu_desktop.tpl

down around link 133 it looks like this:
{if $_conf.jrCore_maintenance_mode != 'on' && $_conf.jrUser_signup_on == 'on'}
    <li><a href="{$jamroom_url}/{jrCore_module_url module="jrUser"}/signup"><span class="capital">{jrCore_lang  skin=$_conf.jrCore_active_skin id="2" default="create"}&nbsp;{jrCore_lang  skin=$_conf.jrCore_active_skin id="3" default="account"}</span></a></li>
{/if}

The best way would be to add another class to that LI element making it look like this
<li class="create_account">

Then go into your skins:
/skins/YOUR SKIN/css/menu.css

and change:
#menu_right li:hover {
//.....
to
.create_account,
#menu_right li:hover {
//.....

That way that button would always have the same CSS as it does when its hovered over.

If your still using jrNova though, best to clone the skin first.
ACP -> DEVELOPER -> DEVELOPER TOOLS -> TOOLS -> CLONE SKIN

So that your changes are protected from an update to the skin.

--
The other way would be to edit that template and apply the CSS directly to the location with style="" but then you couldn't get as specific as you can with a class.
Eddy
Eddy
@eddy
9 years ago
479 posts
Thank you for the step by step @michael, but I'm still not getting it right, can you show me an example of what the style="" should look like? That one might eb easier for me.

Thank you

Eddy
douglas
@douglas
9 years ago
2,791 posts
Just add the hover class to that link, in your skins/jrNova/header_menu_desktop.tpl, find this:

                    <li><a href="{$jamroom_url}/{jrCore_module_url module="jrUser"}/signup"><span class="capital">{jrCore_lang  skin=$_conf.jrCore_active_skin id="2" default="create"}&nbsp;{jrCore_lang  skin=$_conf.jrCore_active_skin id="3" default="account"}</span></a></li>

and change it to this:

                    <li style="{$menu_active_style}"><a href="{$jamroom_url}/{jrCore_module_url module="jrUser"}/signup"><span class="capital">{jrCore_lang  skin=$_conf.jrCore_active_skin id="2" default="create"}&nbsp;{jrCore_lang  skin=$_conf.jrCore_active_skin id="3" default="account"}</span></a></li>



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Eddy
Eddy
@eddy
9 years ago
479 posts
Awesome, thank you. :)

Eddy
douglas
@douglas
9 years ago
2,791 posts
Your welcome! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Tags