How do I change the font colour on my Learning Site?
It is easy to change the font colour of text written in Flex Box by changing its HTML code.
If you would like to change the font colour in this way, simply follow the steps described in this guide.
You will find here ready-to-use HTML code that you can copy-paste directly into your Flex Box.
Step 1: To start, go back to the “General settings” of your Flex Box:
Step 2: Click on the “HTML” button:
Step 3: Here you can edit the HTML code of your text.
To preview it, simply click on the "HTML" button again to see what the result would look like.
When you open the HTML editor in your Flex Box, you can see that all paragraphs and headings on your Learning Site look like this:
<p>This is a paragraph.</p><h3>This is Heading 3.</h3>
To change the font colour of your paragraph, you need to add a small bit of code that specifies its colour, either by using the name of the colour in English or its RGB code:
To do that, you can use the code below:
Yellow:
<p style="color: yellow !important">Write your paragraph in yellow here.</p><p style="color: #ffff00 !important">Write your paragraph in yellow here.</p>
Orange:
<p style="color: orange !important">Write your paragraph in orange here.</p><p style="color: #ff8000 !important">Write your paragraph in orange here.</p>
Red:
<p style="color: red !important">Write your paragraph in red here.</p><p style="color: #ff0000 !important">Write your paragraph in red here.</p>
Purple:
<p style="color: purple !important">Write your paragraph in purple here.</p><p style="color: #4c0099 !important">Write your paragraph in purple here.</p>
Blue:
<p style="color: blue !important">Write your paragraph in blue here.</p><p style="color: #0000ff !important">Write your paragraph in blue here.</p>
Green:
<p style="color: green !important">Write your paragraph in green here.</p><p style="color: #009900 !important">Write your paragraph in green here.</p>
White:
<p style="color: white !important">Write your paragraph in white here.</p><p style="color: #ffffff !important">Write your paragraph in white here.</p>
Black:
<p style="color: black !important">Write your paragraph in black here.</p><p style="color: #000000 !important">Write your paragraph in black here.</p>
To change the font colour of headings on your Site, you need to follow the same steps as you did with paragraphs:
You can use the code below and change the colour of the heading into the one that you want:
Heading 1:
<h1 style="color: orange !important">Write your Heading 1 in orange here.</h1><h1 style="color: #ff8000 !important">Write your Heading 1 in orange here.</h1>
Heading 2:
<h2 style="color: red !important">Write your Heading 2 in red here.</h2><h2 style="color: #ff0000 !important">Write your Heading 2 in red here.</h2>
Heading 3:
<h3 style="color: purple !important">Write your Heading 3 in purple here.</h3><h3 style="color: #4c0099 !important">Write your Heading 3 in purple here.</h3>
Heading 4:
<h4 style="color: blue !important">Write your Heading 4 in blue here.</h4><h4 style="color: #0000ff !important">Write your Heading 4 in blue here.</h4>
Heading 5:
<h5 style="color: green !important">Write your Heading 5 in green here.</h5><h5 style="color: #009900 !important">Write your Heading 5 in green here.</h5>
Step 4: Once you are ready, simply scroll down to the bottom of the page and click on “Save and return to learning site”:
You will then be taken back to your Learning Site and will see what your text looks like now that you have edited it.
If you would like to change the colours of other elements on your Learning Site, i.e. the name of your Site or the sections, follow the steps described in this guide: Access the guide.
colour, color, colours, colors