Removing the sidebar from ShutterShot Wordpress Theme

I recently changed the theme on my photography portfolio site to the beautiful ShutterShot theme from www.fabthemes.com. I had been looking for a simple full-screen to showcase my photography and this is exactly what I wanted.

The one thing that I didn't like was the sidebar which had a space for a Twitter feed and some sponsored ads (which I assume fab themes make some money on if you don't change the default links) - It seems that lots of other people wanted to remove the sidebar too judging by the comments online.

The solution I found was to do the following:

Load your blog in a tab of your browser and navigate to a page which shows the sidebar with Twitter feed and sponsored links.

In another tab, go to the theme editor by navigating to Appearance > Editor in the dashboard. Choose 'Sidebar' from the list of templates on the right.You will now see the code for the sidebar.php page - this is what is displayed in the sidebar. At the very top of this page, type

<!--

on a line of its own, then on the very last line type

--->

This will make all the content be treated as a comment so not display. Click the 'Update file' button at the bottom of the page and reload your blog.

You should see that the sidebar is now empty, but there is still a blank space where it used to be.

The width of the content on the blog page is controlled by the 'content' definition in the CSS. In the editor, click the stylesheet link on the right side, and find the section which has a line beginning

#content {

The width of the content is defined two lines below that. change it to read:

width: 740px;

Save the page and reload your blog - the content should now fill the space where the sidebar once was.

While you're in the stylesheet, you might want to fix the menu so that it works on mobile devices.

Find the section which reads

#submenu {
margin: 0px 0px ;
width:700px;
padding:0px 0px;
}

and change it to

#submenu {
margin: 0px 150px ;
width:auto;
padding:0px 0px;
}

changing the value '150px' will move the menu horizontally - 0px will be against the right side, 150px was about right for me.

I hope this helps you out - let me know in the comments how you get on!

Home