Change theme font color for just 1 section

[pamelawsecurity]

Hi - I'm trying to use Weebly's new Sections. However, to do so, I need to make an exception to the website theme's html font color for just that section, otherwise, my text is invisible in that section.  Seems Weebly should have an easy way to do that since they've added all of these new Section options? Using the font editor window doesn't help/work. Actually, it has worked for one, but then the font editor gets glitchy again. I'm having numerous problems getting the font color to change on html - sometimes it does, sometimes it does not. I don't write custom code so just need a simple way to override this. Thanks for any suggestions!

[Bernadette3]

Hi @pamelawsecurity Can you be more specific about what is glitching? 

Can you try using the editor in a new window in private/incognito mode? 

[PaulMathews · Accepted solution]

@pamelawsecurity The font color button on the text edit bar is notoriously terrible (they need to add an "Apply" button when you select your desired font color). I always apply custom css to text to change its color within special sections. This isn't ideal if you're not a coder but it's a better approach particularly if you know how to construct css classes. Use the Code Element and add your title and paragraph text via html with some inline css to change the font color:

<h2 style="color:#ffffff;">This is a title</h2>
<p style="color:#ffffff;">This is paragraph text</p>

In this example, I've changed the text color of both the title and paragraph text to white (hex code #ffffff). You can modify this to suit your contents and color requirement.

[pamelawsecurity]

Thanks @PaulMathews - very helpful. I know enough to muddle through the code so I can use this in the future. 👍

[PaulMathews]

@pamelawsecurity If you'd like to go a smidge more advanced than this solution, you could try your hand at creating a css class for your section text. This has the advantage of allowing you to fiddle around with the text color in one place and having any changes update across your entire site as opposed to having to hunt down all the sections in your site that have the inline css font color styling.

In the Site Editor, click "Settings" then click "SEO" in the left-hand sidebar and scroll down to the "Header Code" input box. Create your css text class in there like this:

<style>

.text-white {
/* Change default content text color to white */
    color: #ffffff;
}

</style>

To apply this class, you'll add your title and paragraph html as previously described but reference the css class for the color change:

<h2 class="text-white">This is a title</h2>
<p class="text-white">This is paragraph text</p>

The advantage of this method is that, if you modify the attributes of the text-white class, e.g., add "font-weight:bold;" to make your white text bold, this will update the styling globally across your site wherever you referenced the text-white class. The previous method would require you to add the attribute change to each inline style specification wherever you used it across your site (so, lots of hunting around).