Styling <hr> tag in widget

[Cojba]

Hello everybody! I have a "small problem" with genesis widgets.

If you go to

www.cdacertificationhq.com

you will see that the hr line between titles in recent/popular articles and featured articles is different. The hr line in featured articles is longer.

I think that this is happening because recent/popular widgets are from wordpress itself, and they are using style defined by wordpress, and featured articles widget is from genesis and apparently have a little different style.

Any idea how to edit/style the line in featured articles widget ?

I can post code from any file that you may need.

Thank you!

Cojba Reviewed by Cojba on 4th Aug 2012. Styling <hr> tag in widget Hello everybody! I have a "small problem" with genesis widgets. If you go to www.cdacertificationhq.com you will see that the hr line between titles in recent/popular articles and featured articles is different. The hr line in featured articles is longer. I think that this is happening because recent/popular widgets are from wordpress itself, and they are using style defined by wordpress, and featured articles widget is from genesis and apparently have a little different style. Any Rating: 5

[RT]

Nothing is defined by wordpress, it's all in your style.css. A simple quick fix for your problem is adding a width value to the featured posts widget:

Find .featuredpage .page, .featuredpost .post in /style.css (line 1040) and add width: 242px;, you'll end up with this:

.featuredpage .page, .featuredpost .post {
border-bottom: 1px solid #DDDDDD;
margin: 0 0 5px;
overflow: hidden;
padding: 0 12px 10px;
width: 242px;
}

result: http://i.imgur.com/pT348.png

[Cojba]

@RT - thank you very much for your detailed answer. This is great. But, is there a chance that I can make a space from the left also ? This is a solution to shorten the <hr> from right, but can I shorten it from left also ?(like in recent/popular).

Tnx once again!

[RT]

Here you go:

.featuredpage .page, .featuredpost .post {
border-bottom: 1px solid #DDDDDD;
margin: 0 0 5px 14px;
overflow: hidden;
padding: 0 0 5px;
width: 251px;
}

Result: http://i.imgur.com/TGt7L.png

[Cojba]

Great! Thanks a lot!

[RT]

No problem. - A little advice to everyone, install firebug, it's an awesome addon.