Category posts page CSS

Community Forums Forums Design Tips and Tricks Category posts page CSS

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  sssv 1 year, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #35835

    sssv
    Participant
    Post count: 19

    I’m wondering if there is an easy way to modify the Crystal theme so that a page of category posts only shows the post thumbnail (portfolio-thumbnail preferably) and the title of the posts?  I’ve used this function a lot with other themes but this one doesn’t seem to work.

    Right now my individual portfolio pages are too long to scroll with the full-size images and some of the images distort.  http://lisaholley.com/studio/category/portfolio/namesake/  (her ancient site sits at the root while we’re building this one)

    I’m sure this needs to be done via CSS but since I updated my browsers recently, Firebug stopped working properly and reinstalling it didn’t restore the functionality.  I thought someone here might take mercy on me and show me the easiest way.

    I am looking at CSS line 586
    #content .post {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 2px solid #DBDEE4;
    }
    Would that be the right one to change?  Thanks!


    Sara @ wirebird media – WordPress and Genesis web developer

    http://lisaholley.com/studio/category/portfolio/namesake/
    #35852

    marybaum
    Participant
    Post count: 127

    I have practically made a habit of taking the portfolio page from Balance and adding it to any theme I want – and renaming it as well. Example: http://frontenactennis.com/pros/

    Here’s how: Copy page_portfolio.php from Balance to your theme. As well, copy this function to your theme’s functions.php file:

    genesis_register_sidebar( array(
    ‘id’ => ‘portfolio’,
    ‘name’ => __( ‘portfolio’, ‘balance’ ),
    ‘description’ => __( ‘This is the portfolio page.’, ‘balance’ ),
    ) );

    Also copy the relevant CSS to your stylesheet.

    In that function, in page_portfolio.php and in the stylesheet, change every reference to ‘portfolio’ to whatever you want to call it – if in fact you want to rename it. On the tennis site, I renamed everything to ‘pros’. Also, I renamed page_portfolio.php to page_pros.php.

    So my function, above, wound up being

    genesis_register_sidebar( array(
    ‘id’ => ‘pros’,
    ‘name’ => __( ‘pros’, ‘minimumFRC’ ),
    ‘description’ => __( ‘This is the pros page.’, ‘minimumFRC’ ),
    ) );

    I was using the Minimum theme.

    Here’s the CSS to copy over:

    /* portfolio
    ———————————————————— */

    .page-template-page_portfolio-php .featuredpage img,
    .page-template-page_pros-portfolio .featuredpost img {
    margin: 0 0 10px;
    box-shadow: 3px 3px 3px rgba(153,153,153,0.6);
    }

    .page-template-page_portfolio-php .featuredpage a img,
    .page-template-page_portfolio-portfolio .featuredpost a img {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    }

    .page-template-page_portfolio-php .featuredpage a:hover img,
    .page-template-page_portfolio-php .featuredpost a:hover img {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    }

    .page-template-page_portfolio-php .featuredpage .page,
    .page-template-page_pros-portfolio .featuredpost .post {
    float: left;
    height: 215px;
    margin: 0 10px;
    padding: 0 0 10px;
    overflow: hidden;
    width: 130px;
    }

    .page-template-page_portfolio-php .featuredpage .page h2 a,
    .page-template-page_portfolio-php .featuredpost .post h2 a {
    color: #06c;
    font-size: 14px !important;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.25;
    margin: 5px 0;
    text-transform: uppercase;
    }

    Here’s the CSS I wound up with:

    /* pros
    ———————————————————— */

    .page-template-page_pros-php .featuredpage img,
    .page-template-page_pros-php .featuredpost img {
    margin: 0 0 10px;
    box-shadow: 3px 3px 3px rgba(153,153,153,0.6);
    }

    .page-template-page_pros-php .featuredpage a img,
    .page-template-page_pros-php .featuredpost a img {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    }

    .page-template-page_pros-php .featuredpage a:hover img,
    .page-template-page_pros-php .featuredpost a:hover img {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    }

    .page-template-page_pros-php .featuredpage .page,
    .page-template-page_pros-php .featuredpost .post {
    float: left;
    height: 215px;
    margin: 0 10px;
    padding: 0 0 10px;
    overflow: hidden;
    width: 130px;
    }

    .page-template-page_pros-php .featuredpage .page h2 a,
    .page-template-page_pros-php .featuredpost .post h2 a {
    color: #06c;
    font-size: 14px !important;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.25;
    margin: 5px 0;
    text-transform: uppercase;
    }

    Hope that helps!

    I use it a lot.

    MB


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #36144

    sssv
    Participant
    Post count: 19

    Mary, thank you for the detailed instructions!  I’d seen your earlier post about this work around and will probably give it a shot.  I might not get to it until tomorrow though.  Wish me luck!  Thanks!


    Sara @ wirebird media – WordPress and Genesis web developer

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.