[Resolved] 100% high section-1 + center content vertically + comment form in section-2?

Home Forums Support [Resolved] 100% high section-1 + center content vertically + comment form in section-2?

Home Forums Support 100% high section-1 + center content vertically + comment form in section-2?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #247277
    Sebastian

    Hi Tom, I would like to change a few things in my Blog-Posts. I hope you can help me.

    1. How i can set section-1 100% high?

    2. How i can center the content of section-1 vertically?

    3. How i can add comment-form and comment-content to section-2

    Regards
    Sebastian

    #247353
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. You can add a class to the section and apply 100vh:

    .your-class {
    	height: 100vh;
    }

    2. Not easily – you would either need to use Flexbox CSS or javascript. Maybe you should use the Page Header for section-1? It has the full height and vertical center built in.

    3. Not possible I don’t think unless you can find a plugin which adds the comments inside a shortcode.

    #247355
    Sebastian

    1. and 2.
    I have tried something and it works. Is this a good solution?

    #generate-section-1 {
        min-height: 100vh;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    3.
    I found a shortcode for comment-form. But shortcode for comment-content I did not find. How do I create it?

    add_shortcode( 'sk_comment_form', 'sk_comment_form_shortcode' );
    function sk_comment_form_shortcode() {
        ob_start();
        comment_form();
        $cform = ob_get_contents();
        ob_end_clean();
        return $cform;
     }
    #247360
    Tom
    Lead Developer
    Lead Developer

    1. Absolutely! Flexbox is cool, but won’t work in old versions of IE.

    3. I’m not sure it’s possible, the actual comments use an entire template file (comments.php) as opposed to just a simple function like comment_form().

    Something like this might work, but I’m not sure: http://stackoverflow.com/questions/28593898/how-to-display-the-comments-template-with-a-shortcode-in-wordpress

    #247364
    Sebastian

    1. OK, great, thank you.

    3. The shortcode works great, but the comments are not displayed. Do I have a bug in the code?

    #247365
    Tom
    Lead Developer
    Lead Developer

    I would have to see the code, but this one looks most promising: http://stackoverflow.com/a/28594128/2391422

    It would require you to include the ID of the post you’re trying to fetch comments from.

    #247371
    Sebastian

    Thanks Tom. I found there the perfect shortcode. With this everything works great.

     /**
      * Shortcode Comment Form & Comment List - [wpse_comments_template]
      */
    
    add_shortcode( 'wpse_comments_template', function( $atts = array(), $content = '' )
    {
        if( is_singular() && post_type_supports( get_post_type(), 'comments' ) )
        {
            ob_start();
            comments_template();
            print(  '<style>#comments-title { display: none; }</style>' );
            return ob_get_clean();
        }
        return '';
    }, 10, 2 ); 
    #247373
    Tom
    Lead Developer
    Lead Developer
    #247395
    Sebastian

    Your solution with page header is great. But I do not understand a thing.

    When I create a page with “Sections” and I add content to the “Page Header”, with the settings “Fullscreen” + “Vertical center content”, everything works great.

    But when I create a post with the same settings, I must additionally select “Merge with site header” otherwise nothing is displayed.

    Is there a bug in GP Premium, or am I doing something wrong?

    #247449
    Tom
    Lead Developer
    Lead Developer

    By default, the single post page header displays within the content area (next to the sidebar). This makes it so many of the full screen etc.. options don’t apply.

    You can adjust this in “Customize > Layout > Page Header > Single Post Page Header”.

    Hope this helps πŸ™‚

    #247453
    Sebastian

    Ah, now I understand. Thank you very much πŸ™‚

    #247454
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.