Home › Forums › Support › 100% high section-1 + center content vertically + comment form in section-2?
- This topic has 11 replies, 2 voices, and was last updated 7 years, 5 months ago by Tom.
-
AuthorPosts
-
November 24, 2016 at 7:18 am #247277Sebastian
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
SebastianNovember 24, 2016 at 11:36 am #247353TomLead DeveloperLead DeveloperHi 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.
November 24, 2016 at 11:39 am #247355Sebastian1. 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; }
November 24, 2016 at 11:50 am #247360TomLead DeveloperLead Developer1. 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
November 24, 2016 at 11:53 am #247364Sebastian1. OK, great, thank you.
3. The shortcode works great, but the comments are not displayed. Do I have a bug in the code?
November 24, 2016 at 11:56 am #247365TomLead DeveloperLead DeveloperI 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.
November 24, 2016 at 12:09 pm #247371SebastianThanks 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 );
November 24, 2016 at 12:10 pm #247373TomLead DeveloperLead DeveloperAwesome π
November 24, 2016 at 12:52 pm #247395SebastianYour 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?
November 24, 2016 at 9:52 pm #247449TomLead DeveloperLead DeveloperBy 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 π
November 24, 2016 at 9:57 pm #247453SebastianAh, now I understand. Thank you very much π
November 24, 2016 at 10:00 pm #247454TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.