Make Storefront Pages Truly Full Width

magnusm
(@magnusm)

9 years, 5 months ago

Hi!

I’m having some trouble making the storefront theme full width. If I use .col-full{max-width: 100%} in custom CSS it almost works, but there’s still some padding. So, how can I make it truly full width?
Would love help with some code for a page template (have a child theme), custom code for style.css or custom CSS in WP. I am also using the latest version of woocommerce, and I want all pages full width.

I have tried using a full width page template but then all the content disappeared.

Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)

LogoLogics
(@logologics)

9 years, 5 months ago
Hi,

I have got this code from James Koster in this topic:
https://wordpress.org/support/topic/how-to-expand-standard-width-storefront/

You need to add this code in your child themes style.css:
```
.site-content .col-full {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}
```
That worked for me, however this does not leave some nice padding to the left and right of text and content, and in the cart page, the “add to cart” is a bit out of place, but it does make it full width. If you set the full width to less then 1920 that creates margins to text, but if you need a full width image, you do not want that padding.

I use a pagebuilder like SiteOrigin Pagebuilder or Visual composer and set the row to full width.
That overwrites the standard Storefront width. Just not in the product pages, because they are auto created by Woocommerce.

Hope this helps!
Annie
Thread Starter magnusm
(@magnusm)

9 years, 5 months ago

Ok so that worked, ish. It makes all pages full width as I asked for but I would rather have a page template doing this so that I can choose which pages are full width and which are not.

Anyone?

danbaruch
(@danbaruch)

9 years, 5 months ago

Install this plugin: https://wordpress.org/plugins/custom-post-template/

Add this css (the titles need to be cleaned up):
/*Full Width Builder Post */

/*Removes Title */
.post-template-template-fullwidth-builder-post-php .hentry .entry-header {
display: none;
}
/*Removes Author Name etc*/
.post-template-template-fullwidth-builder-post-php .hentry.type-post .entry-meta {
display: none;
}
/*Content Full Width */
.post-template-template-fullwidth-builder-post-php .hentry.type-post .entry-content {
width: 100%;
float: right;
margin-right: 0;
}

/*Content Zero Padding */
.post-template-template-fullwidth-builder-post-php .hentry.type-post .site-content {
outline: 0;
padding-top: 0;
}
/*Removes JetPack Related Posts */
.post-template-template-fullwidth-builder-post-php #jp-relatedposts {
padding: 30px;
}
/*Content Zero Padding */
.post-template-template-fullwidth-builder-post-php .site-content {
outline: 0;
padding-top: 0;
}
/*Full Width */
.db-col-full {
max-width: 100% !important;
margin: 0;
padding: 0;
}
/*Full Width */
.db-full {
width: 100% !important;
padding: 0;
margin: 0;
}
/*Full Width */
.db-main {
width: 100% !important;
padding: 0;
margin: 0;
}

Create a new file: template-fullwidth-builder-post.php
Add the file to your child theme

<?php
/**
* The template for displaying posts.
*
* Template Name Posts: Full Width Post Builder
*
* @package storefront
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no”>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<?php
do_action( ‘storefront_before_header’ ); ?>

<header id=”masthead” class=”site-header” role=”banner” style=”<?php storefront_header_styles(); ?>”>
<div class=”col-full”>

<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_skip_links – 0
* @hooked storefront_social_icons – 10
* @hooked storefront_site_branding – 20
* @hooked storefront_secondary_navigation – 30
* @hooked storefront_product_search – 40
* @hooked storefront_primary_navigation_wrapper – 42
* @hooked storefront_primary_navigation – 50
* @hooked storefront_header_cart – 60
* @hooked storefront_primary_navigation_wrapper_close – 68
*/
do_action( ‘storefront_header’ ); ?>

</div>
</header><!– #masthead –>

<?php
/**
* Functions hooked in to storefront_before_content
*
* @hooked storefront_header_widget_region – 10
*/
do_action( ‘storefront_before_content’ ); ?>

<div id=”content” class=”site-content” tabindex=”-1″>
<div class=”db-col-full”>

<?php
/**
* Functions hooked in to storefront_content_top
*
* @hooked woocommerce_breadcrumb – 10
*/
do_action( ‘storefront_content_top’ );?>

<div id=”primary” class=”content-area db-full”>
<main id=”main” class=”site-main db-main” role=”main”>

<?php while ( have_posts() ) : the_post();

do_action( ‘storefront_single_post_before’ );

get_template_part( ‘content’, ‘single’ );

do_action( ‘storefront_single_post_after’ );

endwhile; // End of the loop. ?>

</main><!– #main –>
</div><!– #primary –>

<?php
get_footer();

this should give you a start
danbaruch
(@danbaruch)

9 years, 5 months ago
This is the file for the page layout. I assumed you wanted post, my apologies.

Install this plugin: https://wordpress.org/plugins/custom-post-template/
Add this css (the titles need to be cleaned up):
/*Full Width Builder Page */
.page-template-template-fullwidth-builder-page .hentry {
margin: 0;
}

.page-template-template-fullwidth-builder-page .site-content {
outline: 0;
padding-top: 0;
}

.site-content {
outline: 0;
padding-top: 20px;
}

.db-col-full {
max-width: 100% !important;
margin: 0;
padding: 0;
}

.db-full {
width: 100% !important;
padding: 0;
margin: 0;
}

.db-main {
width: 100% !important;
padding: 0;
margin: 0;
}

Create a new file: template-fullwidth-builder-page.php
Add the file to your child theme

<?php /* Template Name: Full Width Builder */ ?>
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id=”content”>
*
* @package storefront
*/

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no”>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<?php
do_action( ‘storefront_before_header’ ); ?>

<header id=”masthead” class=”site-header” role=”banner” style=”<?php storefront_header_styles(); ?>”>
<div class=”col-full”>

<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_skip_links – 0
* @hooked storefront_social_icons – 10
* @hooked storefront_site_branding – 20
* @hooked storefront_secondary_navigation – 30
* @hooked storefront_product_search – 40
* @hooked storefront_primary_navigation_wrapper – 42
* @hooked storefront_primary_navigation – 50
* @hooked storefront_header_cart – 60
* @hooked storefront_primary_navigation_wrapper_close – 68
*/
do_action( ‘storefront_header’ ); ?>

</div>
</header><!– #masthead –>

<?php
/**
* Functions hooked in to storefront_before_content
*
* @hooked storefront_header_widget_region – 10
*/
do_action( ‘storefront_before_content’ ); ?>

<div id=”content” class=”site-content” tabindex=”-1″>
<div class=”db-col-full”>

<?php
/**
* Functions hooked in to storefront_content_top
*
* @hooked woocommerce_breadcrumb – 10
*/
do_action( ‘storefront_content_top’ );?>

<div id=”primary” class=”content-area db-full”>
<main id=”main” class=”site-main db-main” role=”main”>

<?php while ( have_posts() ) : the_post();

do_action( ‘storefront_page_before’ );

get_template_part( ‘content’, ‘page’ );

/**
* Functions hooked in to storefront_page_after action
*
* @hooked storefront_display_comments – 10
*/
do_action( ‘storefront_page_after’ );

endwhile; // End of the loop. ?>

</main><!– #main –>
</div><!– #primary –>

<?php
get_footer();
- This reply was modified 9 years, 5 months ago by danbaruch.
- This reply was modified 9 years, 5 months ago by danbaruch.
Thread Starter magnusm
(@magnusm)

9 years, 5 months ago
Mate that plugin is over 4 years old and for posts. Where to you mean that I should paste the code, in a page template file? Thanks alot for your effort!
- This reply was modified 9 years, 5 months ago by magnusm.
- This reply was modified 9 years, 5 months ago by magnusm.
Thread Starter magnusm
(@magnusm)

9 years, 5 months ago

Ok So ignore the above answer. I’ve made the changes in style.css, added the file for the page template and chosen it for the first page, but all content is erased, why could that be?

Thread Starter magnusm
(@magnusm)

9 years, 5 months ago

I can also add that I am using Beaver Builder and not posts for building the page. Everything between the header and footer is erased.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Make Storefront Pages Truly Full Width’ is closed to new replies.