Sidebar: Layout of RSS-Feeds like the one for latest links « Support Forum | Kriesi.at

Support Forum » Avisio

Sidebar: Layout of RSS-Feeds like the one for latest links

9 posts from 2 voices

Started 2 years ago by orp
Latest reply from orp
This topic is resolved

Tags:

rss
sidebar

orp
Member

First of all: Thanks Kriesi for the wonderful theme. I'm very happy with it.

Now to my problem: I want to display RSS feeds in the sidebar as beautiful as the "latest links" widget. For illustration purposes look at http://offene-religionspolitik.de/blog/, please. The links under "Abo: Offene Religionspolitik" and "Abo: Staat und Religion" should be displayed as the ones under "Neueste Kommentare". I am a newbie to Wordpress and don't now which files I have to alter in which way. :)

Thanks for the help!

Posted 2 years ago #
James Morrison
Former Team Member

Hey!

The link looks like it's using the RSS Widget (WP admin -> Appearance -> Widgets), just add one and add the feed URL you'd like to display. :)

Best regards,
James

Posted 2 years ago #
orp
Member

Thanks for the quick response. I know how to add the RSS Widget. The thing is I want the RSS widget appear in the style of the "latest links" widget (grey text with bullet points and grey lines). How can I achieve this?

Posted 2 years ago #

James Morrison
Former Team Member

Hey,

No problem, add this to the end of style.css:

.sidebar .widget_rss a {
border-bottom-style:solid;
border-bottom-width:1px;
display:block;
line-height:22px;
padding:3px 10px;
background:url("../images/skin1/bullet_list.png") no-repeat scroll 1px 11px transparent;
border-bottom-color:#BBBBBB;
color:#888888;
text-decoration:none;
}

This simply duplicates the styles which the other widgets has.

If you have any other questions, let me know!

Cheers,
James

Posted 2 years ago #

orp
Member

Thanks, James! It comes very near to what I was looking for. In some respects it's even better. But there is a but. The headline which should appear in the top of the sidebar next to the RSS icon is displayed under below the icon. And the headline is not in the headline style as in the others sidebar boxes (look here: http://offene-religionspolitik.de/blog/). I tried a bit to change it but I'm too unfamiliar with CSS

By the way: I managed to change the font size by adding "font-size: 11px;". The headline was gone before (!) doing this.

Posted 2 years ago #
James Morrison
Former Team Member

Ok, looks like the RSS widget adds some extra code which I didn't have the same bug with when testing / playing. You need to add this to the end of style.css (just under the previous code I posted):

.sidebar .widget_rss .widgettitle a { display: inline; border-bottom: none; font-size: 28px; }

Posted 2 years ago #
orp
Member

Thanks a lot! I added the right color to it (I think it's #666) and now it looks really great. :) One last thing: Can I change the position of the RSS-Icon? I searched for the definition but couldn't find it. It would be great if the icon could be displayed right of the title, not left of it. If this cannot be achieved easily, could you please tell me where I can edit the space between the icon and the title?

Posted 2 years ago #
James Morrison
Former Team Member

Add this code to style.css to get the RSS icon to float right:

.sidebar .widget_rss .widgettitle a img { float:right; right:15px; top:15px; }

I added the top and right code for aesthetics, take it out if you don't like it.

Posted 2 years ago #

orp
Member

Wow! That's great. I had to adjust the exact position of the icon and the title but now it's perfect. Thank you so much!

For all who want to copy it, the final code looks like this

.sidebar .widget_rss a{
border-bottom-style:solid;
border-bottom-width:1px;
display:block;
line-height:22px;
padding:3px 10px;
border-bottom-color:#BBBBBB;
color:#888888;
text-decoration:none;
font-size: 11px;
list-style-image: url("../images/skin1/bullet_list.png");
}

.sidebar .widget_rss .widgettitle a { display: inline; border-bottom: none; font-size: 28px; color:#555; margin-left:-18px;}

.sidebar .widget_rss .widgettitle a img { float:right; top:15px; }

Posted 2 years ago #

RSS feed for this topic