danbaruch

Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)
  • Forum: Themes and Templates
    In reply to: [Storefront] Make Storefront Pages Truly Full Width
    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″&gt;
    <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.
    Forum: Themes and Templates
    In reply to: [Storefront] Make Storefront Pages Truly Full Width
    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″&gt;
    <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

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