WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Hide Sidebar then Extend Page to take full width (36 posts)

  1. dra6on
    Member
    Posted 2 years ago #

    Hey Guys

    I'm need some assistance one a two step process. I've figure out how to hide the side bar on specific pages. But once I do that the page that doesn't take up the entire length of the theme. The sidebar widgets are gone but the page stays at its normal width, I would like to extend it to take full advantage of the theme.

    To hide the sidebar I added this into the pages.php

    <?php if (is_page('200')) : ?>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>

    -

    Now my question is, I how do we extend page no#200 to take the full length of the screen/theme. I have read that you need to do something along the lines of this :

    <div class="myclass">

    <div class="<?php if (!is_page('x')) : ?>myclass<?php else : ?>myclasswider<?php endif; ?>">

    and

    .myclass {
    width:800px
    }
    .myclasswider {
    width:1000px
    }

    But where does this go ??? in the pages.php file ? or somewhere else. Or is the code just mention above wrong. If someone can point me in the right direction on how to extend the page once i've removed the sidebar that would be greatly appreciated.

    if you need example code from the site please let me know as it might make things easier.

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    please post a link to your site, pointing to the page in question, if you would like to get some suggestions.

    your theme might be using 'body_class()' which would give you a css class to target the page; .page-id-200

  3. dra6on
    Member
    Posted 2 years ago #

    this is the page in question :

    http://www.capsulecomputers.com.au/online-store/

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    unfortunately your theme does not use 'body_class()', therefore you are right, you need to add a special css class to one of the divs, possibly to

    <div id="container">

    or to

    <div id="left-div">

    (try to locate the code either in page.php (or index.php) or haeder.php)

    example:

    <div id="left-div" <?php if(is_page(200) echo 'class="widepage"'; ?>>

    and in style.css, add a new line:

    #left-div.widepage { width: 930px; }

    (there might be some background images involved; this might need extra tweaking)

  5. dra6on
    Member
    Posted 2 years ago #

    Ok I've located the <div id="container"> and <div id="left-div"> location, they are in the Page.php file. Here is a snipet of what the code looks like :

    <?php get_header(); ?>

    <div id="container">
    <div id="left-div">
    <div id="left-inside">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <!--Start Post-->
    <span class="single-entry-titles" style="margin-top: 18px;"></span>
    <div class="post-wrapper">

    Now question is .. where and what do i type, I've tried entering the code you mentioned :

    <div id="left-div" <?php if(is_page(200) echo 'class="widepage"'; ?>>

    but it doesnt work. also you mentioned that once you enter this code in you also have to enter this code :

    #left-div.widepage { width: 930px; }

    in the sytles page .. i did that and it doesnt work.

    So if you could please be a little more specific i'd greatly appreciate it.

    So to get it all clear, where do i put the code, exactly what piece of code do i put and does it the other piece of code need to go into the sytles.css page, and where ?

    Thanks for the help

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    is the edited code active at the moment?

    if not, please activate it again so someone could check if the changes are showing on page 200 (are you sure the page id is 200 ?).
    also put the additional css back into style.css.

    or try:

    <div id="left-div" <?php if(is_page('online-store') echo 'class="widepage"'; ?>>
  7. dra6on
    Member
    Posted 2 years ago #

    I've tried placing :

    <div id="left-div" <?php if(is_page('online-store') echo 'class="widepage"'; ?>>

    in the pages.php file and it errors out on whatever line i put it on.

    Im not sure what to do with :

    #left-div.widepage { width: 930px; }

    is this meant to go into the Style.css file ?

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    my mistake; add a bracket:

    <div id="left-div" <?php if(is_page('online-store')) echo 'class="widepage"'; ?>>
  9. dra6on
    Member
    Posted 2 years ago #

    still fails.

    where are you meant to put this piece of code ... what section of the pages.php file ?

    this is a snipet of the top section of the pages.php file

    <?php get_header(); ?>

    <div id="container">
    <div id="left-div">
    <div id="left-inside">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <!--Start Post-->
    <span class="single-entry-titles" style="margin-top: 18px;"></span>
    <div class="post-wrapper">
    <?php if (get_option('egamer_integration_single_top') <> '' && get_option('egamer_integrate_singletop_enable') == 'on') { ?>
    <div style="clear: both;"></div>
    <?php echo(get_option('egamer_integration_single_top')); ?>

    -

    where does it have to go ?

  10. dra6on
    Member
    Posted 2 years ago #

    ok seems to work, now the footer has gone a little crazy.

    this is whats in the page.php file now : check the bold

    <?php get_header(); ?>

    <div id="container">
    <div id="left-div">
    <div id="left-div" <?php if(is_page(20012)) echo 'class="widepage"'; ?>>
    <div id="left-inside">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <!--Start Post-->
    <span class="single-entry-titles" style="margin-top: 18px;"></span>
    <div class="post-wrapper">

  11. dra6on
    Member
    Posted 2 years ago #

    and by doing it like that all the pages go a little crazy with the sidebar showing under the page and not on the left side

  12. dra6on
    Member
    Posted 2 years ago #

    ok seems to be working but the only problem i have now is the footer is wonky.

    also if i wanted to add another page what do i do ?

    I know you have to add it to the bottom section of the sidebar :
    Is this correct ?

    <!--Begin Sidebar-->
    <?php if (is_page('20012','27391')) : ?>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>
    <!--End Sidebar-->

    and then do you add this to the top section :

    <div id="left-div" <?php if(is_page(20012,27391)) echo 'class="widepage"'; ?>>

    and do you leave the #left-div.widepage { width: 930px; } as is ? or do you have to add more code in the styles.css page ?

    Thanks

  13. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    also if i wanted to add another page what do i do ?

    you approach seems to be correct.

    the 'wonky' footer might come from an erroneously deleted or ommitted </div> in page.php (?)

    compare your current page.php with one from an unedited theme.

  14. dra6on
    Member
    Posted 2 years ago #

    my above suggestions dont work. only the first page works the 2nd one doesnt work.

    I have not made any other changes to the pages file nothing has been deleted or ommitted. the other pages work well, only the online store has the wonky footer.

    let me know if you have any ideas on how to add the second page as my suggestions mentioned dont work

  15. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    http://codex.wordpress.org/Function_Reference/is_page

    try: if(is_page(array(20012,27391)))

    only the online store has the wonky footer.

    there might be a closing div in sidebar.php;
    if so, you need to add this conditionally as well, in your code; for example, try:

    <!--Begin Sidebar-->
    <?php if (is_page(array(20012,27391))) : ?>
    </div>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>
    <!--End Sidebar-->

    [edit: typing error corrected]

    -
    I am off for today - continuing with festive indulgence - back tomorrow.
    hope you'll manage to get this problem solved ;-)

  16. dra6on
    Member
    Posted 2 years ago #

    No that doesnt work

    Fatal error: Call to undefined function aray() in /home/capsulec/public_html/wp-content/themes/eGamer/page.php on line 68

    will array looks like its correct but it doesnt work causes errors big time

  17. dra6on
    Member
    Posted 2 years ago #

    The

    </div> worked tho ;)

    so we have fixed that issue, but still need to solve how to add a second or third page into this mix :(

    Let me know if you have any other ideas tomorrow.

    Merry Christmas and thanks for your help so far

  18. dra6on
    Member
    Posted 2 years ago #

    Also just to let you know that the top section is showing this :

    not sure if this is right if we are using their the array or anything else.

    <div id="left-div" <?php if(is_page('20012','27391')) echo 'class="widepage"'; ?>>

  19. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    I had a typing error in this reply http://wordpress.org/support/topic/how-to-hide-sidebar-then-extend-page-to-take-full-width?replies=18#post-2522635

    which cause the error message;
    should read 'array' in all places :-(

    check the link http://codex.wordpress.org/Function_Reference/is_page for correct syntax

  20. dra6on
    Member
    Posted 2 years ago #

    so this needs to be placed in the sidebar

    <!--Begin Sidebar-->
    <?php if (is_page(array(20012,27391))) : ?>
    </div>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>
    <!--End Sidebar-->

    and what about in the div ? at the moment its this :

    <div id="left-div" <?php if(is_page('20012','27391')) echo 'class="widepage"'; ?>>

    and also what do we need to change in the styles.css ?

  21. dra6on
    Member
    Posted 2 years ago #

    Yo is last comment of mine correct ?

  22. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    keep the div:

    <div id="left-div" <?php if(is_page(array(20012,27391))) echo 'class="widepage"'; ?>>

    in style.css, add (if you haven't added it already):

    #left-div.widepage { width: 930px; }
  23. dra6on
    Member
    Posted 2 years ago #

    ok i'll do that but do still add this to the sidebar ? and is the syntax correct ?

    <!--Begin Sidebar-->
    <?php if (is_page(array(20012,27391))) : ?>
    </div>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>
    <!--End Sidebar-->

  24. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    syntax looks ok

  25. dra6on
    Member
    Posted 2 years ago #

    Awesome it works but now the bottom header is now wonky again ... the /div comment we used doesnt work. u able to help on that one ?

  26. dra6on
    Member
    Posted 2 years ago #

    ok nearly there LOL

    The forum page is now showing but its still only using the post wrapper size of 609px

    this is taken from the styles.css file :

    .post-wrapper { background-color: #262D2B; margin-top: 0px; padding: 0px 15px 15px 15px; background-image: url(images/category-post-bg.gif); background-repeat: no-repeat; background-position: bottom; width: 609px; float: left; }

    Is there any way to specify the forum page only to have a wider post-wrapper size

  27. dra6on
    Member
    Posted 2 years ago #

    noticed u helped someone else out with a similar issues :

    <?php if(is_page(234)) { ?>
    <style type="text/css" media="screen">
    #left-div{width:920px;}
    .post-wrapper{width:870px;}
    .single-entry-titles{background:none;}
    </style>
    <?php } ?>

    how do u think this can be incorporated into my style.css also is there anyway to remove the background color as well on my theme

  28. Pankaj Pandey
    Member
    Posted 2 years ago #

    Why you are going through this approach just create a page template with no sidebar and assign that template required page/pages. in this way you dont need to change your code every time when you add a new page. if you agree with this solution i can post more detail.

    if you still want to fix above code let me know i will post correct way to fix by css

  29. dra6on
    Member
    Posted 2 years ago #

    please send the correct way to fix css. I need to have the following also removed for just this page, which are :

    the background image : url(images/post-title-bg-2.gif)
    and background color : #262D2B

    would like the page to be clean with no background or image banner up the top and be 900px wide.

  30. dra6on
    Member
    Posted 2 years ago #

    i believe in this situation just for the forum page i will not need the background color nor the background image and the width to be 900px

    details from style.css file

    .post-wrapper { background-color: #262D2B; margin-top: 0px; padding: 0px 15px 15px 15px; background-image: url(images/category-post-bg.gif); background-repeat: no-repeat; background-position: bottom; width: 609px; float: left; }

Topic Closed

This topic has been closed to new replies.

About this Topic