Icon for RSS feeds

[sally_maria]

I'm currently using the following CSS, which somebody posted a while ago, to put a userpic on RSS feeds on my reading page.

.journal-type-Y .userpic { background: url(http://i6.photobucket.com/albums/y241/sally_maria/Mood%20Theme/dreamsheep_rss.png) no-repeat;
width:100px;
height:100px;
background-color:#000; }

The only problem is that my style has userpics on the right, but this CSS makes the RSS userpic appear on the left, and it looks a little odd and takes up more screen - see on my reading page here.

Is there anything I can do to the CSS to make the userpic appear in the right place?

Thank you very much for any help you can give me.

Comments

[jana]

Try adding float: right; to your CSS, like below:

.journal-type-Y .userpic {
background: url(http://i6.photobucket.com/albums/y241/sally_maria/Mood%20Theme/dreamsheep_rss.png) no-repeat;
width:100px;
height:100px;
float: right;}

[sally_maria]

Thank you very much.

That's got over to the right, but the placing is still slightly odd. The other userpics line up with the title but this is still below it. Is there any way of fixing that?

[jana]

In that case, add the following CSS to your custom style sheet (I assume you want the rss icon look like all the other user icons):

.journal-type-Y .userpic {
background: url(http://i6.photobucket.com/albums/y241/sally_maria/Mood%20Theme/dreamsheep_rss.png) center no-repeat;
width:100px;
height:100px;
float: right;
margin-top: -3.5em;
padding: .75em;
border: 1px solid #542437;
border-top: 1em solid #542437;}

If you don't want the border around your feed icon, just remove border, border-top and padding from the CSS.

EDIT: Don't forget to include center to background, otherwise your icon will be (default) positioned top left (and it will look ugly with the border around the icon). It's easy to overlook that change in the CSS above :)

[voldsom]

Thank you for this. This gave me the information that I needed to adapt the CSS to my style as well.

[sally_maria]

Thank you again - I had originally missed the change to center and was wondering how to fix it.

I was also able to steal a bit of it to make the CSS I had for limiting the size of entries on my reading page work with it, so that was really helpful as well.

[matgb]

Thanks for this BTW, pretty sure it's my original code, and all my userpics have always been on the right, I'm guessing some themes don't define location in the same way as Tabula Rasa does.

[sally_maria]

Thank you for the original code - I'm afraid I didn't bookmark the original entry I got it from, so I didn't know who to credit.

My userpics have usually been on the right as well, and this is the first layout I've noticed the problem with, but I must admit it took a while with this one. I added the new RSS Dreamsheep and really looked at where it was in the layout.

[matgb]

De nada-it actually makes me wonder if I should comment in a credit/link line when I post stuff, mostly so people know where they got it from and can go back, might also be useful for me on occasions, as I don't know what comm I posted it in to go find it and link here for updates ;-)