In the CSS is it possible to change the colour behind the menu tabs.

  • 1
  • Question
  • Updated 5 years ago
  • Answered
The style I am using is Swanky, the web address is www.limousinesworldwide.co.uk , I have managed to change the tabs when selected and when hovered, but it is still not the desired affect I wanted. I wondered if it would be possible to have a solid blue behind the tabs with white writing, but when hovered over the tab turns a shade of grey. Don't know if this is possible.

Ian
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian Rush,

Nice site! If you change the following css code to as follows it will make the background blue and turn grey when hovered:

#menu li { float: left;
background-color: blue;
}

#menu a:hover { background: grey;
color: #FFFFFF;

}

The "blue" and "grey" can be replaced with the appropriate #code for the right shade of blue or grey.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian,

Looks like you already found a solution. I see that it just changed to blue. Looks great!
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Hello again

I have got to where I want to be, almost. In the CSS I can't get the 'selected' tab to reduce in size and change to the colour I want.

Some more advice please
Ian
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian,

By selected tab do you mean when the mouse hovers over a tab?
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
No if you look at the site you will see. The selected tab for the page you are on is still in the original colour and size, I can't seem to change it.

Ian
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian,

In the following css code, if you change the #770444 to another colour it may work:


#menu .selected a { background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;

}
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Hmm this is what I have in mine

#menu .selected a {
background: #081764;
padding: 15px 30px 16px 30px;
color: #FFFFFF;

Is that not what you are seeing?

Ian
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
I have just noticed actually in the CSS custom, on the right is the original. I copiy and paste over to left and make adjustments and have the right column in preview so I can see. However I have just had a look at the CSS on the right and it is still the original, none of the changes I have been making are being saved.

Is that right? Or am I doing something wrong?

Ian
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian,

No, I'm not a Yola employee so I'm viewing your homepage in FireFox and then going to Tools > Web Developer > Page Source which shows me just the html code for that page. There it is showing what I sent you last...

I just checked the code again and I see the problem, at the top of the page, in the Internal Styles in the Header, it shows two copies of all your css code, first what I sent you last and then in the second listing of the css what you wrote. As a result, the browser is taking the first listing of the code.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian,

When I loaded the template you are using in a test site location in Yola and then make changes, it is taking the changes without putting the css in twice. Something must have got corrupted in your site or on the homepage.

On the left side of the CSS Override screen, is the CSS code only listed there once?

Perhaps first making a off site backup copy of the CSS with all the changes, then deleting the CSS from overrides, then publishing it with the original CSS, then going back and pasting in your changed CSS on the left side screen, then republishing it may work.
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
OK Crystal thanks for the heads up, don't really know what to do now. I'll wait for a guru from Yola to explain what I am doing wrong.

Cheers
Ian
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Just seen your second post, will give that a go

Ian
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Nope didn't seem to do it either....lol

I am probably doing something really stupid here.

Ian
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
In your off site copy of the css, if you load it in wordpad or word, can you do a search for #menu .selected a to check that it is only in the code once?

The account that you have with Yola, can you create a second test site, and paste your off site copy of the css there and see if it does the same thing? Then we'd know if it is something in your css code or if that website itself got corrupted somehow.
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Will try that Crystal had to go to work outside the office for a while now but will give it a go on my return.
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
I have tried as Crystal suggested, copied my css coding and put onto a new Swanky template on a test site, but to no avail it is still doing the same. Could someone have a look please and let me know what is wrong.

I want the menu bar in blue
hover tabs in grey
selected tab in grey
and all the same size.

I do seem to be having some issues here.

Cheers
Ian
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Bump??
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Ian, Could send me a copy of your complete css?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Ian

When I check your CSS overrides field in the CSS Editor, I can see that the whole original CSS code has been added to that field. This is not the correct way to work with the overrides box and causes the problem that things will be double-overwritten and not show the effects you want to achieve.

Please go through your CSS overrides box and clear all code which doubles the original CSS code viewable under the Site CSS tab. The correct way to work with the overrides field is to only add code / code sections which you want to change, or additional code which isn't included by the original code.

As soon as you have cleaned up that box, I will be able to assist you further with the desired changes.
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Thank you Stefan

Don't I feel like the fool now. Still we all live and learn. Everything is as I would like now except the selected tab is enlarged, I want it to be the same size as the menu and don't know what to change.

Cheers
Ian
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Ian,

Replace this code in your CSS.

#menu .selected a {
background: none repeat scroll 0 0 #081764;
color: #FFFFFF;
padding: 7px 30px 2px;
}


( It was the bottom and top padding that needed to be changed.)

Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Gop

Again thank you that sorted the problem
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Ian,

On your page Cars, the slide show is taking too long to display and cycle. I suspect this is because your individual image file sizes are very large?

With a quality show like this each image would be fine at 100 Kb file size and will probably speed the show dramatically. (I presume currently they are in the Mb range?)

You can do this with an online image editor like GIMP or if you want me to, send your images to me at gop@designscent.com and I'll compress the files without affecting the canvas size and return them to you.
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
Had noticed that just not got round to correcting them. I have CS5 that I play with but thamks for the comment.

Ian
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
CS5 will put you into the realm of Francis Ford Coppola!
Photo of Ian Rush

Ian Rush

  • 45 Posts
  • 1 Reply Like
CRYSTAL

Thank you for trying to help an idiot.........lol