• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

Add Background To Width Of Text

There’s 2 steps :

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

Step 1

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.

Step 2

Related Tutorials

  • Altitude Pro Slider Behind Front Page 1 Widget

Altitude Pro

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.