I am considering messing with some CSS to get a grid layout for my categories/archives at my loadedkiln.com blog. Here's what I have now: http://www.loadedkiln.com/category/s...mic-sculptors/ and I am trying to get a grid instead of a list like this image:



which is from this thread: http://wpmu.org/wordpress-archive-grid/

My question is, based on that guys tutorial, do I add code to the style.css or add the code to the Atahualpa css inserts?

Note: I haven't found a plugin that looks as clean as the above example, which is why I'm even attempting to mess with css.

Add any extra CSS to the CSS inserts so it gets stored in the db and will remain after an update

Ok I put

.archive .post-meta, .blog .post-meta {
     display:none;
}

.archive .post, .blog .post {
     display:inline-block;
     vertical-align:top;
     width:45%;
     padding:1.25%;
     margin:1.25%;
     min-height:170px;
     background-color:#eee;
}

into the css inserts, but it made the main front page also go into this grid mode. Any idea how to make the main posts not do it, but only in the categories and archive lists? And thanks as always Juggledad for your reply.

Ok I think I have the right question to ask, how do I direct my css insert code to go only to category pages?

Something with a .category in front of it perhaps?

you can prefix the css selector with 'body.nameofcategory' use a code editor or the 'view source' option of the browser and find the <body....> statement to see what class to use.

Here is what code is working (I am still going to have to figure how to get more posts and how to get the footer gone)

.archive .post {
     display:inline-block;
     vertical-align:top;
     width:28%;
     padding:1.25%;
     margin:1.25%;
     min-height:190px;
     background-color:#ffffff;
}

I put this in the css inserts and it works great, for those that might be searching on a way to make a simple grid

Originally Posted by Vanessa_S

I am still going to have to figure how to get more posts

That one you set in your WP/Dashboard/Settings/Reading, posts to display ).

and I've actually taken your idea and applied it to a Themeframe theme and it works an absolute treat, thank you Venessa.
The only extra code Themeframe users have to "add" is vertical align top, the rest they can set to the elements themselves ie a post on the archive and categories templates.

if you add a

.post-bodycopy {
    height: 264px;
}

and hide the post footer

div.post-footer {
    display: none;
}

you might be able to get the blocks the same size.