Creating a post without sidebars but not full width eleven40 theme

[nate]

Hi there

I want to create a post template that has no sidebars but is 70% of the width that the standard "no sidebar layout" is in the Eleven40 theme.

The only thing I've been able to get to work so far by putting the following into the "additional CSS" in the wordpress customizer:

.full-width-content .content { border: none; padding: 5% 15% 1% 15%; float: none; width: 100%;}

This successfully changes the width on the posts when selecting the no side-bar layout option, but it also changes this for pages as well as posts. I want my pages to remain full width, whilst having posts that can be 70% width, with no sidebars.

The options I can think of would be:

1. To have the above code in the "additional CSS" and then create a full width page template that I can select for the pages that I want to still be full width

But I'm sure there is probably a better way that I can't think of. Like adding an extra post layout option somehow?

If this is the only way, does anyone know how to create a full width page template - basically a template that would just be a regular page but forces it to be full width regardless of the layout setting, I guess.

Hope this makes sense but if you need any clarification of what I'm going for here, just ask.

Any help with this is much appreciated,
Nate

http://testitout2.siterubix.com/test-post-for-automatic-301-redirects-2016

[Brad Dalton]

You could copy the page_landing.php template and use that as a post template.

---

Tutorials for StudioPress Themes.

[nate]

Thanks Brad.

Appreciate the reply.

I didn't realize that you could do page templates in posts now. Though I don't see "Page Attributes" at all when I go to edit on a post. But that could be an option if I can work that out.

If I use page_landing.php will that then just show the landing page template? I still want to have the menus, tagline, post data etc that I would normally have on a post - essentially a full width post, just not as wide.

I did notice that there is "Custom Post Class" in the post edit page. Would there be a way of using this to achieve it.

Thanks again!

[Brad Dalton]

The custom body class is for adding CSS to style this template which includes setting the width.

Something like this would work added to a file in your child themes root directory :

<?php

// Template Name: Custom
// Template Post Type: post

add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

genesis();

---

Tutorials for StudioPress Themes.

[nate]

Thanks again for your reply Brad.

I was a little confused (my CSS/PHP etc is elementary at best!) but I did some more research and trial and error, and adding this to CSS.

.custom-body-width .content {
	border: none;
	padding: 4% 15% 1% 15%;
	float: none;
	width: 100%;
}

And then put "custom-body-width" in the Custom Body Class section of the post and that seems to do what I wanted - 75% content width with everything else being normal and it doesn't effect the "full-width-content" layout at all.

Seems to be how I want it - http://testitout2.siterubix.com/test-post-for-automatic-301-redirects-2016 (this is just on my test page for now).

Is this a reasonable solution or can you foresee this causing problems (e.g. site speed, coding clashes etc) . I will most likely using this for 100+ posts.

Grateful for your advice,
Nate

[nate]

Hmmm only thing with this is that it also adds that padding when on mobile, which isn't ideal. If there was a way to do a "maximum width" so that it was only so wide on desktop but could still go full width on mobile.....

[Brad Dalton]

I would look at the CSS for the landing page and use that as a guide on how to control the width.

You can use max-width or CSS for Media Queries which you'll find at the end of the style sheet.

You can also use PHP in the template to generate a custom body class rather than use the body class settings.

add_filter( 'body_class', 'magazine_add_body_class' );
function magazine_add_body_class( $classes ) {

	$classes[] = 'custom-body-width';
	return $classes;

}

Trial and error is good.

---

Tutorials for StudioPress Themes.

[nate]

This reply has been marked as private.

[Author]

Posts