Aug 292013
 

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 teh comments how you get on!

 Posted by at 10:06 pm

  13 Responses to “Removing the sidebar from ShutterShot WordPress Theme”

Comments (13)
  1. Thanks alot for the sidebar fix man, helped me alot 🙂

  2. Thank you its very good guide

  3. awesome, thank you!

  4. I get lost here.. I opened up Style.CSS and cant find #content anywhere..

    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
    1

    #content {

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

    width: 740px;

  5. hi very good your tutorial it’s works. i think i must learning css like you so can understanding how to edit the css programe. thanks.

  6. i have the same problem as Adam…. anyone for helping us newbies?

  7. Search for in the Content menu of the stylesheet
    .page-content,
    .entry-content,
    .entry-summary {

    and write the width. Example:

    }
    .page-content,
    .entry-content,
    .entry-summary {
    margin: 1.5em 0 0;
    width: 915px
    }

  8. Works perfectly – thank you!!

  9. Hello,

    Can you tell me how I can change the logo?

    The option theme editing is not working.

    Thanks

  10. Hello there,

    are you still activ?

    I just started with wp… I would like to use the Shuttershot Theme. I deleted the sponsor part.

    But when I put

    #content {
    width: 740px;
    }

    in my stylesheet, the whole “post” or content is moving to the left side…. can you help me there?

  11. I got a better way, so you can still use the sidebar if you want to, but without the annoying Sponsors part.
    Go to Appearance, and select theme editor. I the menu with all the files to the right, find and select the file “sidebar.php”.
    Remove this line from the code:

    Done.

  12. Nice, the line was remove in previous comment (added spacing):

  13. And for the 3rd attempt:
    php include (TEMPLATEPATH . ‘/sponsors.php’);

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

CommentLuv badge

%d bloggers like this: