code for template colour change

  • 1
  • Question
  • Updated 4 years ago
  • Answered
hi i need the code to change the green bit colour at the top of the template for my website http://oildistributor.yolasite.com/. can anyone help?
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes

Posted 4 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Amanda

Please add the following code to your Site CSS Editor:
div.ys_nav_wrap {

border-top: 5px solid #336699;
}

div#menu ul li.selected a {
background: #336699;
}
Edit the colour code (#336699) to your liking. Done!
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes
thank you but now when i hover over a page im not on the tab shows up green. can you please give me the code for this also to change the colour? thanks so much.
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes
also on my sub pages the hover text is green. how can i also change this with code?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Amanda

Yes, you can change this with more CSS overrides. Here is the code for the hover background and text colour:
div#menu ul li a:hover {

background: #FFFF00;
color: #660099;
}
Background is the background colour of your menu links on mouseover, and color determines the font colour.
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes
thanks so much. could i possibly also get the code for the sub page headings and the bottom footer of the pages to change the font colour and tab colour?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Amanda

Yes, sure. Sorry, I overlooked your previous request on the submenu properties.
Here is the code for the submenu font colour:
div#menu2 ul li a {

color: #336600;
}
And here is the code for the submenu hover background:
div#menu2 ul li a:hover {

color: #ffffff;
background: #660099;
}
Tip: Don't add more submenus than would fit in one line. If you need more submenu pages, you can either reduce the font size (e.g. add the attribute font-size: 10px; to the div#menu2 ul li a tag). Else, you may want to consider using another Style Template, such as a Free Style with Flyover Menus or a Style with a horizontal submenu layout. You could also create your custom submenu navigation. The Yola Button Widget now makes it very easy to create a horizontal or vertical row of buttons forming a custom navigation bar. You would need to add this bar to each required page and link from it to the respective pages manually.
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes
hey thanks for your help and do you know the code to change the font colour in the footer? thanks :-)
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Amanda

Yes, I do. Sorry for answering your questions incompletely all the time. :-)

So here are the codes for your footer navigation.

In order to change the font colour of the general menu links, use this code and customize it:
div.ys_bottom_nav ul li a {

color: #9a0000;
}
This code will change the properties on mouseover:
div.ys_bottom_nav ul li a:hover {

color: #ffffff;
}
And this code determines the properties of the link of a currently viewed page:
div.ys_bottom_nav ul li.selected a {

color: #f68b1f;
}
Let me know if I missed anything or you have more customization requests.
Photo of Amanda Leigh Marianne High

Amanda Leigh Marianne High

  • 51 Posts
  • 2 Reply Likes
you guys rock :-) thanks so much :-)