color bar

  • 1
  • Question
  • Updated 7 years ago
  • Answered
How do I change the color of the blue bar at the top of the page on style Modern Office?
Photo of glitterxc32

glitterxc32

  • 1 Post
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,
Something like this may be doable with the custom CSS feature on Yola Silver accounts. In order for us to have a peek at your account, please share your domain name with us.

I'll be referring your request to our HTML team who will be happy to assist you further.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hi there,

Brianna is right in saying you need to use some custom CSS to do this. Before you read this whole post, scroll to the bottom of this post and read from where I've marked '**' first!

If you have a Yola Silver account, you need to click 'Style', then 'Edit Custom CSS'



A box should open up. On the left hand side, paste the following CSS in the blank area:

div.ys_heading {
_behavior: url(http://s3.yolacdn.net/V0022157/templa...;
margin:40px 0 0 0;
background:url(resources/top.png) top left no-repeat;
padding:24px 0 0 50px;
height: 116px;
voice-family: "\"
}

div#sys_banner {
width: 978px;
height: 150px;
background: url(http://s2.yolacdn.net/V0022157/templa...) top left no-repeat;
margin:-49px 0 10px 0;
}

Now you need to make sure that on the bottom left corner, 'Disable CSS Overrides' is NOT checked, as shown below.



Now the CSS I mentioned won't work yet. In fact, using that code should actually make that blue at the top of the page disappear. This is because the style makes use of a picture for that blue bit, not colour tags.



(Notice a bit is cut off at the bottom. Don't worry about it, it's necessary!) So what I have done is saved that image, which I can now edit to change the colour of it. To help you out here, I need to know exactly what colour you'd like it to be. To be more specific, please look at this website and scroll down a bit. You should see a whole chart of colours with text inside every colour box. Select the colour closest to your desire, and copy the text that has a hash (#) next to it, and post it here for me to see. I need that code so I can change the image to the exact colour you want!

Ok, once you've done that, I'll change the image for you and post it here for you to save to your computer. Once you have saved it to your PC, you'll need to upload it to you file manager in Yola. If you go back to the CSS I gave, you'll see a section that shows:

background:url(resources/top.png) top left no-repeat;

That's the part of the code that makes the blue bit appear. Now the 'resources/top.png' will be the default path when you upload the image to the Yola file manager. If you put it in a folder named 'Banner' for example, it would then have to be changed to 'resources/Banner/top.png' for it to work.

By the way, 'top.png' is the name of the image. This can be changed if you want, but be sure that if you change it, you change the name in the path too!

Now I'm going to use an example of what would happen below. I have changed the picture to an orange hue, and uploaded it to the file manager.



I used the custom CSS, and now have the following result!



Now I'm sure you notice the problem. There's a little piece of blue still there! That's because there is a separate little triangle to make it look like it overlaps the banner. Now we need that blue to be orange too. So I saved the triangle, edited to the same orange, and now uploaded to my file manager.

Now the CSS I posted earlier will have to be changed a bit. Paste the following instead of the earlier CSS I provided:

div.ys_heading {
_behavior: url(http://s3.yolacdn.net/V0022157/templa...;
margin:40px 0 0 0;
background:url(resources/top.png) top left no-repeat;
padding:24px 0 0 50px;
height: 116px;
voice-family: "\"
}

div#sys_banner {
width: 978px;
height: 150px;
background: url(http://s2.yolacdn.net/V0022157/templa...) top left no-repeat;
margin:-49px 0 10px 0;
}

div.ys_banner_overlay {
background:url(resources/point.png) top left no-repeat;
width: 978px;
height: 150px;
}

Notice towards the bottom where it says 'resources/point.png'. That is what is necessary to display the updated orange triangle, because it is now in my file manager. Remember we did the same thing earlier with the blue bit?

This is what is now displayed:



**Tada! Now all of that info may be a little too much to handle. I know it's a bit intimidating, and unfortunately with some styles, to change something simple is a very complicated process. And if you don't have Yola Silver, no worries! There's still a way to use the code (I'll tell you if you don't have Yola Silver). But it can be done! So here's a summary of what you have to do BEFORE you attempt adding the custom CSS:

1) Find the color you want to change it to.

2) Post it here so I can change images needed to desired colour. (I'll then post back the edits for you)

3) Save the edited images I give you and upload to your file manager.

4) Once we've done all that, then paste the CSS code.

Good luck! I look forward to your response.

Brandon
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Brandon for giving such a thorough answer!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello glitterxc32,

I hope Brandon's tutorial was quite helpful to you. Please let us know if you get stuck along the way.