Change color of icon in RSS widget

vivianpaige · Member · Sep 20, 2008 at 2:10 am
Copy link

Add topic to favorites
The RSS icon in the RSS widget is orange, which clashes with my color scheme. Any ideas on how to change the color – or the image itself?

Thanks!
thesacredpath · Member · Sep 20, 2008 at 2:55 am
Copy link
This is the icon http://blog.vivianpaige.com/wp-includes/images/rss.png but it isn’t called anywhere in the CSS so it must be in the underlying theme files.
ismailimail · Member · Sep 20, 2008 at 3:32 am
Copy link
I have once commented somewhere asking this as a feature request. I have few of my categories showing up as RSS feeds in my side bar, I would love to have different icons to separate them out visibly. But I don’t have css upgrade so I’m relying on support to eventually see this as a small, but worthwhile, feature.
thesacredpath · Member · Sep 20, 2008 at 3:56 am
Copy link
From what I saw, even with the CSS upgrade, you would not be able to change it. I don’t know about all themes, but I suspect most call the image in the theme PHP files.
vivianpaige · Member · Sep 20, 2008 at 3:57 am
Copy link
TSP – yeah, I saw that. Interestingly enough, there seems to be some parameters that are set it in image, like background color (orange) but everything I tried wouldn’t change the color.
deltafoxtrot · Member · Sep 20, 2008 at 8:22 am
Copy link
Completely hiding the HTML-image with display:none and using a css background image does the trick.

To get you started:
```
#rss-203831901 h3 a img {display:none;}
#rss-203831901 h3 a {background: url(http://faq.files.wordpress.com/2006/11/a28.png) left center; padding-left: 16px;}
```
(I’m not on my machine, please forgive any mistakes in grammar or code)
deltafoxtrot · Member · Sep 20, 2008 at 8:25 am
Copy link
I just see that you use lots of RSS widgets. Instead of using #rss-203831901 for your Twitter feed you can change this part of the selector to .widget_rss for all RSS widgets
deltafoxtrot · Member · Sep 20, 2008 at 8:29 am
Copy link
To pick another size or color for the image: http://faq.wordpress.com/2006/10/23/put-your-feed-in-your-sidebar/

That should be all you need to get it done.
justjennifer · Member · Sep 20, 2008 at 8:47 am
Copy link
Daniel-you are a wonder. “Favorited” for future reference. Thanks!
vivianpaige · Member · Sep 20, 2008 at 3:12 pm
Copy link
delta – thanks so much! I’ll give it a shot!
vivianpaige · Member · Sep 20, 2008 at 3:19 pm
Copy link
OK – I just tried it. For whatever reason, the icon was repeated several times across the background, so I added no-repeat. The icon still displays twice. Any idea why? Here’s the code that I put in:
```
.widget_rss h3 a img {display:none;}
.widget_rss h3 a {background: url(http://faq.files.wordpress.com/2006/11/u14.png) left center no-repeat; padding-left: 16px;}
```
What am I missing?
deltafoxtrot · Member · Sep 20, 2008 at 4:17 pm
Copy link
I see that the Image is wrapped in it’s own link tag so we get the background for two links in the h3 element.

Solution: define the background for h3, not h3 a.

Try this, please:

.widget_rss h3 {background: url(http://faq.files.wordpress.com/2006/11/u14.png) left center no-repeat; padding-left: 16px;}
vivianpaige · Member · Sep 20, 2008 at 4:38 pm
Copy link
OK, I tried that and it eliminates the duplicate. But leaving in “center” and “left” puts the icon in the middle of the text whenever the title is more than one line. So I took both of those out. What that leaves me with is the icon positioned on the left, too high and beneath the text. I’ve tried changing the padding and the margins and it doesn’t move. See this photo http://vivianpaige.files.wordpress.com/2008/09/rssiconposition.jpg

deltafoxtrot · Member · Sep 20, 2008 at 5:53 pm

Got my X-Rays and crafted this (should get us near your idea):

.widget_rss h3.widgettitle {
	background: url( http://faq.files.wordpress.com/2006/11/u14.png) no-repeat 0 8px;
	text-indent: 16px;
	line-height: 21px;
	}

deltafoxtrot · Member · Sep 20, 2008 at 5:54 pm

Without the space in the url:

.widget_rss h3.widgettitle {
	background: url(http://faq.files.wordpress.com/2006/11/u14.png) no-repeat 0 8px;
	text-indent: 16px;
	line-height: 21px;
	}

vivianpaige · Member · Sep 20, 2008 at 8:27 pm
Copy link
Works beautifully!!!!!! Thanks so much. I owe you.
pixelmama · Member · Sep 21, 2008 at 10:41 pm
Copy link
@deltafoxtrot: Would you mind taking a look at mine, pretty please? I have the same orange rss icon issue, too :-(.
vivianpaige · Member · Sep 21, 2008 at 10:47 pm
Copy link
pixelmama – your code should be almost identical to mine except yours is h2 instead of h3. So it should be
```
.widget_rss h2 a img {display:none;}
.widget_rss h2.widgettitle {
	background: url(http://faq.files.wordpress.com/2006/11/u14.png) no-repeat 0 8px;
	text-indent: 16px;
	line-height: 21px;
	}
```
And use the link he provided to find another icon color http://faq.wordpress.com/2006/10/23/put-your-feed-in-your-sidebar/ (I actually downloaded the grey one, darkened it and uploaded it to my blog, replacing the url above with my own.)
pixelmama · Member · Sep 21, 2008 at 11:15 pm
Copy link
Omg, vivianpaige, you are the best! Thanks! :-) :-) :-)
vivianpaige · Member · Sep 22, 2008 at 12:23 am
Copy link
Glad it worked for you.

The topic ‘Change color of icon in RSS widget’ is closed to new replies.

WordPress.com forums

Change color of icon in RSS widget