[SalesForce] Salesforce Napili Community:How to give background color to the whole HTML body section

I am using the standard out of the box HTML Editor component but I am not able to give background color to the HTML text. The Code I used is: 

h3 {
    background-color: green;
}

<div id="body" bgcolor="black">

    <br><br><br><br><br>
    <h3 style="color:red;" align="Center" size="10px" >Heading 1</h1>
    <p style="color:black;" align="Center" size="11px" bgcolor="red">First paragraph </p>
    <h3 style="color:red;" align="Center" size="10px">Heading 2.</h1>
    <p style="color:black;" align="Center" size="11px">Paragraph 2</p>
    <br><br><br><br><br><br><br>
</div>

The preview looked like this:

enter image description here

I would also like to know if there is a way to add background color to the entire section including the area with no text.

Best Answer

The way you are trying to add CSS is kinda flawed. You have to define the CSS tags in style attribute for them to work.

Colours working

You can use Inline Styles Like I did. As you cannot use **<Style>** tag in HTML section.

 <div id="body2" style="background-color: green;">

    <br><br><br><br><br>
    <h3 style="color:red;" align="Center" size="10px" >Heading 1</h1>
    <p style="color:black;" align="Center" size="11px" bgcolor="red">First paragraph </p>
    <h3 style="color:red;" align="Center" size="10px">Heading 2.</h1>
    <p style="color:black;" align="Center" size="11px">Paragraph 2</p>
    <br><br><br><br><br><br><br>
</div>

Or in Community builder you have to edit the Theme->DropDown->Edit CSS, It will update the whole Community's CSS.(Can be a bit messy).

Related Topic