menu colour changing options

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I need to change the menu setion colour (blue) on this website http://workskillsconsortium.yolasite.... to match the main colours used in the 'make up' of the site. does anyboby know how to do it?
Regards
John
Photo of John Giblin

John Giblin

  • 1 Post
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello John,

This should be easily done by changing the image used for the menu which in fact is only quite small. I have gone ahead and recreated the image using the colours of your background.



save this image from here (Right mouse click>Save as...) then upload it to your File manager :(nav-menu.png) is the image name.

The next thing to do is to create a test page within your same site.

Drag an HTML widget onto your test page and insert this code into it:

<style type="text/css">
div.ys-menu-wrap {
background: url("resources/nav-menu.png") repeat-x scroll left bottom #C18B3A;
margin: 0 0 15px;
padding: 0;
position: relative;
}
</style>

This will replace the code for the navigation design with the new colours but only for this page.

If this works and if you have Yola Silver then you can use the site CSS over-ride facility and paste:

div.ys-menu-wrap {
background: url("resources/nav-menu.png") repeat-x scroll left bottom #C18B3A;
margin: 0 0 15px;
padding: 0;
position: relative;
}

and this will replace the nav menu throughout your site. Otherwise just paste the first code into an HTML widget on each page.

There is more to add but I would like to see this as it stands and we can go on if you wish.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I made the image transparent above can you try this again I've redone the nav bar:



Can I ask if you used any graphics program to copy the image? I'm asking because it has changed 2 aspects. The dimension and the gradient.

To copy it just Right Click with your mouse and then select the Save As option. Use the default name as this should be correct. Definitely don't use Avery or any other graphics program to copy.

The corners that you see need to be dealt with and we'll get to those.

Another option of colours