This post is going to show you how I changed the RSS Feed text link on the Thesis Theme and made it into an RSS Feed Image that changes when you hover over it. Go ahead and test it for yourself right now before we go any further. Even click on it while you are up there and subscribe to my blog.
Thank you to Mathdelane’s comment on my last post asking me to show you this.
I will try to explain everything as much as possible, but in the inevitable case that I miss something or confuse you, leave a comment on the post with your question and I will help.
- The first step in the process is to go to the “Thesis Options” tab and choose “Thesis Options”.
- Then go over to the “Feed Link in Nav Menu” and choose to show the feed link in nav menu, but erase the text in the box.
- Add your custom css code to the custom.css file
Now here is the code that I used for the css, but remember that my exact situation will be different to yours, so some values will have to be changed. Also, the .menu value will only work with the newest version of Thesis, which at the time of writing this is 1.6.
.custom .menu .rss a { padding-right: 16px; margin-bottom: -10px; background: url('images/rss.png') 100% 50% no-repeat; border: none; width: 95px; height: 60px; }
.custom .menu .rss a:hover { padding-right: 16px; margin-bottom: -10px; background: url('images/rss2.png') 100% 50% no-repeat; border: none; width: 95px; height: 60px; }
This should be self explanatory if you are messing with your custom.css file. The main thing to notice is that both are exactly the same values except for the image location of the hover element. That is what makes the new image show when you hover over the icon with your mouse.
Like I said earlier, I’m not very good at explaining so ask me if you don’t understand something. It would help me be a better teacher and help you by giving you the info that you need.
{ 13 comments… read them below or add one }
Hi Brendan,
I was wonderin’ if you could help me out fix the RSS button on my blog such that the icon (93×190) overlaps the header while keeping the nav menu space in place. Pls. refer to the attached image below:
http://lh6.ggpht.com/_dBijVG2ZZGI/Sv4YslS9ZEI/AAAAAAAAA38/QYxjmioWmsk/s800/rss-setting.JPG
I’d appreciate any help.
.-= Mathdelane´s last blog ..Ten Commandments of Human Relations (Blogger Edition) =-.
Try a negative top margin of about 120px or so to see if it will overlap the header for you. You may also want to shrink the image a bit first since you are only working with a 140px height and the image is 190px high. Hope this helps you out.
Hi Brendan,
I did what you just advised, I’ve setup the margin at -120 now -130 but it didn’t make the icon overlap the header. It goes down instead. Image is 141×69. You can take a look at it on my site.
.-= Mathdelane´s last blog ..The Power That Has Bing? =-.
Step 2 doesn’t remove the “Subscribe” text. Any workarounds?
.-= Mathdelane´s last blog ..HOW TO: Setup Google Chrome for Secured Browsing =-.
The best workaround for the text is adding a
text-indent: -9999pxto your css code. As for getting it over the header, my best suggestion at this point would probably be to slice the header and make it the background for the image.Hello Brendan,
I’m fine with the text being removed. I’ll just leave the RSS icon not overlapping the header. Thank you for helping me out. I appreciate it.
.-= Mathdelane´s last blog ..Windows 7 Desktop Guide for Newbies =-.
Wow, Thanks Brendan For the Information. I’ve always wanted to add an image rss feed button with the mouse over effect.
Great Post!
RT @BrendanWenzel Change the RSS Feed to an Image with Thesis Theme http://tinyurl.com/ycqx2gj <<<Perfect Guide.
Very interesting. Thanks for the tips.
.-= KewlGadget 4 Great Gadgets´s last blog ..Multi-Directional Drive Car – The Nissan Pivo 2 =-.
Hi Brendan,
I seem t be doing something really wrong, plus Thesis isn't co-operating. This is the code with the minor tweaks I made to reflect my image size. Please note the image is the same for both commands because I WANT the image to be the same.
.custom .menu .rss a { padding-right: 16px; margin-bottom: -10px;
background: url('images/iconrss.png') 100% 50% no-repeat; border: none;
width: 56px; height: 60px; }
.custom .menu .rss a:hover { padding-right: 16px; margin-bottom: -10px;
background: url('images/iconrss2.png') 100% 50% no-repeat; border: none;
width: 56px; height: 60px; }
That said, Thesis will not remove the Subscribe text. I remove it, hit save and it's back.
You can see the result of this problem here: http://www.theinnocentabroad.com
suggestions?
Hi, just lending a helping hand to those who are still wondering how to a) remove the “subscribe” text from being shown and b) how to reposition the rss image. In no way am I an expert. It took me half an hour just to get this right but if I can help, great! I’m a newbie so I’ll use newbie language, forgive me.
I too wanted to remove the subscribe text cause I didn’t have enough space in my nav menu and the whole rss subscribe was being displaced to the bottom.
1) So I got an orange rss symbol somewhere on the web, I used photoshop to resize the image to 27 px by 27px.
2) I uploaded the image (of course) to my image folder.
3) I added this exact code to the custom.css:
.custom .menu .rss a { padding-right: 0px; margin-right: 3px; margin-top: -5px; background: url(http://www.experienceserenity.com/images/rss-orange-small.png) 100% 50% no-repeat; border: none; width: 28px; height: 28px; text-indent: -9999px}
.custom .menu .rss a:hover {opacity:0.8;}
** I didn’t know what Brendan’s original hover code was supposed to do and plus I didn’t have his images so I just decided to make it go a lighter shade of orange when I hover over it.
and, if you look at my site http://www.experienceserenity.com, you will see that there was very little space in the right corner between the nav menu and the edge of the page so I had to position it like I did and size it like I did.
Oh by the way, to get the “subscribe” text to disappear, a couple of you mentioned that deleted the word in the thesis options does not do anything for it and were right. I too tried this several times.
So , Brendan’s suggestion to use the text indent: -9999px worked, as you can see in my css code.
Hope this helps real newbies like me.
And THANKS Brendan for the original idea and code. Hope I didn’t hijack this thread..
Peace
Thank you so much for contributing to the discussion here. I did this post quite some time ago and should go back to redo some of that code. Thanks again and so happy to have you share your thoughts here.
No worries Brendan,
Thought it would be nice to break it down “newbie” style as much as I could since I am one.
Take care
{ 1 trackback }