Tweet
Share
Share
0 Shares

Weebly has already some built-in elements to add text content to your website. The provided elements are quite simple and there is no extra options for adding personalized text boxes. Well, this tutorial explains how to add colored text box in your Weebly website.



Add Colored Text boxes in a Weebly Website

We’re listing two simple ways of adding a colored text box in your Weebly website:

  • Via CSS Style
  • Via Embedded CSS Style

Here’s a live demo of a colored text box

Via Inline CSS

Inline CSS is used to style individual CSS elements. We will now style the paragraph element. The following code allows you to add a colored text box to your website:

<p align=justify style="background-color:#02f3e5;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;"><b>
This is a Sample Textbox</b>
</p>

The color code can be hexadecimal like #808080 or use direct colors like “skyblue” or “grey”.

You need to use “the Weebly Embed Code element” and paste the code inside the element. The sample text boxes are shown below for various colors:

Sample Text box with background-color:#02f3e5

Sample Text box with background-color:pink

Sample Text box with background-color:lightblue

Via Embedded CSS Style

Here’s a code that you may copy and paste inside an embed code element to create a text box:

<p class="weeblytutorials_quote">
<em>
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat."
</em>
</p>
<style>
.weeblytutorials_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 15px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
</style>

And here’s the result below

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.”

Additional Reading

If you liked this post, then you may consider subscribing to our 
WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.