WordPress.org

1. motorcoachLCM
   Member
   Posted 6 months ago #
   

   I am trying to make a full width page template.

   I have the template page setup, but it is still adding that column section for the sidebar even though it is not putting the sidebar there. I want my content to fill the white area.
   Here is the code that I have in my page_fullwidth.php page template. Can you please help??

   <?php
   /*
   Template Name: Full Width
   */
   ?>
   
   <?php get_header(); ?>
   
   	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
   			<h1 class="post-title"><?php the_title(); ?></h1>
   
   			<?php the_content(); ?>
   
   	<?php edit_post_link(__( 'Edit this entry', 'delicacy' ), '<p>', '</p>'); ?>
   
   	<?php endwhile; endif; ?>
   
   <?php get_footer(); ?>

   [please remember to mark any posted code - http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

2. Mohd Rafie
   Member
   Posted 6 months ago #
   

   It would be easier if you upload the page_fullwidth.php on your theme and then create a page with the theme and paste the link here.

   Generally, you need to add a div with a new ID/class name and specify the CSS properties and values. CSS guide.

3. alchymyth
   The Sweeper & Moderator
   Posted 6 months ago #
   

   there is nothing in the php file that will work; you need to add some new css for the specific page template;

   if your theme uses body_class() in the header, there will be a specific css class for all pages using this template.

   use a browser inspection tool to find out what css class this is, and what styles you need to edit.

4. motorcoachLCM
   Member
   Posted 6 months ago #
   

   Here is the page that is using this template:
   
   http://www.gamotorcoachoperators.org/gmoa/

5. motorcoachLCM
   Member
   Posted 6 months ago #
   

   This is a straight delicacy theme. I have not changed much of anything. I created some new styles in the style sheet, but I cannot figure out how to implement them. I have tried about six or seven different ways.

   The white area is in div id="content-wrapper"
   Then there the content is all going to the div id="content",
   but it is still creating a column where the sidebar would go.

   I am not sure which style is making this happen.

6. motorcoachLCM
   Member
   Posted 6 months ago #
   

   I thought maybe someone had already made a fullwidth template for this theme. I am not sure why it would not be included in the template. The other templates that I have used in the past include a fullwidth template.

7. motorcoachLCM
   Member
   Posted 6 months ago #
   

   I am taking another stab at creating a style that I can use with some of the page.php that I deleted to make the page_fullwidth.php file. I had delete the stuff to eliminate comments and meta-data because I did not want it. Then, I just kept removing things to eliminate the unwanted column space.

8. alchymyth
   The Sweeper & Moderator
   Posted 6 months ago #
   

   using the body_class output for that page template, and targeting the involved css elements, try to use:

   .page-template-page-fullwidth-php #content { width: 100%; }
     .page-template-page-fullwidth-php #content-wrapper { background-image: none; }

9. motorcoachLCM
   Member
   Posted 6 months ago #
   

   Nothing seems to be working for me. I am trying to change the div that is set to class="content" to become class="content-full"

   There is no where on the page PHP that says class="content" so that I can change it to be "content-full" a style that I made in style.css

10. motorcoachLCM
    Member
    Posted 6 months ago #
    

    I think it is working, but now I cannot get my images to be on the page side-by-side.

11. Mohd Rafie
    Member
    Posted 6 months ago #
    

    Ok, let's get this done once and for all :)

    First, what you need is so that the content div is 900px (width)

    body.page-template-page-fullwidth-php #content {
        width: 900px !important;
    }

    Next, what you need is for the image to be aligned properly. Here's a guide on the image alignment.

    Let me know how that goes.

12. motorcoachLCM
    Member
    Posted 6 months ago #
    

    Where do I put this? in the style.css file?

13. motorcoachLCM
    Member
    Posted 6 months ago #
    

    What makes the page-fullwidth.php use this style? Do I need to put something else somewhere in a file?

14. Mohd Rafie
    Member
    Posted 6 months ago #
    

    Yes, you can add the code in the style.css

    What makes the page-fullwidth.php uses this style is the body class ie
    body class=".... page-template-page-fullwidth-php"

    However, since the problematic is the div container with ID content ie
    <div id="content">

    So, I have used the CSS below to override the width layout so that instead of 600px, is adjusted to be 900px.

    body.page-template-page-fullwidth-php #content {
        width: 900px !important;
    }

    If you have a free time, kindly read CSS Troubleshooting

    Cheers!

15. motorcoachLCM
    Member
    Posted 6 months ago #
    

    Oh my.. I am sorry to keep bugging everyone. Normally, there is not a background image with a line in it, so I can figure out what to do.

    Do I have to put this somewhere?
    body class=".... page-template-page-fullwidth-php"

16. Mohd Rafie
    Member
    Posted 6 months ago #
    

    Those are my explanations, what you need to do is to put the highligted CSS on the style.css file.

17. motorcoachLCM
    Member
    Posted 6 months ago #
    

    I did place this in the style.css file and it does not seem to be eliminating the background image. I managed to make the page full width yesterday, by removing something from the style.css file.

    body.page-template-page-fullwidth-php #content {
    width: 900px !important; background-image: none !important;
    }

18. Mohd Rafie
    Member
    Posted 6 months ago #
    

    body.page-template-page-fullwidth-php #content-wrapper {
        background-image: none !important;
    }

    This would solve the need.

Reply

You must log in to post.