How to Add Colored Text box in Weebly Site?

Weebly by default offers Title and Text elements to add text content to your site. These elements will look very simple and there is no default option for adding a customized text boxes to your site. Many people think, it is complex to create text boxes with background colors. It is very easy and you can simply use paragraph element with custom CSS to add background colors. In this article we explain how to add colored text box in Weebly site with different methods.

Creating CSS Color Box

You have two options to add background colors to your text content in Weebly.

1. Inserting custom CSS code using different methods
2. Using apps from Weebly App Center

Both methods have their own advantages and disadvantages.

1. Using Custom CSS Code

You can add custom CSS and create colored text box in three ways in your Weebly site:

• Use Inline CSS Style
• Embed CSS Style
• Using External CSS by Modifying Main Style Sheet

1.1 Using Inline CSS

Inline CSS is used to style individual elements and here we will style the paragraph element. Use the following code to add a colored text box to your site:

<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>

Padding and margin attributes are used to align the text within the box and create the required box height. You can add your own text and customize the color according to your page layout. The color code can be a hexadecimal code like #808080 or use direct colors like “skyblue” or “grey” instead of the code.

Once your code is ready, use “Embed Code” element and paste the code inside the element. The sample text boxes are shown below for various colors.

This is a Sample Text box with background color green with white text.

This is a Sample Text box with background color purple and white text.

You can use any kind of HTML tags inside the text box, for example below is code and sample box for linking a webpage using anchor tag.

<p align=justify style="background-color:#ededde;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;">
<a href="https://www.webnots.com/removing-and-customizing-weebly-sidebar/">
<b>Want to Customize Weebly Blog Sidebar?</b> 
</a>
</p>

And here is how it looks:

Want to Customize Weebly Blog Sidebar?

1.2. Using Embedded CSS Style

Below is the block quote style text box using embedded CSS style:

“Here is a text block for block quote content. The block quote style may differ based on the default style of your site’s theme which you can overwrite with your custom code.”

Copy and paste the below code inside an embed code element to create a text box:

<p class="webnots_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>
.webnots_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>

1.3. Using External CSS by Modifying Main CSS Style Sheet

If you are modifying the source HTML/CSS then you need to save your theme with a new name. When you switch to any other standard theme you will lose all the changes and need to change the CSS of that theme again. The following steps will explain you how to put this paragraph on your website.

• Go to “Edit HTML/CSS” option available under “Theme” tab of the Weebly editor.
• Add the following code anywhere in the “main.less” file available under “Styles” section.

.paragraph-textbox{
background: #02f3e5;
filter:alpha(opacity=80);
opacity:0.8;
color: #e9e9e9;
border-radius: 8px;
font-weight: bold;
padding: 5px 5px 5px 10px;
margin:0 auto;
}

• You can customize the color and fonts to suit your site theme.
• Once you are done then drag and drop “Embed Code” element in your site where you want to add a text box.
• Paste the below code inside the embed code element.

<div class="paragraph-textbox">This is a Sample Textbox</div>

Resetting Default Font Styles

In both the above methods, there is a possibility of the font mismatch compared to your theme’s font. If you do not see the fonts properly in your text box, ensure to reset the paragraph font settings to default.

This can be set with the “Change Fonts” option available under “Theme” tab. Select the paragraph text and click on the “Reset” link to change the fonts to the default settings as shown in the below picture.

2. Using Apps

If you want something similar to Weebly elements for adding color box then you have few apps on Weebly App Center.

• When you are in Weebly site editor, go to “Apps” tab.
• Search for “color” to find the apps that can help you to add background color to standard Weebly elements.
• You can connect “Color Box” or “Content Color Box” app to your site.

After installing the app on your site, you can find it in “Installed Apps” section under “Build” tab. Drag and drop it to create a section and then you can insert any other elements inside the color box.

Click on the color box to customize the background colors, add transparency effect and change padding.

Both Color Block and Content Color Box apps offer same functionalities while you can add borders with Content Color Box. Below is an example box created using Color Block app.

Using App Vs Custom CSS

Using the app is a good option as you can customize the background and add elements on the editor. However, the editing experience will be bad with elements overlapping when you type text. In addition, the color boxes will disappear when you disconnect the app from your site.

On other hand, custom HTML is the best option when you want to insert color box only on few pages. You can also prepare the content offline and copy paste on the editor without difficulty. However, you can’t insert other elements with custom code.

Therefore, the choice is yours based on the need.