How to change the RSS and Comments icon to a bigger one???
 

I've searched ALL the forum and I couldn't find the answer...

I want to change the default RSS Feed icon and the Comments icon to a bigger one. If I change the image in the atahualpa>Images folder they get cut off...

Please help!!!!!

Hi there,

You will need to set some new CSS rules if you use larger images. This means adding a CSS insert in the Atahualpa Theme Options - HTML/CSS Inserts - CSS Inserts.

You would need to add something like:-

.comments-icon {height: 22px;}
.posts-icon {height: 22px;}

You'd need to set the 22px to suit your larger image as this is the height of the images that come with the theme. Any image over 22px in height would appear cropped; hence the need to set a larger height value.

If you are using Firefox as your browser there is an add-on called Firebug that allows you to see the underlying style rules that control the way your site appears and you can tweak settings (such as the 22px value, above) "on the fly" to see what affect they would have. The changes made in Firebug are not permanent, disappearing when you refresh the page but it allows you to determine what value is needed and then you can fix the value in your CSS insert. Firebug takes a bit of getting used to - or it did for me as a novice - but it's invaluable if you want to tweak your site.

Try the above and see if it works; if not supply a link to your site so we can take a look.

Hope this helps.


Andy

Thanks for your reply!!!

Do I have to change only the height or the width too?? When I put the CSS insert that you told me it appears to show more of the image so I would imagine I have to change the width to a larger number, but when I do it moves the image to the top left...

My hompage is http://www.berryadictos.com but because it's live I have to put the original icons so the people don't see the cropped one...

thanks again for you reply!!!

Sorry bit late with reply.

There's no need to do anything width-wise.

You may have to adjust the paddings/margins that are being applied by adding extra CSS inserts to position your icons where you want.

That's where Firebug comes in with the Firefox browser. You can see what rules are being applied to the icons and adjust them on the fly to see the effect. The changes you make are not permanent but they will allow you to determine what CSS insert you will need to add/amend.

I just went to your site and, using Firebug, changed to icons to point to larger 36px ones on my pc. By changing the line height to 36px and the padding-left to 47px then it displayed okay.

So try this:-

.comments-icon {height: 36px; padding-left: 47px;}
.posts-icon {height: 36px; padding-left: 45px;}


I note you have got a 64px height declared via your css insert, how big is the image you want to use?

Andy

Hi There!!!!

Thanks for all the help!!!!

I'm going to try with the 36px to see if thats ok...

I wanted a big icon, something near 60x60px but I dont know if they will fit (RSS and Comments)... Whats the largest icon I can put in there so both of them will fit???

And thanks again for all your help!!!

Thanks shedhed

Actually the 36px looks awesome!!!!!!

Thanks for taking the time...

Just had a look at the icons on your site and, yes, they look good.

Glad you got it sorted.

Andy (Shedhed)