Category posts page CSS

[Wirebird]

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 based in Bend, Oregon

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

[marybaum]

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

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Wirebird]

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 based in Bend, Oregon

[Author]

Posts