Full Widgth Pages

[Connor Hollinger]

Hello there,

I am trying to make my site a lot more simple and I think the easiest way to do that is with full width pages on every page. I want the blog to be seperate page and I was trying to get the contact info at the top like this site -> http://www.laurenfisher.photography/ <- I think that site is very simple and really brings out the pictures. I didn’t know if you knew how to code something for that but if possible it would be great!

Thanks in advanced!

[Bill Robbins]

Hey Connor,

Great question. You could go with a simple front page to start. First create a page for your new front page. The site linked to has a large image inserted into the content of it with just a bit of text below.

To create something similar, you’ll want to insert one of your best images into the copy of the page. You can add any text you’d like to have above or below it if you’d like to.

Photobug doesn’t have a built in full-width page template, but you can create one with a bit of styling. Here’s what I would suggest there:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .home #content {
   	width: 100%;
   }
   
   .home #sidebar {
   	display: none;
   }
   
   .home h1.title {
   	display: none;
   }
   

3. Update your settings.

That will make the content full width, hide the sidebar and the page title. That should give you a wide area for your image.

Then go to the Settings section and select Reading. At the top of this page you can choose what your front page displays. Select a static page and then from the drop-down menu for your front page, choose the page you just created. If you’re planning on having a blog, then choose a page for it in the “posts” page drop down. Then save your changes.

That should give you a front page with just your full width content there.

---

For the header of the site, I believe we can create something similar. What I would suggest is creating the top portion that she has, the logo and contact information in an image file and using the whole thing for the logo. Once that’s done, we can change the styling of the header in the Photobug theme so that your logo can be full width with the navigation menu down below it. I believe that will be the easiest option to replicate something similar to that one.

Once you have the logo with the contact information added, let me know and I can send over some styling to change it’s layout.

Thanks,
Bill

[Sandy Sage]

Hi Bill,

This is great.

But if you attempt to use this CSS override with the default archive of most recent posts as the homepage, there is a lot of margin between the image gallery and the post content (I use a lot of gallery posts). Is there anything I can do to widen the content area?

My site is http://sageden.com/.

Thanks,
Sandy

[Bill Robbins]

Hello Sandy,

I believe we can help out with that spacing for you. Try adding this to the Custom CSS too:

.left-gallery .post-content,
.right-gallery .post-content {
	width: 600px;
}

article {
	text-align: center;
}

section.post-content {
	text-align: left;
}

I believe that will remove the gap. It’ll also center align the featured image above the post title for you so it’s a bit better positioned now that the page is larger.

Let me know if that gives you any trouble.

Thanks,
Bill

[Sandy Sage]

Perfect! Thank you.

[Bill Robbins]

Anytime 🙂

[Author]

Posts