Support » Theme: Delicacy » Full Width Page Template Setup

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

Viewing 15 replies - 1 through 15 (of 17 total)
  • 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.

    Michael

    (@alchymyth)

    Forum Moderator

    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.

    Here is the page that is using this template:

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

    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.

    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.

    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.

    Michael

    (@alchymyth)

    Forum Moderator

    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; }

    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

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

    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.

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

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

    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!

    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”

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

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Full Width Page Template Setup’ is closed to new replies.