Add Background Color To Width of Text

This tutorial provides the steps you can take to add a background color to the width of text rather than the width of the content area.

There’s 2 steps :

# Step 1 : Add your text to a custom HTML widget like this :

Note : If your theme already includes a widget title and text added to the custom HTML widget like you see in the above image, you can skip this step.

# Step 2 : Copy & paste the following CSS to the end of your child themes style.css file and clear caching.

.front-page-1 h4.widget-title { 
    display: inline-block;
    background-color: orange;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.front-page-1 .custom-html-widget h4 { 
    display: inline-block;
    background-color: #079bc4;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

The CSS rules look like this once added to the end of your child themes style sheet.

Related Tutorials

• Altitude Pro Slider Behind Front Page 1 Widget