WordPress.org

Ready to get started?Download WordPress

Forums

Text not Full Width on Full Width Page (16 posts)

  1. markdickienb
    Member
    Posted 1 year ago #

    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?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

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

  3. markdickienb
    Member
    Posted 1 year ago #

    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?

  4. esmi
    Forum Moderator
    Posted 1 year ago #

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

  5. markdickienb
    Member
    Posted 1 year ago #

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

  6. markdickienb
    Member
    Posted 1 year ago #

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

  7. esmi
    Forum Moderator
    Posted 1 year ago #

    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.

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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%;}
  9. markdickienb
    Member
    Posted 1 year ago #

    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.

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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 )

  11. markdickienb
    Member
    Posted 1 year ago #

    <?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(); ?>
  12. markdickienb
    Member
    Posted 1 year ago #

    And yes they are all using my new page template.

  13. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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>
  14. markdickienb
    Member
    Posted 1 year ago #

    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.

  15. markdickienb
    Member
    Posted 1 year ago #

    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?

  16. markdickienb
    Member
    Posted 1 year ago #

    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.]

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags