Agentpress Featured Posts Alignment

Community Forums Forums Design Tips and Tricks Agentpress Featured Posts Alignment

This topic is: not resolved

This topic contains 10 replies, has 2 voices, and was last updated by  John 1 year, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #4497

    hickmanc
    Participant

    Is it possible, with the Featured Posts widget, to get there to be a 2×2 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!

     

     

    #4700

    hickmanc
    Participant

    bump. plz help!

    #4714

    John
    Participant
    Post count: 155

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


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

    #4715

    hickmanc
    Participant

    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 2×2 square of featured posts. If I can accomplish this more easily with a different widget, that’s fine too. Thanks!

    #4727

    John
    Participant
    Post count: 155

    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 ;)

    #5037

    hickmanc
    Participant

    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!

    #5046

    John
    Participant
    Post count: 155

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

    You’re welcome!


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

    #5315

    hickmanc
    Participant

    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 2×2 widget?

    Thanks!

    #5431

    John
    Participant
    Post count: 155

    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 ;)

    #5433

    hickmanc
    Participant

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

    #5434

    John
    Participant
    Post count: 155

    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 ;)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.