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


This is only a snippet of a WordPress Website Design Article written by Brad Dalton

Read Full Article


Content Disclaimer 

This Content is Generated from RSS Feeds, if your content is featured and you would like to be removed, please Contact Us With your website address and name of site you wish to be removed from.

Note:

You can control what content is distributed in your RSS Feed by using your Website Editor.

Tech Shop Offers