Support » Fixing WordPress » Text not Full Width on Full Width Page

  • markdickienb

    (@markdickienb)


    Hello All,
    I’m attempting to add a full width page to the blackbird theme. I’ve created page_wide.php and the template appears I have eliminated the sidebar. My text however still doesn’t go the full width of the page. I believe this is just a CSS change that I need to make but I haven’t been able to figure it out. The page I’m currently working on is: http://www.madtech.ca/contact-us/. Can anyone help me through the necessary change to get to a true wide page?

Viewing 15 replies - 1 through 15 (of 15 total)
  • esmi

    (@esmi)

    Forum Moderator

    Do not edit the parent theme. First create a child theme for your changes.

    markdickienb

    (@markdickienb)

    Ok child theme is created without too much problem although the background on my image description from my home page is missing now, I’ll investigate that later. So the page width, what do I do now?

    esmi

    (@esmi)

    Forum Moderator

    Next, create a custom page template in your child theme.

    markdickienb

    (@markdickienb)

    I’ve done that, created page_wide.php in my child theme.

    markdickienb

    (@markdickienb)

    I just copied and renamed page.php and removed the side-bar tags.

    esmi

    (@esmi)

    Forum Moderator

    Apply the template to a published page and check the output source markup. You should see that the <body> tag now has a page_wide.php class applied to it. You can use that class to add some custom CSS to your child’s stylesheet to widen that page. I’m not familiar with Blackbird’s markup structure but something along the lines of:

    body.page_wide.php #content {
    width:100%;
    }

    should work. I’d recommend using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.

    Michael

    (@alchymyth)

    a:
    in your template, correct the last line of this section:

    <!--Start Page Content -->
    <div class="page-content-container">
        <div class="page-content">
            <div class="grid_16 alpha">

    to show <div class="grid_24 alpha">

    b:
    add this to style.css in the child theme:

    .page-template-page_wide-php .page-content {max-width:100%;}

    markdickienb

    (@markdickienb)

    I tried that but it hasn’t worked and I’ve also now noticed that all of my footers on my content pages have now shrunk too. It appears fine on the index page.

    Michael

    (@alchymyth)

    all of my footers on my content pages have now shrunk too.

    are they all using your new page template?

    this seems to have some errors;
    shown at the example of the ‘about us’ page: http://validator.w3.org/check?uri=http%3A%2F%2Fmarkdickie.com%2Fmadtech%2Fabout-us%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    please post the full code of your page_wide.php template ( http://codex.wordpress.org/Forum_Welcome#Posting_Code )

    markdickienb

    (@markdickienb)

    <?php
    /*
    Template Name: WidePage
    */
    ?>
    <?php get_header(); ?>
    <div class="page-heading">
        <h1 class="page-title"><?php the_title(); ?></h1>
        <div class="clear"></div>
    </div>
    <!--Start Page Content -->
    <div class="page-content-container">
        <div class="page-content">
            <div class="grid_24 alpha">
                <div class="content-bar">
                    <?php if (have_posts()) : the_post(); ?>
                        <?php the_content(); ?>
                        <div class="clear"></div>
                        <?php wp_link_pages(array('before' => '<div class="page-link"><span>' . __('Pages:', 'black-bird') . '</span>', 'after' => '</div>')); ?>
                    <?php endif; ?>
    
                    <!--Start Comment box-->
                    <?php comments_template(); ?>
                    <!--End Comment box-->
    
    </div>
    <?php get_footer(); ?>
    markdickienb

    (@markdickienb)

    And yes they are all using my new page template.

    Michael

    (@alchymyth)

    you have deleted rather a lot of useful </div> after the sidebar code, before the footer;

    this is the last 15 lines from page.php – still with the sidebar code:

    <!--End Comment box-->
    
                </div>
            </div>
            <div class="grid_8 omega">
                <!--Start Sidebar-->
                <?php get_sidebar(); ?>
                <!--End Sidebar-->
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    <?php get_footer(); ?>

    to remove the sidebar, you must only remove:

    <div class="grid_8 omega">
                <!--Start Sidebar-->
                <?php get_sidebar(); ?>
                <!--End Sidebar-->
            </div>
    markdickienb

    (@markdickienb)

    Ok thank you, we’re almost there I think. However, if you check out http://www.madtech.ca/contact-us/ the text still isn’t getting full width. My first line of text just cuts off 2/3 of the way over.

    markdickienb

    (@markdickienb)

    Scratch that I got it. Just one more thing.

    There used to be a black box that was a background to the description of the main photo on the home page. You can still see the text there but it is hard to read because the black background is gone, how do I get that back?

    markdickienb

    (@markdickienb)

    I have to run but I have two outstanding questions if anyone can help:

    – There used to be a black box that was a background to the description of the main photo on the home page. You can still see the text there but it is hard to read because the black background is gone, how do I get that back?

    – On my blog (news) page there were right sidebar items for categories and archives that have now moved down to the left below my posts. How do I get those items to move back to the right hand side bar?

    I believe both of these are CSS items or related to my creation of a child theme as I haven’t edited anything else. Here is my CSS in case anyone can help:

    [Huge chunk of CSS moderated and post manually re-constructed.]

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Text not Full Width on Full Width Page’ is closed to new replies.