full-width background color for block/row

Home Forums Reykjavik full-width background color for block/row

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21224

    oakhillman
    Participant

    full-width background color for block/row

    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 →

    Oliver,

    Hope life is being kind. I’m using the block editor and would like to know if I can set the background color of a block/row to be full-width. Here’s a page using the block editor.

    https://bksdental.com/bks-doctors-staff/

    Note that there are two rows (in desktop view of course) that have a blue background. I wish I could extend the blue out to both sides of the screen. Is that possible?

    #21225

    oakhillman
    Participant

    FYI, I asked you about the same thing a year ago, but this was prior to the block editor.

    https://support.webmandesign.eu/forums/topic/full-width-sections/

    #21228

    Oliver Juhas
    Keymaster

    Hi Mark,

    I’m actually working on a theme update that will contain this feature.

    But can I ask you about the “section” block you have used? From what I know the Gutenberg plugin should already contain such block and I thought it would be included with WordPress 5.2 update, but I can’t find it anywhere… Do you use the WordPress 5.2 native “section” block and if so, could you please let me know how it is called there?

    For fast fix to your issue, here is the code you can use in your child theme‘s functions.php file. Your usecase is actually the easiest one to style, so that’s good ;)

    add_action( 'after_setup_theme', function() {
    	if ( ! current_theme_supports( 'align-wide' ) ) {
    		add_theme_support( 'align-wide' );
    		add_action( 'wp_enqueue_scripts', function() {
    			wp_add_inline_style( 'reykjavik', '
    				/* Make sure there is no horizontal scroller for Windows computers. */
    				body {
    					overflow-x: hidden;
    				}
    
    				/* Style the full aligned elements. */
    				.alignfull {
    					width: 100vw;
    					max-width: 100vw;
    					margin-left: calc(50% - 50vw);
    				}
    
    				/* Make the full aligned element content the same width as our page content. */
    				.alignfull > * {
    					max-width: 1200px;
    					margin-left: auto;
    					margin-right: auto;
    				}
    			' );
    		} );
    	}
    }, 100 );

    If you are using some blocks plugin, I can’t really guarantee the whole CSS would work. Please tweak it to your needs then.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21229

    oakhillman
    Participant

    Oliver,

    I don’t have the Gutenberg plugin installed. Just using the block editor that’s native to the latest version of WordPress.

    I’m using the Kadence Row Layout Block on the row that has the 3 videos in it.

    https://www.kadenceblocks.com/row-layout-block/

    It has what are called “Structure Settings” where I can set the “Container HTML tag.” I can also set the min height and max width for those settings. The default is “div”, but I tried the other options that includes “section” but it doesn’t do anything that I can see.

    There’s a “Columns” block native to WordPress, but that doesn’t have any settings for full-width that I can see. I don’t see any block called “Section.” Maybe I need to install the Gutenberg plugin to get the “Section” block?

    I appreciate the fast fix but I think I’ll wait until you implement it in the theme.

    Mark

    #21230

    Oliver Juhas
    Keymaster

    Hi Mark,

    I understand you don’t have Gutenberg plugin installed. What I meant to say is that in WP5.2 the block editor code should be updated to contain the Gutenberg with the section block already. It seems it was not included though as you are using block plugin to achieve this, the Kadence Blocks.

    The .alignfull styles I’ve provided should work perfectly fine, Mark. You can just omit the .alignfull > * styles from the code as from what you say the Kadence Row Layout Block will give you the option to set the inner content width.

    Please try the solution I’ve provided – it will actually stop working when the theme is updated and contains proper styles anyway.

    Also, after applying the code, don’t forget to update your sections when editing the page: apply the actual full width alignment (it should be available now as the code also enables that feature). Without applying the full width alignment your sections will not be stretched. Even on the Kadence Row Layout Block preview page you’ve linked to, they apply the full width alignment to stretch the row.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21231

    Oliver Juhas
    Keymaster

    BTW, I understand that currently you can’t see any wide/full alignment buttons in WordPress block editor. The code I’ve provided will enable those buttons so you can use the full width alignment then.

    I’ve tried to search internet for some tutorial for wide/full width alignment, but couldn’t find anything mono-thematic. But here is an example of the full width alignment button you will be able to use once you apply my code (note the darkened alignment button on top of the image block):

    (The image comes from WPBeginner article.)

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 5 days, 19 hours ago by  Oliver Juhas. Reason: Adding more info
    #21233

    oakhillman
    Participant

    Well as usual, you are amazing. I used the My Custom Functions plugin ( https://wordpress.org/plugins/my-custom-functions/ ) to add the PHP. Here’s what I added.

    add_action( 'after_setup_theme', function() {
    	if ( ! current_theme_supports( 'align-wide' ) ) {
    		add_theme_support( 'align-wide' );
    		add_action( 'wp_enqueue_scripts', function() {
    			wp_add_inline_style( 'reykjavik', '
    				/* Make sure there is no horizontal scroller for Windows computers. */
    				body {
    					overflow-x: hidden;
    				}
    
    				/* Style the full aligned elements. */
    				.alignfull {
    					width: 100vw;
    					max-width: 100vw;
    					margin-left: calc(50% - 50vw);
    				}
    
    			' );
    		} );
    	}
    }, 100 );

    And as you said it would, the little button for making the Kadence Row Layout Block full-width appeared. I did a little rearranging to the page, but you’ll see that I have 2 full-width sections on the page now…yay!

    I’ll be doing a donation as usual. Thank you Oliver and I look forward to the theme update that will make this native.

    Mark

    #21234

    Oliver Juhas
    Keymaster

    Hi Mark,

    Very cool! Glad it worked. And thank you very much for your donation! :)

    (I’m a bit disappointed that WordPress still does not contain the section block though… We’ll have to wait some more.)

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.