Colouring boxes and also website help

  • 1
  • Question
  • Updated 7 years ago
  • Answered
how do i colour the column boxes is this done through html or editing css,Also anyone got any good sites that will help me build i am new to this and would like to learn more i am a silver package holder any help would be appreciated
Photo of websites154


  • 10 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello websites154,

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.

Please let me know if you have any trouble with this.