Changing CSS LAYOUT

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I want to change the colour of my tabs on substitutebench.co.uk from yellow with black writing to green with white writing does anyone know how to change this?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Craig,

To change the font colour to white add this code:<!--

a:link {
text-decoration: none;
color: #fff;
}

-->To change the colour of the tabs add this code:<!--

ul#nav li a {
display: block;
font-weight: bold;
padding: 2px 10px;
background:#4db84b;
}

-->Change the background element to the colour you want.

Connor
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Connor for your help with this! Always appreciated. :)
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Excellent Connor thanks for that
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Also when I press on the tab it changes the lettering colour but I wish this to stay white, can this be done?
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Do you mean the hover state or the current page?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
When you actually press on it to take you to another tab it goes dark great and does not return to white when you go back to the home page!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Craig,

Its a little unclear what you are trying to achieve - if you leave a bit more info Connor will more easily be able help you get it done.

Your menu has 3 colour states

1. is the selected state - light grey with black text

2. is the hover state - dark grey with white text

3. is the normal unselected state - yellow with black text.

Maybe combining 1 and 2 would be the answer to a cleaner look.

If you can give Connor a bit more info i'm sure it will help.Maybe he knows what you mean but when i read it i didnt.

Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Lee the website im talking about is http://abbotsfordgolfsection.yolasite...
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
I need the tabs not in use to look like the Misc tab green with white writing but once you press on them it changes the text to unreadable grey on green and it does not go back to white for some reason!!
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
add this:<!--

a:visited {
text-decoration: none;
color: #fff;
}

-->
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Craig,

Here is a list of things you can change:

To change hover state:<!--

ul#nav li a:hover{
background:#000;
color:#fff;
}

-->To change the current page tab:<!--

ul#nav li.current a{
background:#000;
color:#fff;
}

-->To change the current page tab hover state:<!--

ul#nav li.current a:hover{
background:#888;
color:fff;
}

-->

Now just change the colours to your liking. Hopefully this answers your question.

Connor
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
This is the problem Connor I have done all this but for example on the football syndicate page some of the colours are white on green background on the tabs and others are dark grey on a green background I cant understand it!!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Connor,

I am looking for help with regards to making your current tab you press on the "current" page marker to show grey just like my home page is just now as I have tried using the current html but it aint working!!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Forget that I have it working with a bit of tinkering!! Thanks for your help!
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Glad it worked out.