Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m clueless.

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

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.
6 people have
this question
+1
Reply
  • I’m excited
    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 !!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m confused
    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 ?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m still clueless.
    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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 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..
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m finally relieved.
    1
    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. :)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m unsure
    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 ?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m confused
    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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m frustrated
    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 :)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 1
    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~ :)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m really thankful
    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 :)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m frustrated
    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..
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m confused
    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...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 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..
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited