Changing the Autofocus+ Pro Category layout to the main grid WordPress
- SOLVED
I have a similar question to this one here: [[LINK href="http://wpquestions.com/question/show/id/935"]]http://wpquestions.com/question/show/id/935[[/LINK]], but using the grid layout and not the staggered page.
I tried all of the three steps mentioned in the other post, although I found that the coding for the image grid was located in a different location, at <strong>css/default-layout.css</strong> and <strong>css/portfolio-layout.css</strong>.
<blockquote>1) Find the file used for the blog page ( probably page.php, home.php, or index.php, depending on your settings ), as above, FROM /wp-content/themes/thematic/ TO /wp-content/themes/autofocuspluspro
2) Go to style.css in your autofocus folder. Copy the entire section headed /* Image Grid for the Home Page */ to a new part of that file. In the copied code, replace .blog etc with .category etc
3) Add this code to your functions.php in the autofocus+ folder. I added it at the bottom of the file just above the load thematic functions comment;
add_filter('body_class',dbo_change_cat_body_class,1);
function dbo_change_cat_body_class($c){
if (is_category()){
unset($c[array_search("archive",$c)]);
$c[]="blog";
}
return $c;
}
</blockquote>
However none of these steps worked for me. I'm ending up with one blank square and no content, although I can see in my page source that the category posts are there: [[LINK href="http://tinyurl.com/4tdtyqe"]]http://tinyurl.com/4tdtyqe[[/LINK]].
Answers (3)
Duncan O'Neill answers:
Hi,
I came up with the original solution you quote above. But it was so long I'm not confident that if I send you the files I have from that, it'll work for you, because there may be variations in your setup.
SO, here's a css solution. It involves three edits to the css/portfolio-layout.css file. They're listed below;
Line 73:
.category #content .post-image-container {
display: block;
left: 0; /* this line needs to be commented out */
position: absolute;
top: 0;
z-index: 10;
}
LINE 74:
.category #content .hentry .post-image-container img {
display: none; /* comment out this line */
}
LINE 97:
.category #content .entry-title, .category #content .entry-meta, .category #content .entry-content {
margin-left: -9999px; /* comment out this line */
}
Apologies if I'm telling you something you already know, but the /* */ is a css comment, so all you need to do is put that code around the rules to comment out.
Also, please check the effects of the changes on the rest of the site.
best,
Duncan
elisa comments:
Thank you so much!!! This works, but is there a way to still include the "Category Archives: Category" section that used to sit above the linear layout?
elisa comments:
Hmmm, I also seem to be experiencing an overlap problem. The first thumbnail box has both a date and the title of the post hovering over the image. Which is weird because the other two only display their titles. See image for details.