Widget font color

[tjd]

Hi,

I've been working with sidebar and footer widgets. It seems that a change to the widget color affects all widgets, wherever they are. Today I thought of an idea for the Header Widget. At the moment it has grey text and is unreadable. If I change it to white, then the sidebar text will disappear. I'm using the Legacy theme. Is there a practical solution that a barely-coding person can use?

Thanx,

Tom

[Brad Dalton]

#header .widget-area {
color: white;
}

---

Tutorials for StudioPress Themes & WooCommerce.

[tjd]

Hi braddalton,

I put the code in between these 2 codes in the css.

}

#header .widget-area {
float: right;
padding: 20px 0 0;
width: 300px;
}

#header .widget {
margin: 0 0 10px;
overflow: hidden;
}

I didn't get any change in font color in the widget. Fortunately I didn't see any other change either. I'm past the stage of cardiac arrest but still shudder when unexpected visions pop-up on screen. But thanx so much for your suggestion. If I didn't put it in correctly please advise.

Thanx, Tom

[Brad Dalton]

I pasted it at the end of the child themes style.css and it worked fine for me.

You could add the declaration for color in the existing CSS code

#header .widget-area {
float: right;
padding: 20px 0 0;
width: 300px;
color: white;
}

---

Tutorials for StudioPress Themes & WooCommerce.

[tjd]

Hi braddalton,

Thanx for staying with me on this. I'm getting no change from either code. I added color as you suggested, but nothing changed. Then I added the original as you did, at the very bottom of the css, updated, checked, no change and when I returned to the bottom of css to remove the code, it was gone?? So I'm not sure where to go with this.

the Title and Title Tag line are both white text on a red header bkgd. The text in the Header widget is grey, and although it's difficult to tell, it looks like the grey text color of the widget titles in the sidebar. As it is I can't use it. It is my attempt to get around the fact that my pic+short bio at the top of the sidebar, fall way down the Page on a Mobile phone. Anyway,

thanx for your help,

Tom

ps/ here's the site if you want to take a peek:  tomjdolan.com

[Brad Dalton]

I thought you where using a text widget but you are using a profile widget.

The easiest way would be to paste the text and insert an image aligned left in a new post draft and grab the html from your text editor there and paste it into a text widget in your header right.

Otherwise the text will be white for all profile widgets as previously stated.

Not sure how to isolate one profile widget but i'll try and find out for you

---

Tutorials for StudioPress Themes & WooCommerce.

[Brad Dalton]

Here's 3 plugins which all add custom classes to widgets

Create a name for the custom class and use that as the selector for changing the text color in the header right profile widget

http://wordpress.org/extend/plugins/kc-widget-enhancements/ KC Widget Enhancements

http://wordpress.org/extend/plugins/custom-widget-classes/ Custom Widget Classes

http://wordpress.org/extend/plugins/widget-css-classes/ Widget CSS Classes

---

Tutorials for StudioPress Themes & WooCommerce.

[tjd]

Great advice braddalton, Hey that's creative,
So I simply create a new post with the pic & text, then copy the code from the html page into a text widget and put that up into the header widget area. I wouldn't have thought of that....obviously i don't have the experience. I'll give it a try.

Thanx, this may take a bit of time and it's gettin late here in Tokyo, but I'll try to get it complete tonite and let you know. So now I see the 3 plugins and I assuming I use one after(?) i create the new text widget, that is not to be used with the current profile widget...or is that not correct?

I'll hyperlink to the plugins and see what they say...

You've been great, Thanx'
Tom

[Brad Dalton]

No need to install any of those plugins.

Simply create the HTML (text and image) and paste it into a widget.

You could make the text white in your editor while creating it or use the CSS.

#header .widget-area {
float: right;
padding: 20px 0 0;
width: 300px;
color: white;
}

<a href="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg"><img class="alignleft size-full wp-image-37423" alt="tom" src="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg" width="65" height="65" /></a>Welcome to Performance of Speaking, dedicated to Beginning &amp; Advanced Speakers World-wide.

<a href="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg"><img class="alignleft size-full wp-image-37423" alt="tom" src="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg" width="65" height="65" /></a><span style="color: #ffffff;">Welcome to Performance of Speaking, dedicated to Beginning &amp; Advanced Speakers World-wide.</span>

---

Tutorials for StudioPress Themes & WooCommerce.

[tjd]

Mornin' braddalton,

Don't know if you received my last email late last nite. Thanx for all your assistance. You made it happen with the creative idea of writing the code in a temp post then taking the created html into the  text widget. My kinda solution. Worked well and it can be seen now in the Header. Had to tinker with the image and I'll be rewriting that tag line for the next week or so.....but it works well.

Tom

[Author]

Posts