Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Grid layout for archive (http://forum.bytesforall.com/showthread.php?t=19841)

Vanessa_S Mar 7, 2013 10:53 AM

Grid layout for archive
 
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:

http://wpmu.org/wp-content/uploads/2...chive-3col.png

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.

juggledad Mar 7, 2013 12:33 PM

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

Vanessa_S Mar 7, 2013 07:36 PM

Ok I put

Code:

.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.

Vanessa_S Mar 8, 2013 06:59 AM

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?

juggledad Mar 8, 2013 09:32 AM

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.

Vanessa_S Mar 8, 2013 08:10 PM

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)

Code:

.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 :)

Jam Mar 8, 2013 09:20 PM

Quote:

Originally Posted by Vanessa_S (Post 97846)
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.

juggledad Mar 9, 2013 04:04 AM

if you add a
HTML Code:

.post-bodycopy {
    height: 264px;
}

and hide the post footer
HTML Code:

div.post-footer {
    display: none;
}

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


All times are GMT -6. The time now is 06:18 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.