How to Add Badge or Label Text in Weebly Site?

Text highlighting is a useful way to attract user’s attention and showcase your important point. This is useful when you have a large paragraph and wanted the users to take away an important point. Platforms like WordPress has a default option to highlight text using inline CSS style. Even you can use badge components in Bootstrap to add text labels. If you like to add such label or badge to text in Weebly site, then here is a tutorial with complete code.

Text Label or Badge

You can use labels to highlight the background of the text in different colors to attract user’s attention. For example, you can highlight the warning text in red color though out your site to indicate the importance of the warning messages without the need of adding additional notifications. Using such a text labels in Weebly is very easy with the help of “Embed Code” element and CSS code. We will explain with five different color labels, you can either use a single color or add as many as colors as you need for your site. Before going to the code below is the example of text tables what we are talking about:

The labels can be used either in a listed items or wherever you want inside the paragraph text.

Adding Labels in Weebly

Text labels are added using simple CSS and there are three steps in this process:

• Creating CSS code
• Inserting CSS Code
• Embedding HTML

1. CSS Code for Labels

We will define the CSS code for the basic label like below without any color attached to it. This helps to create as many as colors separately along with the basic label code.

.label {
    padding: 5px;
    line-height: 2;
    color: #ffffff;
    border-radius: 4px;
}

In this example we will define the following five color labels – default, info, success, warning and danger.

.label-default {background-color: #b3b3b3;}
.label-info {background-color: #5bc0de;}
.label-success {background-color: #5cb85c;}
.label-warning {background-color: #f0ad4e;}
.label-danger {background-color: #d9534f;}

Adding together the complete CSS code for your labels should look like below.

<style>
.label {padding: 5px;line-height: 2;color: #ffffff;border-radius: 4px;}
.label-default {background-color: #b3b3b3;}
.label-info {background-color: #5bc0de;}
.label-success {background-color: #5cb85c;}
.label-warning {background-color: #f0ad4e;}
.label-danger {background-color: #d9534f;}
</style>

2. Inserting CSS Code in Weebly

Depending upon your need, there are three possibilities to insert CSS code.

• You can add the above code in your main.less to add the text labels at site level (alternatively under site header section). It means, you can embed the HTML anywhere in your site and the published site will show the labels.
• Insert the code under header code section of a page. In this case, you should embed the HTML only in the page where you insert the CSS.
• Use embed code element to combine CSS and HTML together. In this way, you can use text labels anywhere without adding CSS in page or site header.

If you are looking for how to add CSS code in your Weebly site then checkout the possibilities in this article. Remember, you need not include <style> and </style> tags if you are adding the CSS code in main stylesheet main.less file.

3. Inserting HTML Using Embed Code Element

Now that you have the CSS code and the next step is to drag and drop an embed code element and add your text content. You can use the HTML span tag to insert labels and highlight the text in one of the defined colors like below:

<span class="label label-default">Default Label</span> This is a default label.
<span class="label label-info">Info Label</span> This is a info label.
<span class="label label-success">Success Label</span> This is a success label.
<span class="label label-warning">Warning Label</span> This is a warning label.
<span class="label label-danger">Danger Label</span> This is a danger label.

Below is how it will look on the browser. Remember, you need to publish the site to check the result and you will not see the result inside Weebly editor.

The “line-height=2” in the .label CSS class is used to provide enough space between lines when the labels are used in a continuous paragraph. You can reduce the font-size or use any other CSS properties to make the display better on your Weebly site.

Below is an example of how the continuous paragraph will look like with highlighted text labels:

Points to Note

• If you do not want to use multiple color labels then just add background-color attribute to the basic label code to define the color of the background.
• We recommend using the CSS and HTML combined inside embed code element. In this way, you can retain the code if you change your theme.
• You can also add font awesome icons with the labels.

If you are looking for adding color background paragraph in Weebly, check out this article.