Changing the colour of menu options

  • 1
  • Question
  • Updated 7 years ago
  • Answered
We would like to use the Rock Band Premium Style on a new site but find that the Yellow Menu Options (e.g. HOME) don't really fit in with the other colours used on the template. Is there any way of changing this colour. You can see what I mean on this link;
http://newtfta.yolasite.com/

Thanks

Paul
Photo of Paul

Paul

  • 45 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Paul,

Here's the code you would need to change the Yellow color:

div.ys-menu ul li.selected a, div.ys-menu ul li a:hover {
background:#5dc4d3 ;
}

Replace #5dc4d3 with the color choice you wish to have.

Please let me know if you have any trouble with this.
Photo of Paul

Paul

  • 45 Posts
  • 0 Reply Likes
I've never changed code like this before so not 100% sure what I am doing.

I went into STYLE > EDIT CUSTOM CSS... for the page in question.

On the right side of the window I selected Site CSS and located the code you mention above. I then copied the whole of the section from the right side of the window to the Site CSS Overrides window. The actual code I copied over was:

div.ys-menu ul li.selected a, div.ys-menu ul li a:hover { background:#fed706 url(http://s1.yolacdn.net/V0022037/templa...) top left repeat-x;
color:#111;

I then changed the #fed706 to #006600 and clicked on OK in the bottom right corner. I republished the site but nothing had changed. I went back into STYLE > EDIT CUSTOM CSS... and the Site CSS was showing the old value still (#fed706).

I think I may be missing a step somewhere along the way...

Thanks

Paul
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Paul,
Sanja is not currently online so I will forward this to her to review. Please allow for 48 hours for her to take a look at this and post back here. I am hoping that in the meantime another CSS savvy person here on the forum will be able to offer some assistance.

Kind Regards,
Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Paul,

Please just copy the code I have provided you which was:

div.ys-menu ul li.selected a, div.ys-menu ul li a:hover {
background:#5dc4d3 ;
}

All you need to do is change the color value #5dc4d3 to the color you want.

Please let me know if you have any further troubles with this.
Photo of Paul

Paul

  • 45 Posts
  • 0 Reply Likes
OK, I did this but the change did not take effect. Could you read through my previous post again and tell me what I'm doing wrong?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I have fixed this up for you Paul. You will need to click on the green "Publish to the web" button to apply the changes to your live site.