Agentpress Featured Posts Alignment

[hickmanc]

Is it possible, with the Featured Posts widget, to get there to be a 2x2 box of posts rather than them all being displayed in a single column? Or is there a way to accomplish something similar with a similar widget?

Just to clarify, here is what I'm talking about, except for maybe with a little excerpt/blurb to go with it

http://s12.postimage.org/5762hu3l9/example_Of_What_IWant.png

Thanks!

 

 

[hickmanc]

bump. plz help!

[John]

Posting the URL of your site would help us help you.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[hickmanc]

http://saacurh2012.com/wordpress/

I'm trying to get the Featured Posts in the Featured Bottom Left widget area to go into two columns-- I would like a 2x2 square of featured posts. If I can accomplish this more easily with a different widget, that's fine too. Thanks!

[John]

Give this a shot (by adding it to your style.css)

.featured-bottom .featuredpost .post {
float: left;
padding: 0 10px 10px;
width: 46%;

You'll probably want to tweak the padding and width to get it looking just right.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[hickmanc]

Wow! That worked! Thanks!

Do you know how to get rid of the gray lines between the two rows? I thought that maybe they were horizontal rules so I set those to 0px in the CSS, but that didn't do anything.

Thanks!

[John]

.featured-bottom .featuredpost .post {
border-bottom: none;
}

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[hickmanc]

That worked! Hey, you're good at this.

Just out of curiosity, if I had a second Featured Posts widget, but I wanted them to appear vertically (sort of like the original), how would I go about changing that without ruining my first 2x2 widget?

Thanks!

[John]

WordPress assigns each widget an unique ID, and you can use that to drill down in your CSS to a particular widget. For example, the current Featured Post widget has an ID of

#featured-post-5

so we could have added that to the previous CSS code like this

.featured-bottom #featured-post-5.featuredpost .post {
border-bottom: none;
}

Then you could switch out "5" with the ID of the new widget in some additional CSS and change the CSS accordingly.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[hickmanc]

Thank you! But how do I figure out the ID of the widget?

[John]

Use Firefox as your browser, and install Firebug. Chrome has a lite version of Firebug, but it's not quite up to snuff with Firefox in this regard, in my opinion.

Then search Google for "firebug tutorial," or check this one out: http://www.w3resource.com/web-development-tools/firebug-tutorials.php

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts