• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Remove Sidebar on Single Page

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove Sidebar on Single Page

This topic is: not resolved

Tagged: Maker Pro, page id, Portfolio Page ID

  • This topic has 22 replies, 2 voices, and was last updated 6 years, 8 months ago by Doug Edgington.
Viewing 20 posts - 1 through 20 (of 23 total)
1 2 →
  • Author
    Posts
  • September 4, 2016 at 11:04 am #192584
    Tree78
    Participant

    Trying to remove the sidebar on a single page only. Problem is I cannot find the page id of this url...

    https://eleventreemedia.com/portfolio/

    It is a generated portfolio page and it isn't listed in the pages section of the site.

    Can anyone tell me what that page id is or how to find it? Thank you

    September 4, 2016 at 12:07 pm #192585
    Doug Edgington
    Member

    There is no page id associated with it, since it is a portfolio post type archive. You can change the page layout via Portfolio-->Archive settings.
    Are you trying to single something out using CSS? If so, you can use .post-type-archive-portfolio rather than the page id.


    Doug Edgington
    http://www.dougedgington.com

    September 4, 2016 at 9:29 pm #192600
    Tree78
    Participant

    Hey Doug,

    Thanks for the message. I have done some page editing because I want to try and stick with the filterable portfolio I built. I got it to lay out a little better.

    I was wondering if you could tell me what I would need to add and/or subtract from either the .php code or the .css code to get the text that overlays the images to be smaller? And also maybe take away any intro text that may show. I have been having some image sizing and centering issue, but I am close. Trying to get the text sizing and placement fixed. Here is the code below:

    /* # Filterable portfolio
    ---------------------------------------------------------------------------------------------------- */
    
    .post-type-archive-portfolio .site-inner > .wrap {
    	max-width: 100%;
    	padding: 0;
    }
    
    ul.filter {
        color: #999;
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    ul.filter li {
        float: left;
    }
    ul.filter li:first-child {
      margin-left: 0;
    }
    
    ul.filter a {
        color: #555;
        display: block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        border-bottom: none;
        font-size: 1.5rem;
        font-weight: 300;
        border-top: 4px solid #fff;
    }
    
    ul.filter a:hover, ul.filter a.active {
        border-top: 4px solid #3d91f0;
    }
    
    .filterable-portfolio {
        margin-left: -2rem;
        margin-left: -20px;
    }
    
    .portfolio-item {
        float: left;
        margin-bottom: 2rem;
        margin-bottom: 40px;
        margin-left: 2rem;
        margin-left: 40px;
        position: relative;
        width: 29%; 
    }
    
    .portfolio-item a img {
        display: block;
        margin-bottom: 0;
    }
    
    .portfolio-overlay {
        color: #fff;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        padding: 30px;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    
    .portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover {
        opacity: 1;
    }
    
    .portfolio-overlay h4 {
        font-weight: bold;
        margin: 0;
        width: 100%;
        padding: 5px 7px;
        text-transform: uppercase;
        color: #fff;
    }
    
    .clearfix{
        clear: both;
    }
    
    /*-----------------------------------------------------------------------------------*
    /* = Isotope CSS Animations
    /*-----------------------------------------------------------------------------------*/
    .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
    .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
    .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
    
    .filterable-portfolio-page .content .entry-header {
        margin-bottom: 1rem;
        margin-bottom: 10px;
    }
    
    .filterable-portfolio-page .content .entry-title {
        margin-bottom: 3rem;
        margin-bottom: 30px;
    }
    
    @media only screen and (max-width: 1179px) {
        .portfolio-item {
            width: 22%;
        }
    }
    
    @media only screen and (max-width: 1023px) {
        .portfolio-item {
            width: 30%;
        }
    }
    @media only screen and (max-width: 500px) {
        .portfolio-item {
            width: 100%;
        }
    }

    and...

    //* Add Archive Settings option to Portolio CPT
    add_post_type_support( 'portfolio', 'genesis-cpt-archives-settings' );
    
    //* Define custom image size for Portfolio images in Portfolio archive
    add_image_size( 'portfolio-image', 330, 230, true );
    September 5, 2016 at 5:20 am #192608
    Doug Edgington
    Member

    Did you create your own portfolio post type, or are you using some type of plugin?

    For my personal website, I created a portfolio custom post type. Then I control the output by creating a custom portfolio archive template ( archive-portfolio.php ).


    Doug Edgington
    http://www.dougedgington.com

    September 5, 2016 at 8:59 am #192631
    Doug Edgington
    Member

    I got your reply via email, but it is not showing up here in the forum. Maybe it got flagged?

    I looked at the updated version of your portfolio. And you are retrieving the full-size image rather than a cropped thumbnail. This is likely why your images don't all match.


    Doug Edgington
    http://www.dougedgington.com

    September 5, 2016 at 9:08 am #192633
    Doug Edgington
    Member

    In order to reduce the size of the overlay related text, you can single it out within your css declarations. Below is an example.

    .portfolio-overlay h3 {
          font-size: 25px;
          line-height: 1.2;
          margin-bottom: 5px;
    }
    
    .archive-description .portfolio-overlay p {
          font-size: 14px;
          line-height: 1.2;
          margin-bottom: 0px;
    }

    Doug Edgington
    http://www.dougedgington.com

    September 6, 2016 at 8:52 am #192689
    Tree78
    Participant

    Doug,

    That worked perfectly. I have two more questions and I should be good. I appreciate the help man.

    1. You say I am retrieving the full-size image rather than a cropped thumbnail. How do I change or fix that?
    2. What code do I need to add to make sure that the portfolio page looks correct on mobile? Or will that be fixed once I retrieve the correct thumbnail?

    Thanks again man, I appreciate the help.

    September 6, 2016 at 10:18 am #192698
    Doug Edgington
    Member

    I haven't really experimented with the Genesis Portfolio Plugin. But it appears to add an image size automatically. And it should automatically output that image size on the portfolio archive page. But if you uploaded the images after the image size was in place, they would not be cropped. This could cause the full size image to be referenced. Or did you possibly create your own portfolio template? If so, you may not be calling the appropriate image size.


    Doug Edgington
    http://www.dougedgington.com

    September 6, 2016 at 10:21 am #192700
    Tree78
    Participant

    Yeah, I am not using the Genesis Portfolio Pro Plugin. I created my own archive-portfolio.php. I will try to re upload now and see if that helps. What would I need to change to call the right image?

    September 6, 2016 at 10:26 am #192703
    Tree78
    Participant

    Yeah, the upload isn't the issue. I am calling the wrong image I think.

    September 6, 2016 at 11:13 am #192705
    Doug Edgington
    Member

    Do you have a StudioPress Pro Plus theme package? If so, look at the portfolio template for the Executive Pro theme. This will give you an idea of how to call a specific image size.


    Doug Edgington
    http://www.dougedgington.com

    September 6, 2016 at 11:33 am #192706
    Tree78
    Participant

    I do and okay great, will do. Thanks man.

    September 6, 2016 at 1:01 pm #192707
    Doug Edgington
    Member

    No problem. When viewing the theme portfolio template, look at the genesis_get_image function. In your case, you are going to want to call portfolio-image, since this is the image size that you declared.

    What specific issue was you having with the site in responsive mode?


    Doug Edgington
    http://www.dougedgington.com

    September 6, 2016 at 2:04 pm #192627
    Tree78
    Participant

    Hey Doug,

    What I did was I used a plugin called "portfolio post type." Then I created my own archive-portfolio.php. I used this tutorial:

    Everything came out fine. The filtering worked great. But the image sizing, spacing, text... everything was wrong. The Maker Pro theme has a pre built portfolio layout using Genesis Portfolio Pro... but it isn't filterable. So what I did was I deleted all the pre set portfolio code in the theme thinking that was conflicting and entered all the code I gave in my last response. That helped with layout some, but still having some image size, text and layout issues. What you see on the portfolio page now is where I am currently at:

    Even now though it seems a bit off and isn't showing correctly on mobile. I am about to just use a plugin but I would really like to get this to work. I know it is only a couple things I am missing....

    September 7, 2016 at 7:09 am #192741
    Doug Edgington
    Member

    You can paste a snippet of your archive-portfolio.php in here and I can take a look. Is the filter functionality something that is also added to the archive-portfolio.php, or are you using a plugin?


    Doug Edgington
    http://www.dougedgington.com

    September 8, 2016 at 6:36 am #192819
    Tree78
    Participant
    This reply has been marked as private.
    September 10, 2016 at 12:01 pm #192955
    Tree78
    Participant

    Hey Doug. Every time I think I am set with this something else happens, lol. My portfolio page and filtering page is only showing 9 posts and all the other live posts are hidden. What am I missing in the code below to get this to work so that everything that I publish shows? I have pasted all my php and css code below. Thanks man.

    <?php
    /**
     * Portfolio Archive
     * Author: James Roberts
     *
     */
    
    // Force full width content (optional)
    add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
    //remove standard loop (optional)
    remove_action( 'genesis_loop', 'genesis_do_loop' );
    // Add our custom loop
    add_action( 'genesis_loop', 'lp_filterable_portfolio' );
    
    // Enqueue javascript
    wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'), '1.5.25', true);
    wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotopes_init.js', array('isotope'), '', true);
    
    /**
    * Get Excerpt.
    *
    * @since 1.0
    *
    */
    function the_excerpt_max_charlength($charlength) {
    	$excerpt = get_the_excerpt();
    	$charlength++;
    
    	if ( mb_strlen( $excerpt ) > $charlength ) {
    		$subex = mb_substr( $excerpt, 0, $charlength - 5 );
    		$exwords = explode( ' ', $subex );
    		$excut = - ( mb_strlen( $exwords[ count( $exwords ) - 1 ] ) );
    		if ( $excut < 0 ) {
    			echo mb_substr( $subex, 0, $excut );
    		} else {
    			echo $subex;
    		}
    		echo '[...]';
    	} else {
    		echo $excerpt;
    	}
    }
    
    /**
    * Output filterable portfolio items.
    *
    * @since 1.0
    *
    */
    function lp_filterable_portfolio( ){
        
        $args = array(
                'post_per_page' => 9999
        );
        $loop = new WP_Query( $args );
        $terms = get_terms( 'portfolio_category' );
        $count=0;
        ?>
    
    <div class="archive-description">
            <?php if( $terms ) { ?>
                <ul id="portfolio-cats" class="filter clearfix">
                    <li><a href="#" class="active" data-filter="*"><span><?php _e('All', 'lp'); ?></span></a></li>
                    <?php
                        foreach( $terms as $term ){
                            echo "<li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li>";
                        }
                    ?>
                </ul><!-- /portfolio-cats --><br/><br/>
            <?php } ?>
    
             <?php if( have_posts() ) { ?>
                <div id="portfolio-wrap" class="clearfix filterable-portfolio">
                    <div class="portfolio-content">
                        <?php while( have_posts() ): the_post(); ?>
                            <?php $count++; ?>
                            <?php $terms = get_the_terms( get_the_ID(), 'portfolio_category' ); ?>
                            <?php if ( has_post_thumbnail($post->ID) ) { ?>
                                <article class="portfolio-item col-<?php echo $count; ?> <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .' '; }; ?>">
                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo genesis_get_image( array( size => 'lp-portfolio' ) ); ?>
                                    <div class="portfolio-overlay">
                                        <h3><?php the_title(); ?></h3>
                                        <p><?php the_excerpt_max_charlength(50);?></p>
                                    </div><!-- overlay --></a>
                                </article>
                            <?php } ?>
                        <?php endwhile; ?>
                    </div><!-- /themes-content -->
                </div><!-- /themes-wrap -->
            <?php } ?>
            <?php wp_reset_postdata(); ?>
    </div>
    
    <?php
    
        wp_reset_postdata();
        
    }
    
    genesis();
    
    /* # Filterable portfolio
    ---------------------------------------------------------------------------------------------------- */
    
    .post-type-archive-portfolio .site-inner > .wrap {
    	max-width: 100%;
    	padding: 0;
    }
    
    ul.filter {
        color: #999;
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    ul.filter li {
        float: left;
    }
    ul.filter li:first-child {
      margin-left: 0;
    }
    
    ul.filter a {
        color: #555;
        display: block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        border-bottom: none;
        font-size: 1.5rem;
        font-weight: 300;
        border-top: 4px solid #fff;
    }
    
    ul.filter a:hover, ul.filter a.active {
        border-top: 4px solid #006633;
    }
    
    .filterable-portfolio {
        margin-left: -2rem;
        margin-left: -20px;
    }
    
    .portfolio-item {
        float: left;
        margin-bottom: 2rem;
        margin-bottom: 40px;
        margin-left: 2rem;
        margin-left: 40px;
        position: relative;
        width: 29%; 
    }
    
    .portfolio-item a img {
        display: block;
        margin-bottom: 0;
    }
    
    .portfolio-overlay {
        color: #fff;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        padding: 30px;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    
    .portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover {
        opacity: 1;
    }
    
    .portfolio-overlay h4 {
        font-weight: bold;
        margin: 0;
        width: 100%;
        padding: 5px 7px;
        text-transform: uppercase;
        color: #fff;
    }
    
    .clearfix{
        clear: both;
    }
    
    .portfolio-overlay h3 {
         font-size: 25px;
         line-height: 1.2;
         margin-bottom: 5px;
    }
    
    .archive-description .portfolio-overlay p {
         font-size: 14px;
         line-height: 1.2;
         margin-bottom: 0px;
    }
    
    /*-----------------------------------------------------------------------------------*
    /* = Isotope CSS Animations
    /*-----------------------------------------------------------------------------------*/
    .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
    .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
    .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
    
    .filterable-portfolio-page .content .entry-header {
        margin-bottom: 1rem;
        margin-bottom: 10px;
    }
    
    .filterable-portfolio-page .content .entry-title {
        margin-bottom: 3rem;
        margin-bottom: 30px;
    }
    
    @media only screen and (max-width: 1179px) {
        .portfolio-item {
            width: 22%;
        }
    }
    
    @media only screen and (max-width: 1023px) {
        .portfolio-item {
            width: 30%;
        }
    }
    @media only screen and (max-width: 500px) {
        .portfolio-item {
            width: 100%;
        }
    }
    
    September 15, 2016 at 9:07 am #193194
    Tree78
    Participant

    Anything Doug?

    September 15, 2016 at 11:09 am #193208
    Doug Edgington
    Member

    Sorry, I didn't know you replied until now. In a previous post you mentioned that you declared the following mage size:

    add_image_size( 'portfolio-image', 330, 230, true );

    But in looking at your portfolio template, within genesis_get_image() you are calling the lp-portfolio image size. If this image size does not exist, I think it will default to the full-size image. I didn't look through all of the code. I was only looking for the image size that you are calling. The portfolio-image is the one you should be calling. As long as you added the add_image_size declaration before you uploaded images, that image size should exist. Otherwise you would have to regenerate the thumbnails.


    Doug Edgington
    http://www.dougedgington.com

    September 15, 2016 at 11:11 am #193209
    Doug Edgington
    Member

    By the way, one of your replies is marked as private for some reason. Not sure if it was something that was intended for me.

    Last time we talked you were having image size problems. That is what I addressed in my previous reply.


    Doug Edgington
    http://www.dougedgington.com

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 23 total)
1 2 →
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble