• 1
  • Problem
  • Updated 8 years ago
  • Solved
I love my Yola created, eponymous titled website haidynzafer.com - however, I hate that I can't alter the colour or shade of my text back ground in different areas to break the page up into clearly defined sections. Columns look messy because they are not clearly defined and I am unable to place text in boxes or box different sections. My site, although awesome, still comes off looking unprofessional because of this and because it is just looks too basic. HELP. Is there a way to fix this that I am missing? Help me Yola!
Photo of Haidyn Zafer

Haidyn Zafer

  • 1 Post
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Haidyn,

I believe we can help you with this! It is possible to set a background color for your text, but this will require a little bit of HTML coding.

Here is a code snippet that you can use:

<!--<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text goes</div>-->

To use this on your Yola site, you can drag a Text Widget onto your page, click inside your Text Widget to bring up the Text Editing Toolbar. On the toolbar, click on the "HTML" button and paste in the code.

Here is what the various pieces of the code do, each of which you can change to suit what you are trying to accomplish:
* "Width" is how wide the background area will be.
* "Height" is how tall it will be.
* "Border" is how thick the border will be, should you choose to have one. You can also define the color of the border (eg: "solid red.")
* "Background-color" is the color of the background. If you want to be more precise about the color you can replace this with a hex value. For example, if you replace the word "pink" with the hex value:#63B8FF you will get a light blue color block. For a list of hex values see: 500+ Named Colors with rgb and hex values.

You can put the text you wish to appear where you see: "This is where your text goes".

When you are done, Click "OK."

Note: Because this is in a Text Widget, you can also type directly into the Text Widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Text Editing Toolbar to change its various attributes such as color and size.

I hope that help to achieve the look you're after!