Need help? Check out our Support site, then

Change color of icon in RSS widget

  1. 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?


  2. This is the icon but it isn't called anywhere in the CSS so it must be in the underlying theme files.

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

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

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

  6. 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( left center; padding-left: 16px;}

    (I'm not on my machine, please forgive any mistakes in grammar or code)

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

  8. To pick another size or color for the image:

    That should be all you need to get it done.

  9. Daniel-you are a wonder. "Favorited" for future reference. Thanks!

  10. delta - thanks so much! I'll give it a shot!

  11. 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( left center no-repeat; padding-left: 16px;}

    What am I missing?

  12. 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( left center no-repeat; padding-left: 16px;}

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

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

    .widget_rss h3.widgettitle {
    	background: url( no-repeat 0 8px;
    	text-indent: 16px;
    	line-height: 21px;
  15. Without the space in the url:

    .widget_rss h3.widgettitle {
    	background: url( no-repeat 0 8px;
    	text-indent: 16px;
    	line-height: 21px;
  16. Works beautifully!!!!!! Thanks so much. I owe you.

  17. @deltafoxtrot: Would you mind taking a look at mine, pretty please? I have the same orange rss icon issue, too :-(.

  18. 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( no-repeat 0 8px;
    	text-indent: 16px;
    	line-height: 21px;

    And use the link he provided to find another icon color (I actually downloaded the grey one, darkened it and uploaded it to my blog, replacing the url above with my own.)

  19. Omg, vivianpaige, you are the best! Thanks! :-) :-) :-)

  20. Glad it worked for you.

Topic Closed

This topic has been closed to new replies.

About this Topic