WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[resolved] Remove left sidebar (21 posts)

  1. JoshuaMunoz
    Member
    Posted 6 months ago #

    gadgetfit.net

    I'm trying to remove the black left sidebar from my twenty fourteen child theme.

    I've got the child theme all set up, style.css, header, and footer in the child folder, along with functions.php and index.php, but that latter two do not show up in the editor.

    Any help would be appreciated!

  2. It looks like you managed to remove the left sidebar. If you're all set, could you please mark this post as resolved using the dropdown menu just to the right? Thanks.

  3. friktion321
    Member
    Posted 6 months ago #

    Also can you explain how you did this? I am also interested in removing the left sidebar.

  4. friktion321 - did you manage to figure out how to remove the left sidebar? I don't see one here: http://www.nextgenweekly.com/

    Care to share how you did it so it helps others who will undoubtedly want to do the same thing as both of you and find this thread in search results? :-)

  5. alexwyller
    Member
    Posted 6 months ago #

    the first thing i had in mind is to unload the sidebar (comment the get_sidebar() function in your child themes)... but why do you want to get rid the sidebar? i like seing a black sidebar on a white content, thou.

  6. aquaihoi
    Member
    Posted 6 months ago #

    Ok, to remove side bar you gotta quote these out on page.php in your child theme :

    </div><!-- #content -->
    </div><!-- #primary -->
    <?php /*?><?php get_sidebar( 'content' ); ?><?php */?>
    </div><!-- #main-content -->

    <?php
    //get_sidebar();
    get_footer();

    But you are left with the black bar on the left - so I assume you want the full content area just like me . . . ok . . . working on that bit now . . .

  7. izziebot
    Member
    Posted 6 months ago #

    I am also very interested in an answer for this. :(

    Lots of people have seen to figure out how to do it but nobody's sharing

  8. izziebot
    Member
    Posted 6 months ago #

    Ok, with a lot of fiddling I feel like I'm getting close.

    To get rid of the sidebar I put the follow styles in:

    /* GET RID OF SIDEBAR */
    .featured-content {
    	padding-left: 50px;
    }
    
    .site-main .widecolumn {
    	margin-left: 50px;
    	margin-right: 15%;
    }
    
    .site-content {
    	margin-left: 50px;
    	margin-right: 30%;
    }
    
    .site:before {
    	width: 0;
    }
    
    #secondary {
    	width: 0;
    }

    Now depending on how you want the site to look, you can mess with the margin/padding number (here 50px).

    *As a note, I turned off my header text. If you have that turned on, you're gonna run into issues. I'll try to figure out a fix for that later, but for now I'm going with designs that turn the header text OFF...

    So after just the above, there's quite a lot of white space hanging around the main content, which I'm struggling with.

    I used the follow styles from another thread to beef up the main content (make it wider)

    /* EXPAND content width */
    .full-width .site-content {
    	margin: 0 auto;
    }
    
    .full-width .site-content .has-post-thumbnail .entry-header {
    	margin: 0 auto;
    }
    
    .singular.full-width .site-content .has-post-thumbnail.hentry {
    	margin: 0 auto;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    	max-width: 2000px;
    }

    But I can't seem to get rid of the massive margins between the main content and left and right… sigh.

    http://www.izziebytes.net/

  9. izziebot
    Member
    Posted 6 months ago #

    Ok, sorry for the post spam - I can't seem to edit or delete my former comments.

    Think I figured it out. 98% there, feel free to adjust to make it look better / work better.

    *Works with no header text/description only
    *Works with or without header image (1260px width a must).
    All this code should go in the default CSS editor.

    Get Rid of Sidebar:

    /* GET RID OF SIDEBAR */
    .featured-content {
    	padding-left: 50px;
    }
    
    .site-main .widecolumn {
    	margin-left: 50px;
    	margin-right: 29%;
    }
    
    .site:before {
    	width: 0;
    }
    
    #secondary {
    	width: 0;
    }

    Adjust content width and padding:

    /* EXPAND content width & fix margins*/
    .full-width .site-content {
    	margin: 0 auto;
    }
    
    .full-width .site-content .has-post-thumbnail .entry-header {
    	margin: 0 auto;
    }
    
    .singular.full-width .site-content .has-post-thumbnail.hentry {
    	margin: 0 auto;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    	max-width: 2000px;
    }
    
    .hentry {
    	max-width: 100%;
    }
    
    .site-content {
    	margin-left: 20px;
    	margin-right: 29%;
    }

    Optional - center content (looks best, imo, but your milage may vary).
    /* CENTER CONTENT */

    .site {
    	max-width: 1260px;
    	position: relative;
    	margin: 0 auto;
    }
  10. ipunkbali
    Member
    Posted 6 months ago #

    @izziebot, I dont think using css is the cleanest way to remove sidebar, i still can see your blank #secondary div. Its just hide it, not remove it. This should be done with php functions.

    Hopefully the theme author will help this issue.

    Why on earth magazine theme has 3 columns??
    Even mashable.com, cnet.com, forbes.com and cnn.com dont have 3-columns except their homepage.

    I notice after using 2014 theme my revenue drops 50%.

  11. missybunnie
    Member
    Posted 6 months ago #

    Why did you comment out the closing divs? I believe you should be able to remove the sidebar by just removing the get sidebar part. The closing divs may be part of why the box is still there. You probably need to find the div for the sidebar and comment that not the closing to your main content and middle section.
    If you are doing this with a child theme just take the php file with the sidebar remove the line and name it the same thing with the child theme.

  12. bagmaster
    Member
    Posted 6 months ago #

    How come the Author won't step up and solve this for us? I'll tell you why, they can't!
    Not only is the black left sidebar the worst design decision known to man, its forced on us like communism in Cuba!
    I've tried everything under the sun to remove this embarrassment to humanity but nothing seems to work without a myriad of other design issues, and having to restyle whole freakin theme CSS!
    Clearly the Theme Author also has no clue and would rather us all al purchase a theme at a site like Themeforest, rather than promoting their work.
    Shame on WordPress for letting this sort of thing fly!
    Time to buy a theme!

  13. dsalon
    Member
    Posted 6 months ago #

    I like the twenty fourtenn theme very much and intend to use it, so currently I test it on a LAN server...

    izziebot thank you for your suggestion, however as you know it doesn't work properly... the most serious issues are problems with the responsiveness... (for instance there are conflicts with the right sidebar and the title and also the thumbnail area)

    so I've checked the solutions proposed by JoshuaMunoz and friktion321... below is the css I've extracted from friktion321, which complies better with my ideaws... though this proposal doesn't work with full-width pages... that's ok for me...

    /* No Sidebar */

    @media screen and (min-width: 783px) {

    .primary-navigation {
    float: right;
    margin-left: 20px;
    }
    }

    @media screen and (min-width: 1110px) {

    .archive-header,
    .comments-area,
    .image-navigation,
    .page-header,
    .page-content,
    .post-navigation,
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content footer.entry-meta {
    padding-left: 55px;
    }

    }

    /*
    centering the page
    .site {
    margin: 0 auto;
    }
    */

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    max-width: 874px;
    }
    .comments-area {
    max-width: 874px;
    }
    .post-navigation,
    .image-navigation {
    max-width: 874px;
    }

    .site:before,
    #secondary {
    width: 0;
    display: none;
    }
    .featured-content {
    padding-left: 0;
    }
    .featured-content-tp {
    padding-left: 0;
    }
    .site-content, .site-main .widecolumn {
    margin-left: 0;
    }
    .hentry {
    max-width: 900px;
    }
    .post-thumbnail img {
    width: 100%;
    }

    .site-title,
    .site-description {
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    }

    you can do the same with JoshuaMunoz's proposal...

    as mentioned by ipunkbali a clean sulution maybe to comment out the get_sidebar() in your child theme's templates

  14. friktion321
    Member
    Posted 6 months ago #

    Sorry Kathryn Presner and everyone else. Kind of disappeared there for awhile.

    I actually just ended up installing the Twenty Fourteen Extended plugin. Within the plugin there is an option to disable the right side bar and align everything to your choosing. May have not been the option I was looking for, but it worked just the same.

  15. rdobbins
    Member
    Posted 3 months ago #

    With the 2014 theme, install the Fourteen Extended Plugin. Go to Appearance, Customize, Twenty Fourteen General Options, and click Remove Primary (Left) Sidebar. I had to select "Remove the Feature Content" too but should work without checking this. Credit to MyEZ WP (YouTube).

  16. baxterstockman
    Member
    Posted 3 months ago #

    Hey,

    I did everything what Mike said in his video got (rid of the sidebar and everything) but it's still not set to full width.

    I also copied izziebot's code for /* EXPAND content width & fix margins*/ in my child theme as well as tried this code (sperately) that I found online

    /*This section sets page to 100% width */
    .site {
    background-color: #fff;
    max-width: 100%;
    position: relative;
    }
    /*This section sets page header to 100% width */
    /*.site-header {
    background-color: #000;
    max-width: 100%;
    position: relative;
    width: 100%;
    z-index: 4;
    }

    Unfortunately, neither works, I still have a little bit of a margin on the right and the left, does anyone know why?

  17. ourmanflint
    Member
    Posted 2 months ago #

    Just in case anyone finds this post again

    this worked perfectly for me

    site,
    .site-header {
     max-width: 100%;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta, .page-content {
     /* Original max-width: 474px */
     max-width: 80%;
    
    }
    
    .site:before {
        width: 0;
    }
    
    #secondary {
      display: none;
    }
    #content {
      margin-left:0px;
    }
  18. Mark
    Member
    Posted 1 month ago #

    ourmanflint's solution resolved the issue for me, but I'm not sure exactly how. By itself, changing #secondary to display none doesn't eliminate the black sidebar, which is defined somewhere below it, by margin and width settings apparently.

  19. Frank maio
    Member
    Posted 3 weeks ago #

    to remove sidebar through css the only code necessary is

    .site:before {
        display: none;
    }
    
    #secondary {
      display: none;
    }
  20. rdobbins
    Member
    Posted 3 weeks ago #

    Update my post from 5 months ago:
    While the below instructions will remove the black right sidebar, it still leaves a smaller white sidebar:

    With the 2014 theme, install the Fourteen Extended Plugin. Go to Appearance, Customize, Twenty Fourteen General Options, and click Remove Primary (Left) Sidebar. I had to select "Remove the Feature Content" too but should work without checking this. Credit to MyEZ WP (YouTube).

    Also, under Fourteen Extended, select "Twentyfourteen Content Options" and change "Content Max-Width" to 800. This will move your content all the way to the left...no more space.

  21. marypcarlson
    Member
    Posted 1 day ago #

    Thanks ourmanflint.
    I"ve added the following for tablets and mobiles so that the content expanded to their widths.

    @media screen and (max-width: 783px) {
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content,
    .post-navigation,
    .image-navigation,
    .comments-area {
    max-width: 100%;
    }
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.