How to put a little green box on front page

Where did you specify the words? You should be able to insert that HTML in between each word. Have you considered simply placing a box character between words? As in “foo ? bar”. If the size isn’t to your liking, put it in a span class and style with CSS added to the Additional CSS panel of the customizer.

In fact, you can place your HTML style attributes in Additional CSS so it does not need to be repeated in every occurrence. And don’t you want a span instead of div? Divs will cause subsequent words to line feed by default, spans do not.

Hi,

Thanks for your reply but I can’t put my HTML in my additional css box. So where do I put the html for it to be on the front page?

Thanks,

Sorry for my lack of clarity, I meant just the style attributes go in Additional CSS:

div.x p {
  border:10px;
  border-style:solid;
  border-color:#00ff00;
  padding: 0.0em;
  text-align: center;
  width: 2px;
  height: 2px;
}

Then the remaining HTML repeatedly inserted can be a good bit shorter:
<div class="x"><p></p></div>

Sadly, I cannot tell you where to insert the HTML. it’s theme dependent. Where did you specify which words appear on the page? The HTML would go there. If you need further guidance on this, please ask in the dedicated Shapely theme support forum where the theme devs and expert users are in the best place to help you.