Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Grid layout for archive


  #1  
Old Mar 7, 2013, 11:53 AM
Vanessa_S
 
26 posts · Apr 2011
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.
  #2  
Old Mar 7, 2013, 01:33 PM
juggledad's Avatar
juggledad
 
23,602 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Add any extra CSS to the CSS inserts so it gets stored in the db and will remain after an update
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 7, 2013, 08:36 PM
Vanessa_S
 
26 posts · Apr 2011
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.
  #4  
Old Mar 8, 2013, 07:59 AM
Vanessa_S
 
26 posts · Apr 2011
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?
  #5  
Old Mar 8, 2013, 10:32 AM
juggledad's Avatar
juggledad
 
23,602 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Mar 8, 2013, 09:10 PM
Vanessa_S
 
26 posts · Apr 2011
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
  #7  
Old Mar 8, 2013, 10:20 PM
Jam's Avatar
Jam
 
1,112 posts · Mar 2011
Perth, Western Australia
Quote:
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.
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites

Last edited by Jam; Mar 8, 2013 at 10:26 PM.
  #8  
Old Mar 9, 2013, 05:04 AM
juggledad's Avatar
juggledad
 
23,602 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Grid style category/archive/tag bongo Excerpts, Read more, Pagination 0 Sep 27, 2010 05:59 AM


All times are GMT -6. The time now is 09:36 AM.


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