add background color to a block of text on page

• 

  darrylcotton · Member · Aug 7, 2016 at 10:10 am

  • Copy link
  • Add topic to favorites

  Hi

  I would like to add a background color to a section of text on the Home page. The text begins with the headline: “Mirvis pioneers… “up until and including the link “More”

  I would also like all the text in this selection to appear slightly indented on top, bottom,left and right of the background color so it looks like a separate text box.

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Aug 7, 2016 at 10:43 am

  • Copy link

  You’re probably better off slightly changing the contents of the page to wrap those first sections in a div element so that you can target it specifically with CSS.

  Switch to the HTML editor and wrap those bits so the HTML looks like below. The only sections you should need to add are the first and last lines, I’ve just included the rest as a reference:

  <div class="colourbg">
    <h1>
      <b>MIRVIS&nbsp;PIONEERS&nbsp;A NEW WAY OF LOOKING<br>
  AT JEWISH EDUCATION</b>
    </h1>
    <p>
      ...
      <a href="http://www.meltoncapetown.org/mirvisbook"
        <strong>More</strong>
      </a>
    </p>
  </div>

  Then you can style the div container with the following CSS by copying it into the relevant section of the customiser:

  div.colourbg {
    padding: 30px 30px 13px 30px;
    background-color: #EDF3F8;
  }

• 

  darrylcotton · Member · Aug 7, 2016 at 1:29 pm

  • Copy link

  Wow!, thanks so much!!, that worked perfectly :))