How to use the staggered or porfolio layout in category view?

  • Question
  • Updated 4 years ago
Hi, Allan! First of all I'd like to thank you for your great child theme, Autofocus + PRO. I just bought it yesterday.

I have a question, how do I use the staggered or porfolio layout in my category view?

I'd really like to have the staggered layout in my category view, because I need the website to look like a gallery in whole, and my front page is a customized page of my own.

I tried to look into the code of every template files in the theme folder to find the loop of the staggered layout, but to no avail. I'm trying to make my own category.php template, but a little clueless on which code to put in to get the staggered layout.

I'm still learning a bit about PHP, but I would truly appreciate if you can point me a clue on how to apply the staggered/portfolio layout in the category view.
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
  • clueless.

Posted 5 years ago

  • 6
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
I'm interested in that too ....
Is it possible to have the category view like the one i had with the autofocus standard free theme ?

Thanks !!
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Nobody seems to know how to solve that ... :(

I'm thinking about creating a new layout page ( maybe taking it from the old Autofocus theme ) to use for that and then linkin' the right css line to it ...

What do you think ??
Allan, can you help us ?
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
Somehow i've managed to get my category page layout to look the same as the staggered layout after altering some .css and .js files in the Autofocuspro folder. But I cannot get the hover effect for the images.

I just don't know how to add the CSS class "entry-hover-on" on the H2 entry title of the category page, and adjust its element style to 0 opacity. I'm still clueless.

Heard that the next release of Autofocus PRO will be stand-alone, not a child theme of Thematic. Hope it'll be easier to be customized.
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
I was looking for the category page in your site but ... is your theme an autofocus theme ?? =:o
It seemes really different from the original one ...
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
the site in my profile doesn't use wordpress, it's another website I'm making for a friend that use WP and Autofocus. I'll post in a few days on how to customize the CSS and JS files..
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Waiting 4 you mate :) thank you !!
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
This is what I did to get the Default Layout (staggered) for my category page.

1) In autofocuspro/css/default-layout.css

Add this CSS styles:

.category #content {margin-top:0px;padding:0;}
.category #content .hentry {width:396px;height:300px;overflow:hidden;float:left;margin:0 4px 4px 0;padding:0;clear:none;position:relative;}
.category #content .hentry.p1 {width:100%;margin-right:0;}
.category #content .hentry.p2 {width:602px;}
.category #content .hentry.p3 {width:194px;margin-right:0;}
.category #content .hentry.p4 {width:296px;}
.category #content .hentry.p5 {width:500px;margin-right:0;}
.category #content .hentry.p6 {width:194px;}
.category #content .hentry.p7 {width:302px;}
.category #content .hentry.p8 {width:296px;margin-right:0;}
.category #content .hentry.p9 {width:398px;}
.category #content .hentry.p10 {width:398px;margin-right:0;}
.category #content .hentry.p11 {width:602px;}
.category #content .hentry.p12 {width:194px;margin-right:0;}
.category #content .hentry.p13 {width:296px;}
.category #content .hentry.p14 {width:500px;margin-right:0;}
.category #content .hentry.p15 {width:194px;}
.category #content .hentry.p16 {width:302px;}
.category #content .hentry.p17 {width:296px;margin-right:0;}
.category #content .hentry.p18 {width:398px;}
.category #content .hentry.p19 {width:398px;margin-right:0;}
.category #content .hentry.p20 {width:100%;margin-right:0;}
.category #content .hentry.p21 {width:602px;}
.category #content .hentry.p22 {width:194px;margin-right:0;}
.category #content .hentry.p23 {width:296px;}
.category #content .hentry.p24 {width:500px;margin-right:0;}
.category #content .hentry.p25 {width:194px;}
.category #content .hentry.p26 {width:302px;}
.category #content .hentry.p27 {width:296px;margin-right:0;}
.category #content .hentry.p28 {width:398px;}
.category #content .hentry.p29 {width:398px;margin-right:0;}
.category #content .hentry.p30 {width:100%;margin-right:0;}
.category #content .entry-title {position:relative;z-index:12;margin:0;padding:0;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-title a {display:table-cell;width:100%;padding:16px 16px 0;}
.category #content .entry-title .comments-link {font-size:16px;line-height:33px;float:left;}
.category #content .entry-title .comments-link a {display:inline-block;padding:16px 0 0 16px;}
.category #content .page-link {font-size:16px;display:none;}
.category #content .entry-meta {position:absolute;z-index:10;top:0;left:0;margin:0;padding:16px 0 0 16px;display:block;width:inherit;float:none;border:none;}
.category #content .entry-hover-on {z-index:12;margin:0;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-meta .entry-date,
.category #content .entry-meta .entry-title {font-size:24px;line-height:33px;text-decoration:none;border:none;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.category #content .entry-meta a {padding:0 16px 0 0;display:block;width:100%;}
.category #content .post-image-container {display:block;top:0;left:0;position:absolute;z-index:2;}
.category .hentry .post-image-container img {display:none;}
.category #content .entry-content {line-height:22px;padding:11px 0;margin:0;position:relative;z-index:10;left:0;width:100%;max-width:394px;}
.category #content .entry-content p {margin:0;padding:0 16px 0;line-height:16.5px;}
.category #content .entry-content a {display:inline-block;line-height:16.5px;font-style:italic;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;height:inherit;width:inherit;}
.category #content .entry-content,
.category #content .hentry h2 {margin-left:-9999px;}
.category #content .entry-utility {position:absolute;top:0;right:0;width:35px;z-index:16}
.category #content .edit-link a {margin-left:-8px;width:35px;}
.category #content .hoverbg {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:8;}

/* Featured Area Styles */
.category #content #sticky-feature {width:800px;height:300px;margin:0 0 4px;display:block;}
.category #content #sticky-feature .hentry.sticky {width:800px;height:300px;margin:0;}

/* Hide JS onload CSS */
.category #content .entry-title,
.category #content .entry-meta,
.category #content .entry-content {margin-left:-9999px;}

=========================================================
2) In autofocuspro/css/default-slider-layout.css

Add this CSS styles:

.category #content {margin-top:0px;padding:0;}
.category #content .hentry {width:396px;height:300px;overflow:hidden;float:left;margin:0 4px 4px 0;padding:0;clear:none;position:relative;}
.category #content .hentry.p1 {width:602px;}
.category #content .hentry.p2 {width:194px;margin-right:0;}
.category #content .hentry.p3 {width:296px;}
.category #content .hentry.p4 {width:500px;margin-right:0;}
.category #content .hentry.p5 {width:194px;}
.category #content .hentry.p6 {width:302px;}
.category #content .hentry.p7 {width:296px;margin-right:0;}
.category #content .hentry.p8 {width:398px;}
.category #content .hentry.p9 {width:398px;margin-right:0;}
.category #content .hentry.p10 {width:602px;}
.category #content .hentry.p11 {width:194px;margin-right:0;}
.category #content .hentry.p12 {width:296px;}
.category #content .hentry.p13 {width:500px;margin-right:0;}
.category #content .hentry.p14 {width:194px;}
.category #content .hentry.p15 {width:302px;}
.category #content .hentry.p16 {width:296px;margin-right:0;}
.category #content .hentry.p17 {width:398px;}
.category #content .hentry.p18 {width:398px;margin-right:0;}
.category #content .hentry.p19 {width:100%;margin-right:0;}
.category #content .hentry.p20 {width:602px;}
.category #content .hentry.p21 {width:194px;margin-right:0;}
.category #content .hentry.p22 {width:296px;}
.category #content .hentry.p23 {width:500px;margin-right:0;}
.category #content .hentry.p24 {width:194px;}
.category #content .hentry.p25 {width:302px;}
.category #content .hentry.p26 {width:296px;margin-right:0;}
.category #content .hentry.p27 {width:398px;}
.category #content .hentry.p28 {width:398px;margin-right:0;}
.category #content .hentry.p29 {width:100%;margin-right:0;}
.category #content .entry-title {position:relative;z-index:12;margin:0;padding:0;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-title a {display:table-cell;width:100%;padding:16px 16px 0;}
.category #content .entry-title .comments-link {font-size:16px;line-height:33px;float:left;}
.category #content .entry-title .comments-link a {display:inline-block;padding:16px 0 0 16px;}
.category #content .page-link {font-size:16px;display:none;}
.category #content .entry-meta {position:absolute;z-index:10;top:0;left:0;margin:0;padding:16px 0 0 16px;display:block;width:80%;float:none;border:none;}
.category #content .entry-meta.relative {position:relative;z-index:12;margin:0;padding:16px 0 0 16px;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-meta .entry-date,
.category #content .entry-meta .entry-title {font-size:24px;line-height:33px;text-decoration:none;border:none;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.category #content .entry-meta a {padding:0 16px 0 0;display:block;width:100%;}
.category #content .post-image-container {display:block;top:0;left:0;position:absolute;z-index:2;}
.category .hentry .post-image-container img {display:none;}
.category #content .entry-content {line-height:22px;padding:11px 0;margin:0;position:relative;z-index:10;left:0;width:100%;max-width:394px;}
.category #content .entry-content p {margin:0;padding:0 16px 0;line-height:16.5px;}
.category #content .entry-content a {display:inline-block;line-height:16.5px;font-style:italic;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;height:inherit;width:inherit;}
.category #content .entry-content,
.category #content .hentry h2 {margin-left:-9999px;}
.category #content .entry-utility {position:absolute;top:0;right:0;width:35px;z-index:16}
.category #content .edit-link a {margin-left:-8px;width:35px;}
.category #content .hoverbg {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:8;}

/* Featured Area Styles */
.category #content #featured-slider-container .post.sticky {width:800px;height:300px;margin:0;}
.category #content #featured-slider-container .entry-title,
.category #content #featured-slider-container .entry-meta {font-size:24px;letter-spacing:-1px;font-style:italic;line-height:33px;width:392px;}

/* Hide JS onload CSS */
.category #content .entry-title,
.category #content .entry-meta,
.category #content .entry-date,
.category #content .entry-content {margin-left:-9999px;}

=========================================================
3) In autofocuspro/css/af-styles.php

Replace:

.blog #content .entry-title a,
.blog #content .entry-meta abbr,
.ie6.blog #content .entry-meta .entry-date,
.blog #content .entry-content, .blog #content .entry-content a,
#content .photo-credit, #content .photo-credit a,
#thumbNav a,
#content .entry-content div.large-image p,
.ie6.blog #content .entry-meta a,
#fancybox-title {color:#}
.single .post-image-container,
.single .post-video-container,
.anythingSlider ul li {background-color:#}
.sf-menu ul a:hover,
.blog #content .hentry,

With:

.blog #content .entry-title a,
.category #content .entry-title a,
.blog #content .entry-meta abbr,
.category #content .entry-meta abbr,
.ie6.blog #content .entry-meta .entry-date,
.ie6.category #content .entry-meta .entry-date,
.blog #content .entry-content, .blog #content .entry-content a,
.category #content .entry-content, .category #content .entry-content a,
#content .photo-credit, #content .photo-credit a,
#thumbNav a,
#content .entry-content div.large-image p,
.ie6.blog #content .entry-meta a,
.ie6.category #content .entry-meta a,
#fancybox-title {color:#}
.single .post-image-container,
.single .post-video-container,
.anythingSlider ul li {background-color:#}
.sf-menu ul a:hover,
.blog #content .hentry,
.category #content .hentry,

=========================================================
4) In autofocuspro/css/default-slider-layout.css

Add this CSS Styles:

.category #content {margin-top:0px;padding:0;}
.category #content .hentry {width:396px;height:300px;overflow:hidden;float:left;margin:0 4px 4px 0;padding:0;clear:none;position:relative;}
.category #content .hentry.p1 {width:602px;}
.category #content .hentry.p2 {width:194px;margin-right:0;}
.category #content .hentry.p3 {width:296px;}
.category #content .hentry.p4 {width:500px;margin-right:0;}
.category #content .hentry.p5 {width:194px;}
.category #content .hentry.p6 {width:302px;}
.category #content .hentry.p7 {width:296px;margin-right:0;}
.category #content .hentry.p8 {width:398px;}
.category #content .hentry.p9 {width:398px;margin-right:0;}
.category #content .hentry.p10 {width:602px;}
.category #content .hentry.p11 {width:194px;margin-right:0;}
.category #content .hentry.p12 {width:296px;}
.category #content .hentry.p13 {width:500px;margin-right:0;}
.category #content .hentry.p14 {width:194px;}
.category #content .hentry.p15 {width:302px;}
.category #content .hentry.p16 {width:296px;margin-right:0;}
.category #content .hentry.p17 {width:398px;}
.category #content .hentry.p18 {width:398px;margin-right:0;}
.category #content .hentry.p19 {width:100%;margin-right:0;}
.category #content .hentry.p20 {width:602px;}
.category #content .hentry.p21 {width:194px;margin-right:0;}
.category #content .hentry.p22 {width:296px;}
.category #content .hentry.p23 {width:500px;margin-right:0;}
.category #content .hentry.p24 {width:194px;}
.category #content .hentry.p25 {width:302px;}
.category #content .hentry.p26 {width:296px;margin-right:0;}
.category #content .hentry.p27 {width:398px;}
.category #content .hentry.p28 {width:398px;margin-right:0;}
.category #content .hentry.p29 {width:100%;margin-right:0;}
.category #content .entry-title {position:relative;z-index:12;margin:0;padding:0;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-title a {display:table-cell;width:100%;padding:16px 16px 0;}
.category #content .entry-title .comments-link {font-size:16px;line-height:33px;float:left;}
.category #content .entry-title .comments-link a {display:inline-block;padding:16px 0 0 16px;}
.category #content .page-link {font-size:16px;display:none;}
.category #content .entry-meta {position:absolute;z-index:10;top:0;left:0;margin:0;padding:16px 0 0 16px;display:block;width:80%;float:none;border:none;}
.category #content .entry-meta.relative {position:relative;z-index:12;margin:0;padding:16px 0 0 16px;font-size:24px;letter-spacing:-1px;line-height:33px;width:100%;}
.category #content .entry-meta .entry-date,
.category #content .entry-meta .entry-title {font-size:24px;line-height:33px;text-decoration:none;border:none;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.category #content .entry-meta a {padding:0 16px 0 0;display:block;width:100%;}
.category #content .post-image-container {display:block;top:0;left:0;position:absolute;z-index:2;}
.category .hentry .post-image-container img {display:none;}
.category #content .entry-content {line-height:22px;padding:11px 0;margin:0;position:relative;z-index:10;left:0;width:100%;max-width:394px;}
.category #content .entry-content p {margin:0;padding:0 16px 0;line-height:16.5px;}
.category #content .entry-content a {display:inline-block;line-height:16.5px;font-style:italic;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;height:inherit;width:inherit;}
.category #content .entry-content,
.category #content .hentry h2 {margin-left:-9999px;}
.category #content .entry-utility {position:absolute;top:0;right:0;width:35px;z-index:16}
.category #content .edit-link a {margin-left:-8px;width:35px;}
.category #content .hoverbg {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:8;}

/* Featured Area Styles */
.category #content #featured-slider-container .post.sticky {width:800px;height:300px;margin:0;}
.category #content #featured-slider-container .entry-title,
.category #content #featured-slider-container .entry-meta {font-size:24px;letter-spacing:-1px;font-style:italic;line-height:33px;width:392px;}

/* Hide JS onload CSS */
.category #content .entry-title,
.category #content .entry-meta,
.category #content .entry-date,
.category #content .entry-content {margin-left:-9999px;}

=========================================================
5) In autofocuspro/js/afscripts.js

Replace:

jQuery(".blog .hentry .hoverbg").fadeTo(0, 0);
with: jQuery(".blog .hentry .hoverbg, .category .hentry .hoverbg").fadeTo(0, 0);

jQuery(".blog .hentry .post-image-container img").hide().fadeIn(500);
with: jQuery(".blog .hentry .post-image-container img,.category .hentry .post-image-container img").hide().fadeIn(500);

jQuery(".blog #content .entry-content").css({'margin-left' : '0'});
jQuery(".blog #content .entry-date").css({'margin-left' : '0'});
jQuery(".blog #content .entry-meta").css({'margin-left' : '0'});
jQuery(".blog #content .entry-title").css({'margin-left' : '0'});

with:
jQuery(".blog #content .entry-content, .category #content .entry-content").css({'margin-left' : '0'});
jQuery(".blog #content .entry-date, .category #content .entry-date").css({'margin-left' : '0'});
jQuery(".blog #content .entry-meta, .category #content .entry-meta").css({'margin-left' : '0'});
jQuery(".blog #content .entry-title, .category #content .entry-title").css({'margin-left' : '0'});

6) In autofocuspro/style.css

Replace:

.search #content .post-video-container {float:left;margin-right:-204px;overflow:hidden;width:188px;height:188px;}
with: .search #content .post-video-container {float:left;margin-right:-204px;overflow:hidden;}

.archive #content .hentry,
with: /*.archive #content .hentry,*/

Add: .category #content .page-title {display:none;}

=========================================================
I've tested with Firefox 3.6, Chrome 10 and IE9. Everythings seems to be okay. If anyone have problem, please post it in the comments here. We might as well solve it together. :)
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Hi farisnasir, great job and many many thanks !!!

Just a question ... at points 2 and 4 you suggest to modify the same file ( autofocuspro/css/default-slider-layout.css ).

is it right ?
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
oops...my bad. actually step no. 4 is the same as step no. 2. So you can just ignore step no. 4.

just follow steps 1,2,3,5 & 6.
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Hello farisnasir ... i did it but ...
I'm having big problems.

This is the result with safari:


and this is the result with firefox:


I'm using Mac os x ...
What's wrong with that ?

Thanks in advance.
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
Correction to "just follow steps 1,2,3 & 5. ",

supposedly "just follow steps 1,2,3,5, & 6." :P

I think you haven't altered the line of code as given i.e.

6) In autofocuspro/style.css

Replace:

.search #content .post-video-container {float:left;margin-right:-204px;overflow:hidden;width:188px;height:188px;}
with: .search #content .post-video-container {float:left;margin-right:-204px;overflow:hidden;}

.archive #content .hentry,
with: /*.archive #content .hentry,*/

Add: .category #content .page-title {display:none;}

And one more thing, do you want to use the Default Layout or the Portfolio Layout on your category page?

The steps I gave is only to apply the Default Layout on the category page.
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Thanks farisnasir, but ...



I did everything from point 1 to 6 :(

I'm using the portfolio view with the slider .... but it's ok the default layout :)
Photo of farisnasir

farisnasir

  • 8 Posts
  • 2 Reply Likes
I'm sorry, as I said earlier, the steps I've given is only for Default Layout.

Please try this,

add this lines of code:

In autofocuspro/css/portfolio-layout.css:

.category #content {margin-top:0px;padding:0;}
.category #content .hentry {width:188px;height:188px;overflow:hidden;float:left;margin:0 16px 16px 0;padding:0;clear:none;position:relative;}
.category #content .hentry.p4 {margin-right:0;}
.category #content .hentry.p8 {margin-right:0;}
.category #content .hentry.p12 {margin-right:0;}
.category #content .hentry.p16 {margin-right:0;}
.category #content .hentry.p20 {margin-right:0;}
.category #content .hentry.p24 {margin-right:0;}
.category #content .entry-title {position:relative;z-index:12;margin:0;padding:0;font-size:18px;letter-spacing:0;line-height:22px;width:100%;}
.category #content .entry-title a {display:table-cell;width:100%;padding:16px 16px 0;}
.category #content .entry-title .comments-link {font-size:16px;line-height:33px;float:left;}
.category #content .entry-title .comments-link a {display:inline-block;padding:16px 0 0 16px;}
.category #content .page-link {font-size:16px;display:none;}
.category #content .entry-meta {position:absolute;z-index:11;top:0;left:0;margin:0;padding:16px 0 0 16px;width:154px;float:none;border:none;}
.category #content .entry-hover-on {z-index:12;margin:0;font-size:18px;letter-spacing:-1px;line-height:22px;width:100%;}
.category #content .entry-meta .entry-date {display:none;},
.category #content .entry-meta .entry-title {font-size:18px;line-height:22px;letter-spacing:-1px;text-decoration:none;border:none;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.category #content .entry-meta a {padding:0 16px 0 0;display:block;width:100%;}
.category #content .post-image-container {display:block;top:0;left:0;position:absolute;z-index:10;}
.category #content .hentry .post-image-container img {display:none;}
.category #content .entry-content {display:none;line-height:22px;padding:11px 0;margin:0;position:relative;z-index:1;left:0;width:100%;}
.category #content .entry-content p {margin:0;padding:0 16px 0;line-height:16.5px;visibility:hidden;display:none;}
.category #content .entry-content a {display:inline-block;line-height:16.5px;font-style:italic;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;height:inherit;width:inherit;}
.category #content .entry-content,
.category #content .entry-utility {position:absolute;top:0;right:0;margin:0;width:35px;z-index:16}
.category #content .edit-link a {margin-left:-8px;width:35px;}
.category #content .hoverbg {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:8;}

/* Featured Area Styles */
.category #content #featured-slider-container {margin-bottom:16px;}
.category #content #featured-slider-container .hentry.sticky {width:800px;height:300px;margin:0;}
.category #content #featured-slider-container .entry-date,
.category #content #featured-slider-container .entry-title {font-size:24px;letter-spacing:-1px;font-style:italic;line-height:33px;width:392px;}
.category #content #featured-slider-container .entry-title a {display: block;width: 392px;padding: 16px 16px 0;}
.category #content #featured-slider-container li img {position:absolute;top:0;left:0;padding:0;margin:0;display:none;}
.category #content #sticky-feature {width:800px;height:300px;margin:0 0 16px;display:block;}
.category #content #sticky-feature .hentry.sticky {width:800px;height:300px;margin:0;}
.category #content #sticky-feature .entry-meta,
.category #content #sticky-feature .entry-title,
.category #content #sticky-feature .entry-date {font-size:24px;line-height:33px;}

/* Hide JS onload CSS */
.category #content .entry-title,
.category #content .entry-meta,
.category #content .entry-content {margin-left:-9999px;}

========================================================
In autofocuspro/css/portfolio-slider-layout.css:

.category #content {margin-top:0px;padding:0;}
.category #content .hentry {width:188px;height:188px;overflow:hidden;float:left;margin:0 16px 16px 0;padding:0;clear:none;position:relative;}
.category #content .hentry.p4 {margin-right:0;}
.category #content .hentry.p8 {margin-right:0;}
.category #content .hentry.p12 {margin-right:0;}
.category #content .hentry.p16 {margin-right:0;}
.category #content .hentry.p20 {margin-right:0;}
.category #content .hentry.p24 {margin-right:0;}
.category #content .entry-title {position:relative;z-index:12;margin:0;padding:0;font-size:18px;letter-spacing:0;line-height:22px;width:100%;}
.category #content .entry-title a {display:table-cell;width:100%;padding:16px 16px 0;}
.category #content .entry-title .comments-link {font-size:16px;line-height:33px;float:left;}
.category #content .entry-title .comments-link a {display:inline-block;padding:16px 0 0 16px;}
.category #content .page-link {font-size:16px;display:none;}
.category #content .entry-meta {position:absolute;z-index:11;top:0;left:0;margin:0;padding:16px 0 0 16px;width:154px;float:none;border:none;}
.category #content .entry-hover-on {z-index:12;margin:0;font-size:18px;letter-spacing:-1px;line-height:22px;width:100%;}
.category #content .entry-meta .entry-title,
.category #content .entry-meta .entry-date {font-size:18px;line-height:22px;letter-spacing:-1px;text-decoration:none;border:none;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.category #content .entry-meta a {padding:0 16px 0 0;display:block;width:100%;}
.category #content .post-image-container {display:block;top:0;left:0;position:absolute;z-index:10;}
.category #content .hentry .post-image-container img {display:none;}
.category #content .entry-content {display:none;line-height:22px;padding:11px 0;margin:0;position:relative;z-index:1;left:0;width:100%;}
.category #content .entry-content p {margin:0;padding:0 16px 0;line-height:16.5px;visibility:hidden;display:none;}
.category #content .entry-content a {display:inline-block;line-height:16.5px;font-style:italic;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;height:inherit;width:inherit;}
.category #content .entry-content,
.category #content .entry-utility {position:absolute;top:0;right:0;margin:0;width:35px;z-index:16}
.category #content .edit-link a {margin-left:-8px;width:35px;}
.category #content .hoverbg {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:8;}

/* Featured Area Styles */
.category #content #featured-slider-container {margin-bottom:16px;}
.category #content #featured-slider-container .post.sticky {width:800px;height:300px;margin:0;}
.category #content #featured-slider-container .entry-date,
.category #content #featured-slider-container .entry-title {font-size:24px;letter-spacing:-1px;font-style:italic;line-height:33px;width:392px;}
.category #content #featured-slider-container .entry-title a {display: block;width: 392px;padding: 16px 16px 0;}
.category #content #featured-slider-container li img {position:absolute;top:0;left:0;padding:0;margin:0;display:none;}

/* Hide JS onload CSS */
.category #content .entry-title,
.category #content .entry-meta,
.category #content .entry-content {margin-left:-9999px;}

I believe this should do it~ :)
Photo of Barella

Barella

  • 64 Posts
  • 8 Reply Likes
Oh man... it's not working :(

don't know why, maybe i'm doing something wrong ...



Don't worrie!
I don't want you to spend hours on that ...

You were great !!

Thanks anyway :)
Photo of brownbear

brownbear

  • 1 Post
  • 0 Reply Likes
hi farisnasir!
thank you very much for thoughts! but i've the same problems as barella and i do not really have an answer on what is the next step to finalize it. are you sure your modifications are working well? i feel a bit disappointed beacause i can't help myself..
Photo of

  • 10 Posts
  • 0 Reply Likes
Hey farisnasir,
can you provide the URL of the Page you were working on?
I like to see it in action ;)

guess basically you just copied every line saying ".blog" and added ".category" to it...

Tried it on Autofocus Pro with the Portfolio layout - didnt have any effect.

this theme is so hard to modify as it is so connected to the Thematic theme.

Maybe it is easier to change to a new theme
http://wpshower.com/demo/?theme=imbal...
Photo of tjalling

tjalling

  • 8 Posts
  • 1 Reply Like
That's i nice theme you suggest.. but ill stick to autofocus, hoping the new version will take some inspiration on the theme you suggest, especially the navigation is allot better..