WordPress.org

Ready to get started?Download WordPress

Forums

Need a custom category template that displays posts in a thumbnail grid (8 posts)

  1. ilew
    Member
    Posted 3 years ago #

    Hi all,

    I've literally spent days trying to figure out how I can achieve a grid layout for a specific category page on my site. I'm going to be posting video guides on performing various medical examinations for medical students, but the standard list layout is not ideal. So I basically want a 3 column grid with thumbnails which link to the full post. I've been trying to learn php & css over the past week, but my understanding is poor. I just wondered if anyone knew of a way I could find code to give me this basic structure and then from there I could tweak it. I know it's possible to create a custom category.php, but I need help with what code I require. Thanks for taking the time to read this. My site is Geeky Medics

  2. mikedev
    Member
    Posted 3 years ago #

    Most things can be done with CSS. A great tool is the Firefox browser with the Firebug plugin. This will enable you to easily read the HTML and CSS of your page.

    One problem with your site's home page is that each post excerpt is not contained within its own div. To get what you want, each group of post title, excerpt, thumbnail, etc, must be contained in a div. See how the Twenty Ten theme does it. If each post excerpt is in its own div then with CSS you can tell the excerpt container div to be narrow enough to fit three across the page. The post excerpts will automatically flow left to right until they no longer fit, then wrap around and start a new line. The CSS might be something like this:

    div.excerpt {
    float:left;
    width:186px;
    padding-right:10px;
    padding-bottom:20px;
    }
  3. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    yup, its pretty much that simple. I just made a page like you are describing, here
    And wrapped my loop in a div called memberPost with this css:

    .memberPost {
    	float: left;
    	width: 225px;
    	margin: 10px;
    }
  4. ilew
    Member
    Posted 3 years ago #

    Thanks a lot guys. I've put a div around the things you mentioned and now I can tweak it with the styles.css file. However due to my limited knowledge of CSS (very limited) i'm struggling to get the posts to flow left to right like you mentioned. I'm not sure if i've somehow put the div tags in the wrong place, or if it's just a case of using css to get the posts to go left to right. Look at my site Geeky Medics

    Here is a mockup of what i'm trying to achieve Flickr

    I'm sorry for been such a noob at this and the solution is probably simple but i'm totally stuck!

    My CSS is below

    .post-style {
    float:left; width:250px; padding-right:20px; padding-left:0px; padding-bottom:40px; font-size:14px;}

    And this is where I inserted the DIV tags for "div class="poststyle"

    [Code moderated as per the Forum Rules. Please use the pastebin]

  5. djsounds02
    Member
    Posted 3 years ago #

    I can tell you there is something wrong with where you have put the div post style. as it is containing all the posts. If it was placed somewhere else it would repeat for each of the articles. Instead it is only appearing the once I also need to do this layout. and will keep trying to figure this one out!

  6. djsounds02
    Member
    Posted 3 years ago #

    yes when I insert a new div class between all the titles and thumbnails and add just a couple of div classes they do fall how you want them. They are not very tidy though due to your font size and title lengths maybe you should have a look at that once you have sorted the others out. I have attatched a picture for you to see.

    http://www.benjisounds.co.uk/ben/page.jpg

    As you can see the first 4 in firebug are contained within the divs I created.

  7. ilew
    Member
    Posted 3 years ago #

    Thanks a lot djsounds. Could you explain exactly where you have put the div's as I don't quite understand. Do I now need two sets of divs, one of post-style and the other styling-post? I'm working with the wordpress files and they look different to the source view of the site, that's whats confusing me. This is the file i'm working with

    My CODE

    Where in this file do the DIV's need to go, as when I put them in it causes the sidebar to shift to the bottom of the page

  8. ilew
    Member
    Posted 3 years ago #

    I would like to thank everyone so much for helping me out, i've learned so much php, css & html over the past few days it's pretty amazing. Anyway I've been hacking away at it and finally figured it out!!!

    I've done some basic CSS to style it a little, but i'm going to learn some more CSS over the next few days as i'm sure I can make the tiles look much slicker!

    I really can't thank you all enough, this seemed impossible only 2 days ago

    Happy Christmas all, you've made my day :)

    Have a look and let me know what you think, any tips on doing some cool effects with CSS would be appreciated :)
    Geeky Medics

Topic Closed

This topic has been closed to new replies.

About this Topic