Jump to content
Sign in to follow this  

Help With Background Color In Text Widget

Recommended Posts


I am a newbie and thought I was doing so well!  Unfortunately, I'm now stuck--I've been searching for hours to figure out how to change the background color on a text widget.  I've tried several options posted in various help forums, but no luck.  From what I can gather, solutions vary based on theme being used?  Maybe someone could help me with the code and where to add?  Any help would be appreciated.  




widget is the top text widget (Shoring). I would like the background color to be cbdcc42


Here's the code currently in the widget:



<h1 style="text-align: justify;"><span style="color: #48588f;">Shoring:  </span></h1>
<h3 style="text-align: justify;"><strong style="color: #4ea5dc;">The process of supporting a structure during repairs and renovation</strong><strong style="color: #4ea5dc;"> </strong></h3>
<address style="text-align: justify;"><span style="color: #4ea5dc;"><strong style="color: #4ea5dc;"></strong><strong><span style="color: #48588f;">The intention of this blog is to provide daily support and motivation.  If you're going through a difficult time, recovering from loss or depression, or just want to build healthier daily habits, this blog is for you. Each post is an activity for the day--nothing overly ambitious, but a step toward shoring up your mental and emotional well being.  For step-by-step, </span></strong></span></address>
<h3 style="text-align: left;"><strong><span style="color: #cbdc42;"><span style="color: #cbdc42;"><a title="Start Here!" href="http://www.dailyshoring.com/start-at-the-beginning/" target="_blank">Click Here!</a> </span></span><span style="color: #46578e;"> <span style="color: #48588f;">Or register your email below!</span></span></strong></h3>

Share this post

Link to post
Share on other sites



To start, it's a good thing to obtain and learn Firebug for Firefox. You'll quickly learn to love its ability to test CSS and HTML changes, seeing the effect live before full implementation. 


The key with coloring the background of a text widget is to assign a new, unique class to the widget like this:

<div class="myuniquewidget1">YOUR CONTENT</div>


Then, you can create customized CSS code to coordinate, as in this example:

.myuniquewidget1 {background-color: #cbdcc4;} 

Note:  Hex color codes are six characters, not seven.


You can also use more generic code like this, but it may affect other text widgets you may use elsewhere in the site:

.widget .textwidget {
    background-color: #CBDCC4;
    padding: 5px 2px;

Additionally, I'd like to point out that search engines don't like it when a site has more than one H1 tag on the page. Thus I don't recommend using it with inline CSS in your text widgets or elsewhere.  Instead, it's best to create another unique class for select text that you can style like this:

font-size: 3.75em;


Actually, this works better for you in the long-run, as you have a number of additional CSS options you can apply to text to grab the attention of your visitors.   This site will show you how to do creative, quality CSS, including a wide number of options for fonts and text. http://www.w3schools.com/css/


Custom code may be added to your site via Dashboard > PageLines > Site Options > Custom Code in the CSS Rules area.  Alternatively, if using it, in the style.css file found inside the PageLines Customize plugin or, if using a child theme, in the style.less file within the child theme files.


Quite a bit of your inline styling is redunant, such as <strong style="color: #4ea5dc;"></strong> which contains nothing. Extraneous code only adds to the page load and slows your site.  I recommend not using inline CSS, but custom code instead. This way you can apply the CSS where you want it using either a class or ID.  You'll find more about that in the W3Schools site linked above. 


Welcome to the PageLines Community.  I hope this helps you with your very nice looking site!

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Thank you!  I will work on this shortly and post back.

Thank you for the additional tip on the H1 tags.  

Share this post

Link to post
Share on other sites

Follow-up:  I was able to use the "generic code" above and get the desired background color in the text widget--easy!  Thank you so much!


You also provided me with a more comprehensive solution, as well as additional tools to learn and hone my skills--I really appreciate this and plan to make use of these resources.  I already took out the H1 tag in the widget, as you suggested.  


Thank you again for your time and help!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • colleenc
      By colleenc+
      I am having an issue with the size of the font in a text box widget on my sidebar. It has me completely baffled because I have two text widgets on my sidebar and the other one is displaying perfectly. 
      The sole difference between the two is the amount of text in the widget, but that can't be the problem.
      My site is: loveandnudes.com and the text widgets are on the right side at the top. 
      I have duplicated the one with the issue and I am fiddling with it right now to see if I can find a solution. But I would love any suggestions. I though CSS would do the trick, but either I tried the wrong thing - or I put it into the wrong place.
      Thanks for your help!
    • Digital805
      By Digital805
      Updating background color does nothing in editor. Is there a way to make simple changes NOT use the editor? It appears to not work. I just want a white background.
      I really would like the layout to be the same as vs 3.
      Here is my site in vs. 3 of WHPro: http://globalebookawards.com/
      Here is the new one: http://globalebookawards.com/new/
      I'm sure the client will prefer the boxed layout.
    • sakkthi subramaniyam
      By sakkthi subramaniyam
      I tried to change the header background color above navigation menu to black with custom css. Still a portion comes white in header.
      #header { background-color: black; }   http://d.pr/i/LGKx
      http://d.pr/i/9fK0 white color remains
    • spacle2xl
      By spacle2xl
      Hi and Good day.
      I have attached a screenshot in this post. Please, I want to change the blue there to a shade of red... just same with the active bg color on the nav bar cus am not using anything blue on my design.
      I kinda used google developer tools to locate this
      .dropdown-menu li.current-menu-item > a {.....
      So I added this in the custom CSS section on pagelines
      #menu li .dropdown-menu li.current-menu-item > a { background-color: #cc0033; }
      But it didn't work. I know I got it wrong... Please help. Thanks
    • ppsonline
      By ppsonline
      I am using white font with a dark blue/purple background but the page color fades in at the top making my white font very difficult to read.  Can someone take a quick look and tell me what I am doing wrong?
      Here is a link:
      Thank you for your help.