3 replies to this topic

[dailyshoring]

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.  

 

www.dailyshoring.com

 

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="

Please Login or Register to see this Hidden Content

" target="_blank">Click Here!</a> </span></span><span style="color: #46578e;"> <span style="color: #48588f;">Or register your email below!</span></span></strong></h3>

[Rob]

Hi,

 

To start, it's a good thing to obtain and learn

Please Login or Register to see this Hidden Content

. 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:

Please Login or Register to see this Hidden Content

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.

Please Login or Register to see this Hidden Content

 

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!

[dailyshoring]

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

Thank you for the additional tip on the H1 tags.  

[dailyshoring]

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!