Full-width blog page and removing sidebar

[mahenbala]

Hello again Andrew,

While working on the blog page for my website, I wanted the posts to be larger so it takes up the space of the side bar. I’ve changed the layout to ‘full-width’ but the sidebar is still there. In the widgets panel, I’ve removed all the widgets from the sidebar and only left the footer but the sidebar still takes up the space on the page.

Is there a way for me to remove the sidebar from the blog page so the posts are wider?

Cheers,
Mahen Bala

[satori]

Hey Mahen,

in WordPress the blog posts page is being rendered by a separate template “index.php” which does not follow normal template rules. There is no back-end option in Kabuki to make the blog posts page full-width, and it was not envisaged as a separate template in Kabuki, but you can achieve the desired result by using some custom CSS (insert it into the “style.css” files, which should open by default when you visit the “Appearance -> Editor” admin section):

@media only screen and (min-width: 990px) {
.blog #content { width: 686px !important; }
.single-post #content .featured-thumbnail img, .page #content img, .blog #content .featured-thumbnail img, .single-post #content a img, .tag #content .featured-thumbnail img, .category #content .featured-thumbnail img, .archive #content .featured-thumbnail img { max-width: 686px !important; }
}
@media only screen and (max-width: 990px) and (min-width: 767px) {
.blog #content { width: 536px !important; }
.single-post #content .featured-thumbnail img, .page #content img, .blog #content .featured-thumbnail img, .single-post #content a img, .tag #content .featured-thumbnail img, .category #content .featured-thumbnail img, .archive #content .featured-thumbnail img { max-width: 536px !important; }
}

For the layout to work, you will also need to download this custom file I’ve made for you, unzip it, and upload the contained file into the theme folder (/wp-content/themes/Kabuki) via ftp.

Let me know if this works!

Sincerely,
Andrew / Satori Studio

[mahenbala]

Thanks Andrew. That worked in clearing up the space but how I do get the posts to take up the free space?

You can have a look at the layout here

http://presenttensemedia.org/posts/

Thanks again,
Mahen Bala

[satori]

Hey Mahen,

from looking at the page you’ve linked to, I can see that you’ve figured it out. Is this correct?

Sincerely,
Andrew / Satori Studio

[mahenbala]

Hi Andrew,

The landing page on the blog works very nicely but the sidebar area crops in when viewing the actual posts. It reminds me that there are no widgets and it cuts into the images within the post.

Example here: http://presenttensemedia.org/datuk-gong-a-mistaken-identity/

Do let me know if I’m making a mistake somewhere.

Regards,
Mahen Bala

[satori]

Hey Mahen,

that’s because you only mentioned the blog posts page and thus my customization was intended only for that template. To make the single posts also stretch to full width of the content, please add some more CSS:
.single-post #main #content { width: auto; }
and upload the contents of this archive into your theme folder.

Let me know if this achieves your desired effect!

Sincerely,
Andrew / Satori Studio

[Author]

Posts