Community Forums › Forums › Archived Forums › Design Tips and Tricks › Modern Portfolio Pro, add portfolio template
Tagged: Modern Portfolio Pro
- This topic has 2 replies, 3 voices, and was last updated 9 years, 9 months ago by Brad Dalton.
-
AuthorPosts
-
July 8, 2014 at 10:55 pm #113527ginagMember
hi all,
I am new to genesis and am using Modern Portfolio child theme to display my graphic design work.
I am wanting a portfolio page which displays identically to the home page portfolio area.
I have managed to set up a page template using Genesis extender and the code listed below, but unfortunately there is a small black line displaying underneath the featured image(s)...??
http://www.graphicsbygina.com/category/portfolio/
I'm hoping someone can tell me what I've done wrong...and how to remedy 🙂
With thanks, gina<?php
// Change posts per page in the portfolio category
add_action( 'pre_get_posts', 'mp_portfolio_cat_posts_per_page' );
function mp_portfolio_cat_posts_per_page( $query ) {
if( $query->is_main_query() && is_category( 'portfolio' ) && ! is_admin() ) {
$query->set( 'posts_per_page', '12' );
}
}<?php
/**
* The custom template for the Portfolio category for Modern Portfolio Pro
*///* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );//* Remove the entry meta in the entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );//* Remove the entry content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );//* Remove the entry image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );//* Add the featured image before post title
add_action( 'genesis_entry_header', 'minimum_portfolio_grid', 8 );
function minimum_portfolio_grid() {if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
printf( '<div class="portfolio-image"></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
}//* Remove the entry meta in the entry footer
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );//* Run the Genesis loop
genesis();/* Add these styles to Modern Portfolio Pro for the category Design template */
/* Category Design Entries
--------------------------------------------- *//* Adds the opacity and hover feature to images */
.category-portfolio img {
margin-bottom: 16px;
margin-bottom: 1.6rem;
opacity: 0.8;
}.category-portfolio img:hover {
opacity: 1;
}/* Adds the grid column width the same as the home page */
.category-portfolio .entry {
float: left;
margin-right: 5.263157894737%; /* 60px / 1140px */
width: 29.824561403509%; /* 340px / 1140px */
}/* Removes the right margin on the 3rd, 6th, 9th, etc. posts */
.category-portfolio .entry:nth-of-type(3n+3) {
margin-right: 0;
}/* Clears the float to start a new row for the 4th, 7th, etc. posts */
.category-portfolio .entry:nth-of-type(3n+1) {
clear: left;
}/* Smaller title size */
.category-portfolio .entry-title {
font-size: 18px;
}
@media only screen and (max-width: 600px) {
/* Category Portfolio Entries
--------------------------------------- *//* Centers the posts or entries */
.category-portfolio .entry {
text-align: center;
}/* Removes the three across grid */
.category-portfolio .entry,
.category-portfolio .entry:nth-of-type(3n+3) {
float: none;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
max-width: 340px;
width: 100%;
}}
http://www.graphicsbygina.comJuly 8, 2014 at 11:36 pm #113530Matt MizwickiMemberHi ginag,
The little line is showing up because of your entry-meta css. Remove theborder-top: 1px solid #222;
on line #1349 of your style.css file. That should fix it..entry-footer .entry-meta::before { border-top: 1px solid #222; content: ""; display: block; padding-bottom: 32px; padding-bottom: 3.2rem; width: 10%; }
July 9, 2014 at 4:54 am #113540Brad DaltonParticipantThe easiest way to do this is to use the code from the Executive Pro theme.
Here's a tutorial on the subject. http://wpsites.net/web-design/add-portfolio-page-to-modern-portfolio-pro-theme/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.