Can I change default text colour of my site in Yola Silver

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I have just upgraded to Yola Silver and have also updated the look of my site http//www.simplyeighties.com to a new premium style. It is looking much better and I'm really pleased with the look. However, on some pages where I haven't used a panel behind the text, the text is a horrible gold colour and I wondered if I could change this to white without having to manually edit each page?
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
  • unconcerned

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Mark,

Congrats on upgrading to Silver. Great to know that you've experienced the pleasures so soon.

You can do this but at the same time you can't have 2 defaults. (There are tricks though if you have a high use for two themes on the one website. This requires the use of CSS classes that you call for one or the other). w3schools is a great resource for learning aspects of such coding.

You need to identify the text colour in the CSS settings and then amend this in CSS Overrides and that will be your default text colour.

The original will be something like this:

body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color:#000000;
background-image: url(resources/backgrounds/atom-bkgd.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}

You would then go into you CSS Over-rides and paste this in, and amend the color:#FFFFFF to color:#xxxxxx where xxxxxx would be the hex code for your preferred colour. White for instance is #FFFFFF

You may also need to change your link colours as well as these are a separate setting:

eg: the original may be soemthing similar to this:

a:link {
text-decoration: none;
color: #333333;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #000000;
}

These would also need to be changed in the CSS overides if you don't want the original defaults.

I also recommend that you download FireBug because this is an amazing tool for graphically identifying the elements of code that you can then amend. The best way to learn the aspects of FireBug is to find a tutorial on YouTube.

Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
Hi Gop,

Many thanks indeed for your help, it's very much appreciated. I have now managed to change the text colour by altering from #b2a597 to #ffffff under the body section (original code below)

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#b2a597;

Unfortunately, there seems to be a bug or something that has added a line of the brick splatter pattern below the site banner on every page of my site. This happened straight after copying and pasting the original CSS code into the overrides page and before I made any adjustments.

I've solved one problem and created another it seems!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Mark,

Glad that you were able to work this out so quickly.

I haven't looked at the situation as yet but will do so. It may not be a bug but rather a deliberate addition of code for continuity sake. This may take a little time for me to solve but I will definitely look at it over the next few hours time if that's OK? The Yola people may identify it immediately if they are onto it.

Apologies for the delay on this one.

Forgot to ask: What theme are you using as I would need to know this for a possible fix. Takes me hours trying to identify themes that users have selected :(
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
Don't worry about the delay, it's nearly midnight here and I'm off to bed now anyway! Thank you again for your continued help.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
What theme are you using Mark?
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
Good morning! I'm using Brick Splatter. Not sure why this question has been marked as answered, though, as no one from Yola has provided any answers yet!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's a classification that Yola uses but doesn't mean that it's closed.

Thanks Mark. I'll work on this . I really can't see the issue, wonder if you can give me a screen shot with annotation so that I can work on the issue as you see it?
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
I haven't actually published the site with the CSS changes and have had to revert back to the old code. All I can say is that one line of the black brick splatter pattern appears between the main 80s banner and the next section on each page.

Unfortunately, I've got to log off now but I'll come back in about 8 hours. I hope Yola can also answer this question.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mark N

I have checked your account and your CSS editor. When I enable the overrides again, I can see that the full original Site CSS code has been pasted into the Site CSS override box. This is not the correct way to do CSS overrides. What you need to do is to only copy a certain part or snippet of the original CSS code from the Site CSS window on the right hand side and paste this part into the CSS override box on the left. There you can then customize the code, and you should delete any double information.

So if you just change the font colour of your body text, you will only add the following code to the Site CSS overrides box:
body {

color: #ffffff;
}

I'd suggest that you uncheck the box next to the Disable Site CSS overrides option, then delete the whole code in the Site CSS override box, and just add the code provided above. Click on Save and preview your page.

Please note that adding this colour change to your Site CSS will apply to any body font colour of your website, so every page will display the font in white. If you want different font colours on different pages, you will either need to set up more classes in CSS or edit the desired font colour manually on each page.

Can you please check for me if this works or if you get the same error?
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
Thank you so much! I get it now, so I ony paste the sections of code that I am altering. No wonder I had a problem. This reminds me of when I was learning the BASIC programming language back in the 80s!

Anyway, I have now managed to change the default text colour to white. Yes, I did want to change this on every page, so this has worked a treat.

I'm very happy with Yola Silver and excited about being able to edit the CSS code and learn how it all works. Also love the template which was ideal for my site.

Thank you Stefan and Gop, you have been very helpful.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Wonderful news Mark N!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mark

10 PRINT"I'm happy to hear that my answer was helpful."
20 GOTO10
30 END

I also learnt how to programme with Basic for C64 back in the 80s, and learning HTML, CSS, Jacascript and others really remind me of that time as well. It's like using very advanced versions of Basic in a way. Nice to meet someone who shares the same memories.

The advantage of tagging languages like HTML and CSS is that they're quite user-friendly and self-explanatory to some extent. So you can actually go and try what happens if you change certain parameters of code (as long as you know the basics and don't make a major error which could break your page as well), such as colour, font-weight, background, margin, padding, etc., it's quite fun. And you will be able to create your absolutely individual and personal Style, so that Yola insiders won't even realize at first glance that you have a Yola website and which Style template you used.

To get a more complete and deeper insight I can recommend the free w3schools tutorials. Here is the one on CSS: Learn CSS. Enjoy!
Photo of Mark N

Mark N

  • 466 Posts
  • 30 Reply Likes
Hi Stefan,

I used to have an Atari 800Xl, but some commands in BASIC were universal and could be used on most computers. Of course, it was programming the graphics and sound that was different on each computer and a nightmare at times - Atari BASIC wasn't as user friendly as on other computers, but gave great results if you could master it.

Yes, CSS and HTML appear to be quite user-friendly and I'm starting to understand the basics quite quickly.

Anyway, thanks again and I'll go and have a look at those tutorials.