WordPress.org

Ready to get started?Download WordPress

Forums

Delicacy
Full Width Page Template Setup (18 posts)

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

    Here is the page that is using this template:

    http://www.gamotorcoachoperators.org/gmoa/

  5. motorcoachLCM
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  13. motorcoachLCM
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

    This would solve the need.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic