Full Width Page Template Setup

motorcoachlcm
(@motorcoachlcm)

13 years, 5 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 ]

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

mohdrafie
(@mohdrafie)

13 years, 5 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.

Michael
(@alchymyth)

13 years, 5 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.

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 months ago

Here is the page that is using this template:

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

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 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.

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 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.

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 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.
Michael
(@alchymyth)

13 years, 5 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; }
```
Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 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

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 months ago

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

13 years, 5 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.
Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 months ago

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

Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 months ago

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

13 years, 5 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!
Thread Starter motorcoachlcm
(@motorcoachlcm)

13 years, 5 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”

mohdrafie
(@mohdrafie)

13 years, 5 months ago

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)

1 2 →

The topic ‘Full Width Page Template Setup’ is closed to new replies.

Tags