full-width page template for modern

Home Forums Modern full-width page template for modern

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #21416

    raghava
    Participant

    full-width page template for modern

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hello,
    I just got started working on modern theme & till now I love what it has to offer. I would like to know how to create a full-width page template & is this theme Gutenberg ready? I tried checking tutorials online about full width templates butt there is lot of confusion. I tried & failed a lot of times. A small nudge in the right direction will help me.

    I am also blind [screen reader user] & I must say that your theme kills in terms of accessibility. Please keep-up the great work.

    #21418

    Oliver Juhas
    Keymaster

    Hi raghava,

    Thank you, I’m glad you like the theme and I’m glad it works as expected for you :)

    What do you mean by “Gutenberg ready”? The theme should work perfectly fine with Gutenberg block editor. I experience no issues at all.

    If you mean the support for wide and full alignment in Gutenberg block editor, then this theme does not contain such feature yet.

    I’m not really sure what you mean by full width page template. The theme content container is boxed, it can not stretch the full width of the browser window. But if you only mean to stretch some content elements to the edges of the content container, this is currently possible when using a page builder.

    I understand using a page builder might not be an option for you, so, here is how you enable Gutenberg wide/full alignment via a child theme functions.php file:

    function child_theme_setup() {
    	add_theme_support( 'align-wide' );
    }
    add_action( 'after_setup_theme', 'child_theme_setup', 100 );
    
    function child_theme_align_wide_styles() {
    	wp_add_inline_style(
    		'modern',
    		'
    		.is-singular.no-widgets-sidebar .site-main .entry-content-container {
    			max-width: 100%;
    			padding-left: 1.62rem;
    			padding-right: 1.62rem;
    		}
    
    		.alignwide,
    		.alignfull {
    			margin-left: -1.62rem;
    			margin-right: -1.62rem;
    		}
    
    		@media (min-width: 880px) {
    			.is-singular.no-widgets-sidebar .site-main .entry-content-container {
    				max-width: 80%;
    				padding-left: 0;
    				padding-right: 0;
    			}
    
    			.alignwide,
    			.alignfull {
    				margin-left: -12.5%;
    				margin-right: -12.5%;
    			}
    		}
    
    		@media (min-width: 1024px) {
    			.is-singular.no-widgets-sidebar .site-main .entry-content-container {
    				max-width: 62%;
    			}
    
    			.alignwide {
    				margin-left: -15%;
    				margin-right: -15%;
    			}
    
    			.alignfull {
    				margin-left: -30.78%;
    				margin-right: -30.78%;
    			}
    		}
    
    		@media (min-width: 1280px) {
    			.is-singular.no-widgets-sidebar .site-main .entry-content-container {
    				max-width: 50%;
    			}
    
    			.alignwide {
    				margin-left: -25%;
    				margin-right: -25%;
    			}
    
    			.alignfull {
    				margin-left: -50%;
    				margin-right: -50%;
    			}
    		}
    
    		.alignwide:not(:last-child),
    		.alignfull:not(:last-child) {
    			margin-bottom: 1.62em;
    		}
    		'
    	);
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_align_wide_styles' );

    Tip: You can download a sample child theme from my GitHub repository (check the instructions for how to set it up).

    Best regards,

    Oliver Juhas
    WebMan Design

    #21419

    raghava
    Participant

    Hello Oliver,
    Sorry to confuse you. I read that normally themes need to add some code for Gutenberg posts to appear properly… That’s the reason I asked.

    When I say full-width template I mean where the content stretches. At least that’s what my sighted friends tell me. I tried following this tutorial
    https://www.wpbeginner.com/wp-themes/how-to-create-a-full-width-page-in-wordpress/

    But it kind of confused me with all the templates in modern theme.

    I hope now I am clear. We have front page, default & sidebar templates. I want a template for full-width & want to apply the necessary styles where the content stretches…

    Does the code you provided does this? If yes then I will straight away implement it.

    #21423

    Oliver Juhas
    Keymaster

    Hi raghava,

    To explain, Gutenberg editor works with every theme out of the box, there should be no need to add any code. It only has some advanced features that doesn’t have to be supported by all themes. These features has to be then enabled using additional code in the theme.
    The code I’ve provided only enables such support for Gutenberg editor’s wide and full alignment, which will allow you to create such elements within a page content.

    But if I understand correctly now, you need the actual content elements of the page to stretch the full width of the content container. By default the content container in Modern theme is 1200px wide and the actual content elements are held within a 680px (approx) inner container. This is specifically designed to increase readability of a page content and to make a line of text max 70 characters wide.

    I understand that most themes have this text (the content elements) stretched the full width of the content container, and that’s probably what your friends mean.

    To stretch the content elements full width of content container, please use this custom CSS code instead of what I’ve provided in my previous reply:

    .entry-content-container {
    	max-width: none;
    }

    However, like I’ve mentioned, I think this will harm readability of the pages, so please approach with caution. Maybe try test the readability with your friends now and after applying the code to see which one is better ;)

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.