WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
Fourteen: Full width custom page template (3 posts)

  1. Jas999
    Member
    Posted 6 months ago #

    Need: keep header and footer just as in Twenty-Fourteen but make the body (in the middle) full width, no sidebar, no widget, no unused white space.
    Makphisto paid a developer to come up with a solution in the form of a custom page template, in order to insert a table in the middle (see topic: "Twenty Fourteen - Need Help With a Custom Page Template").
    I tried the proposed code. My need is to put a picture, not a table, in the middle. I inserted a .png picture of 1080 x 1440 px in wp-content/uploads/2014/01 and used it on this newly created custom page. The resulting page is full width but the image got redimensioned, without my will, to 1080 x 572px... even though it is still 1080 x 1440 in the /2014/01 folder; not very good looking to say the least.
    I following Makphisto instructions' but did put the template file in a child theme:
    Copy and past that into Notepad, save the file as no-sidebar-full-width.php (the PHP is important!). Using an FTP program, FTP that file to your server (/www/wp-content/themes/child-2014/). Then, in WordPress admin, change the page template of your page to "No Sidebar, Full Width".

    <?php
    /**
     * Template Name: No Sidebar, Full Width
     *
     */
    
    get_header(); ?>
    
    <style>
    
    #secondary {
        display: none !important;
    }
    
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content, .hentry, .entry-content {
        max-width: 1260px !important;
    }
    
    #tablepress-1 {
        width: 100% !important;
    }
    
    .site-content, .site-main .widecolumn {
    margin-left:0 !important;
    }
    
    .site-content {
    margin-right:0 !important;
    }
    
    .site:before {
    width:0px !important;
    }
    </style>
    
    	<div id="primary" class="content-area">
    		<div id="content" class="site-content" role="main">
    			<?php
    				// Start the Loop.
    				while ( have_posts() ) : the_post();
    					// Include the page content template.
    					get_template_part( 'content', 'page' );
    					// If comments are open or we have at least one comment, load up the comment template.
    					if ( comments_open() || get_comments_number() ) {
    						comments_template();
    					}
    				endwhile;
    			?>
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    <?php
    get_sidebar();
    get_footer();

    I also tried to change max-width: 1260px !important; to something different than 1260px. Doing so, I lost the ability of the main menu to stick to the top as a user scrolls down.
    Help anyone for the picture to show full height?

  2. Jas999
    Member
    Posted 6 months ago #

    I copied this custom page template into a child theme based on RIDIZAIN: the image does not get resized to 572px in height, it displays exactly as saved in the /uploads folder. So there is something in Fourteen that resizes the image, but why, where and how to prevent that?

  3. ant_in_wales
    Member
    Posted 6 months ago #

    There is a max height of 572, which you can control with the 2014 Extended plug-in.
    I'm having similar problems myself with all my text down the middle of the page and great swatches of white space on either side.
    I'm about to post my own query as yours has gone too advanced for me too quickly.
    Good luck
    http://aberfoodblog.com/baravin/

Reply

You must log in to post.

About this Theme

About this Topic