colored text box on static page

• 

  jennifersiennavitale · Member · Jul 27, 2015 at 2:11 pm

  • Copy link
  • Add topic to favorites

  I want to put a colored text box on my front page

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

• 

  freakingid · Member · Jul 27, 2015 at 5:05 pm

  • Copy link

  Hello,

  Where do you want this colored text box?
  Do you want it within the text content?
  Or, somewhere else?

• 

  jennifersiennavitale · Member · Jul 30, 2015 at 8:50 am

  • Copy link

  Hi
  I want to be able to put a small amount of text in my colored box on my pages
  thank you for answering

• 

  thesacredpath · Member · Jul 30, 2015 at 10:34 pm

  • Copy link

  @jennifersiennavitale, where do you want the text and box to be on the pages? We need to know that before we can give tell you how to do it.

• 

  freakingid · Member · Jul 31, 2015 at 1:23 pm

  • Copy link

  Jennifer, there are different ways to do this. If you’d like to put this colored box in the text content of your page, try the following:

  1. While editing your page, click the tab for “HTML” editing.
  2. Add something like the following:

  Here is text in my colored box. It is a

  beautiful day!</div>
  3. Click “Update.”

  There are many different ways to create that box — find some CSS resources on the web if you need more information. The KEY here is clicking that HTML tab in your page editor so the tags (such as <div>) will come out correctly.

  Good luck!

• 

  jennifersiennavitale · Member · Aug 6, 2015 at 9:31 am

  • Copy link

  Excellent, thank you very much.

• 

  jennifersiennavitale · Member · Aug 21, 2015 at 11:14 am

  • Copy link

  Could you help me with another thing I want to do with the box. I have worked out how to make it bigger but I want to center the box and then add large numbers into it, for a price €195:00.
  thankyou

• 

  freakingid · Member · Aug 21, 2015 at 2:16 pm

  • Copy link

  Hello,
  To center that box, you need to change the margin CSS so the left and right margins are set to “auto.” Note this only works because you have a width set on the box — if you removed the width, the auto margins would not center the box.

  margin: 0 auto 8px auto;

  Learn more about margins here:
  http://www.w3schools.com/css/css_margin.asp

  To increase the size of text, change the font-size CSS. I recommend setting it in terms of ems. For example, 2.0em is like saying “set this to twice the size it would be by default.”

  font-size: 2em;

  Learn more about font-size here:
  http://www.w3schools.com/css/css_font.asp

  Finally, to get the two lines of your pricing text to stay together, I recommend you use a soft line break after the price line, rather than starting a new paragraph. Each paragraph in this theme has a large margin built-in at the bottom.

  To use a soft line break, just hold “Shift” while you hit “Return.” In your HTML view this results in a
  <br>
  tag.

  http://www.w3schools.com/tags/tag_br.asp

  Try this out, and let us know of any issues. If you get time, some of those CSS links are on sites with a lot more CSS reference information, as well.

  Take care,
  Paul