Template colour edits

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi Team

I am using the Flower Blossom style. Is it possible to change the light blue body colour and to code the menu bar in a different colour?

Thanks.
Photo of Juanique Pretorius

Juanique Pretorius

  • 23 Posts
  • 2 Reply Likes

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Juanique

I could check this for you in my own account, but I'd prefer to test it in your account as well. Can you please provide your URL? In the Yola account associated with your forum e-mail I can't find any website with the Flower Blossom Style. Thanks.
Photo of Juanique Pretorius

Juanique Pretorius

  • 23 Posts
  • 2 Reply Likes
Hi Stefan,

Thank you, its http://bit.ly/1dGWp24

Hope this helps.
J
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Juanique

Thanks for your link! I was able to find your Yola account and realized that you seem to run the organic shop where I sometimes go for shopping! I'm excited that you have your website with Yola and to assist you further.

You can definitely change the background colour of your content area by using your Site CSS Editor. Please follow these steps:
  1. Click on Site > Content > Site CSS.

  2. There is some incorrectly added code in the left overrides field. Please uncheck the checkbox below.

  3. Remove the incorrect code and replace it by this code:
    #main_content {
    
    background: #336633;
    }


This will change your content background to a dark green. You can replace the colour code #336633 by the code you want. For internet-friendly codes, please see our HTML Colour Code Chart

BUT: Due to the structure of the Style you chose, there will still be the same background for that below part of your banner image (inner wrap image). If you let me know the code of the colour you wish to apply to your content background, I can edit the inner wrap greyish background part for you, using an image editing tool, and send it to you via e-mail.

The menu of your Style doesn't really have a background because it's not designed as a menu bar or something. Still, you could add a background by using the CSS Overrides feature again. How do you picture it to look like?

If all that sounds very complicated to you, my other suggestion would be to go for a new Style. We've just launched a highly flexible and customizable Style named "Super Flat". You can find it quickest if you put that name into the search box under the "Style" tab. It gives you all options you could think of, from colours to fonts to sizes of your banner and content area, etc., etc. There is even the option to add opacity to the background of some elements of a page, such as the navigation and banner area.

Just let me know how you'd like to proceed, and I'll be happy to assist you further either way.
Photo of Juanique Pretorius

Juanique Pretorius

  • 23 Posts
  • 2 Reply Likes
Stefan thank you so much for the above. It is a friend's store - I did not realise you were based on Cape Town.

The coding you gave is certainly helpful. I will circle back if I need anything after a bit of deliberation about which hue etc. Certainly nice to know about the new template.