Full-width blog page and removing sidebar

Front page Support Forums Kabuki Theme Support Full-width blog page and removing sidebar

This topic contains 5 replies, has 2 voices, and was last updated by  satori 4 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1543

    mahenbala
    Participant

    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

    #1547

    satori
    Member

    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

    #1552

    mahenbala
    Participant

    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

    #1557

    satori
    Member

    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

    #1568

    mahenbala
    Participant

    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

    #1575

    satori
    Member

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.