Shuttershot is a fullscreen slideshow template. This is a fabseries theme.  This theme is ideal for photography websites to showcase their portfolio in style.The theme has option to use either a full screen slideshow on the homepage or a regular blog with image slideshow as the background. If you are using a slideshow on the homepage you can set a custom page template as the blog.  I have created a screencast to show you how to add items to the slideshow.


  • Features
  • WordPress 3
  • Fullscreen slideshow
  • Portfolio
  • Custom menu
  • Custom post types
  • Featured thumbnail
  • Banner ads
  • Theme options



  • Tjorben

    Is there by any chance an updated version of this? I have problems using several Gallery and/or Lightbox plugins. They refuse to scale the images correctly or even work. It has to do with the theme itself because switching to almost ANY other themes solves the problem.

    Id really like to keep on using Shuttershot though …

    Any help? Thanks in advance,


    • Tjorben

      Oh and I am using Shuttershot with the newest version of wordpress. I know they dont work well together, but I have to try it =)

  • Jeannine

    How do I get twitter to work?

  • Adam Mator

    I need your guys help. My website I have three issues.

    1. The Sidebar box: I removed the content but the box still remains big and empty next to my post on each page.
    2. How do you change the transparency of the boxes on each page?
    3. My sideshow background only works on the home page. Im not sure how to get it working on the other pages.



    • BigM

      I have exactly the same problems.
      Can’t find where to change the background color/opacity in style.css and i also like to set the width of the boxes to 810px, with no unused space on the right side (where once the sub-menu was located).
      I also can’t figure out how to show the background slideshow on other pages than the main page.

      • Adam Mator

        Has anyone figured this one out?

        • BigM

          Go to /’YOUR WORDPRESS FOLDER’/wp-content/themes/Shuttershot/css
          There you find the file grid.css. In this file you can resize the boxes. But I haven’t figured out yet how to do this properly. I have just reduced container_12 and grid_8 to 810px which works fine for me, but may screw up pages that still use the sidebar (blog, etc).
          Go to theme.css, there you find the section /* Content */.
          Go to .site-cover, element background and replace the color by an rgba value. For example:
          background: rgba(255, 255, 255, 0.8);
          The first three numbers show the RGB value of the color, (in this case it is white) and the last value is for transperency. 1=completely transperent, 0=solid color. 0.8 works fine for me.
          For the slideshow background on every other page than the home-page, I’ve used another WordPress plugin called “Full Screen Background Images”. For this plugin you have to set up seperate backgrounds in your WordPress administration, but at least it works.
          You can see my site here:

        • Adam Mator

          Thank you so much, on your website how did you get the box to have the fade look on the outer edge of the box?

        • BigM

          This is a box shadow setting.
          Go to “.site-cover” in theme.css; then element box-shadow.
          My settings are: box-shadow: 0px 0px 50px #bbb;
          the #bbb is the color of the shadow (in this case light grey) and the 50px is the width. the two 0px are offset, one for horizontal and one for vertical offset. so you can create a drop shadow. That was not necessary in my case, I just wanted som kind of glow around the box.

        • Adam Mator

          WOW You are amazing! Seriously I cant thank you enough!
          One Last Thing! How do you get items on the homepage? I wanted to add some text and 4 pictures to link up with my other sites on the homepage my site is If you dont know no problem! You helped me out already a ton!

        • BigM

          Somewhere in the settings for this design you can choose weather the starting page shows a static page or your latest article.
          Just set up a normal page and chose this page as static page.

          Go to your dashboard, then to “Design” and then it should be the second menu item (i have only the german version, but it should be called something like “customise”). Then a new window opens, showing your page on the right sight and some settings on the left. Go to the last menu item there, (should be called something like “static starting page”) and choose the second option (show static page). then underneath you have two drop down menus, use the first one and chose the page you created before as your starting page.
          This is the only way i figured out how to put something on the first page.

        • aRCHeR™

          BigM, can u plz tell how have u changed the menu position to center? I could not find the way 🙁

        • Tinmaceyler

          Hi BigM! I’m impressed on your website. I’m wondering how did you made the menu responsive when viewed in mobile/tablet devices? Thanks in advance!

        • tinmaceyler

          Hi BigM! I’m wondering how did you made the menu responsive when viewed in mobile/tablet devices? Thanks in advance!

        • Beverley Lu Steeves

          Mischa, I just downloaded the Shuttershot wp template and I like it but wondering how you got your galleries to display as a grid then when clicking on individual images, they pop up in a window where you can scroll through them or have them show as a slideshow. I’m at a loss as to how to do it. Your site is very nice by the way 🙂 Thank you very much for any help you can give. It is much appreciated.

  • I cant change the default logo, Please help.

    • Adam Mator

      Read Though the comments below. “If you go into the wp-content folder in images it should be a logo file
      there somewhere. Replace that with whatever you want the logo to be. If
      you don’t want one remove it. The best way to work this out, if you
      don’t already have it is element inspector in Firefox. Right click near
      the logo and choose element inspector. Download it if you don’t have it.
      That way you can see the div and name of the logo file. You can then
      either look for it in the folder structure under wp.-content or alter
      the div settings for it in your WordPress code editor”

      • Adam Mator

        Also “Logo Change Quick and Easy Fix – Create a new logo PNG file and save it
        as logo.png. Then go into your file manager on your hosting companies
        page. find the file logo.png in the images folder in the shuttershot
        theme folder and replace it with the one you made. Problem solved no
        coding needed. logo file location :
        /wp-content/themes/Shuttershot/images. Tip – make the height max of your
        new logo 80px or less. The menu bar is exactly 80px.”

  • Adam Mator

    Does anyone know how to center the text and lower the navigation menu bar down a tad?

  • Adam Mator

    How do you shut off mobile version? I just want to have it show as desktop view on whatever device you are on.

  • Per Ove

    Hi, im not so good in css, but im wondering where to change the color on the stripe where the menu are from transparent black to white.. Hope somone havegood input on this one..

  • Have a problem with my site with shuttershot only with Firefox:
    All images in my full screen slideshow appear with wrong aspect ratio at the beginning (very annoying). As slideshow runs it gets fixed automatically.
    Some ideas why is this happening?

  • Hi.
    I wanted to ask if you can arrange the buttons on the same horizontal line. Currently, when I create a menu with many buttons are arranged in two horizontal lines, and the graphics are not the most beautiful.

  • Sebastian

    Hey Guys,

    I have a problem with the shutter shot template.

    I replaced the logo on the top.

    Since my Logo ist much higher than in the demo the Logo is 100 pixel higher than the menu bar.

    In the desktop version that is no problem an looks quite nice.

    The problem ist the mobile appearance.

    In the landscape mode of my iphone the logo fill nearly the whole screen.

    How can I size the logo down according to the screenwidth?



  • M

    How I can put a link on the slideshow pictures? It can be possible? The template is not responsive, isn’t? The menu not works good on small screens, tablets or smartphones.


    • Lukas


      to solve the problem with the apperance of the menu on mobile devices I use the plugin “WP Responsive Menu” which works fine for me – see

  • Kaffeet Ante

    Hi – how can i get a background ONLY on the sides not at the first startpage? I want to transparent the textarea of the sides to see the background a little – but i dont want this at the side with my slideshow. Can someone help?

    • Heidi

      I have the same issue.

  • Thanks for your great theme! Unfortunately the SHUTTERSHOT OPTIONS aren’t available in my wordpress account. I need them urgently to modify my website: . Please help!!!!!!!!! Thank you!

  • I love this theme and we’ve been using it on our community theater WP for a while. We’d like to look at other font options, however. Is there any way to change that without having to go into the code editor?

  • Thanks for your great theme! Unfortunately the SHUTTERSHOT OPTIONS
    aren’t available in my wordpress account. I need them urgently to modify
    my website: . Please help!!!!!!!!! Thank you!

  • Laila

    I just downloaded the shuttershot theme. I need to make the white text boxes on pages transparent. How do I do that? It seems that the theme has been altered, so the “how-to” that´s been posted in here previously does not seem to work. When I go to css in the editor the word opacity does not apper anywhere.

    • Heidi

      In your style.css file, add to #content the following:


      Be warned, though. This will make your slideshow translucent as well. I am trying to find a way to make the slideshow images opaque while having translucent page backgrounds. No luck yet, will post if I find out how.

      • Heidi

        Found the solution!

        Do not post anything in #content in style.css! I was wrong in my previous post. This affects the area that controls the transparency of both the slideshow AND the page content. Instead, add this to your style.css sheet:

        .container_12 {
        filter:alpha(opacity=80); /* For IE8 and earlier */

        This leaves the Slider transparency alone and only addresses the area on the individual pages where text and images will go. You can make it more transparent by changing the .8 to .7, or .6, or even lower, and more opaque by changing it to .9. 1.0 will make it completely opaque. Likewise, change the alpha filter to 60 or 70 or 90 to correspond to the change you make to the “opacity” marker.


        • Laila

          thanks. I´ll try it! 🙂

        • arigoto

          It worked great 😀

        • Tari

          Where do you need to post this code in the style.css? Till so far I can’t make it work (boxes are still as white as snow)

        • dp

          Hi Heidi,

          I know your post was 6 months ago, but thats not too long. I tried your method and that makes the entire container including the text and pictures that placed in the bog all transparent too. How can I make them opaque?
          (I have the newest version and not 1.0.0)

          And second how do I make the top menu completely transparent without having that black box (behind your logo).

          This is my website (
          and this is the example website that have these changes

  • I’m a little unclear about the commercial license. I’m a photographer and I have a website that promotes my work, but it’s also my business. Does that mean I can’t download the theme?

    • dg

      Well if you want to be technical if you are selling things directly from the site then I believe its actually commercial. Just because you put up photos or artwork on your site and thats your business you aren’t making money directly from it. Many of the below people are using shuttershot free and have only photos they took and contact info.

  • aRCHeR™

    can anyone plz tell me how to set menu on right side of the menu bar? m really new here.

    • Thapa

      same here. any one help please ?

      • dg

        in menu of the style.css you entire “right” as shown below

        /* =Menu

        ———————————————– */

        .main-navigation {

        width: auto;

        display: block;

        float: right;

        font-family: Oswald;

        text-transform: uppercase;


  • forexxxgaz

    How can I stop the slider on posts/pages? I want the slider to work only in the home page

  • Kamil

    hello, how remove right sidebar (sponosors) ?

    • dg

      you delete all that is in the sidebar.php or you can start the entire thing with <!–

  • Ale

    My full page template is currently on left side, but I would like it to be on center. Any suggestions? Thanks!

    • dg

      did you remove the sponsors sidebar? If you did then all you have to do is enter this into the style.css:

      height: 900px;

      into this

      .site-content .gallery a img {

      border: none;

      height: 900px;

      max-width: 90%;


      • Jordan

        I erased all content found in the sidebar.php file. Then I added (( height: 900px; )) into the (( .site-content .gallery a img { )) This did not center the content on my pages…. there is still blank space where the sponsors used to be.

  • dg

    Hi all,
    How do I make my container transparent and my profile picture and texts not transparent in the container. (I have the newest version and not 1.0.0)

    And second how do I make the top menu completely transparent without having that black box (behind your logo).

    This is my website (
    and this is the example website that have these changes

  • dg

    Took me 3 days but I found the answer to my problem below… just add this:

    .container_12 {

    background-color: rgba(255, 255, 255, 0.8) !important;


    to end of style.css

    The rgba is the color which is white and the 0.8 is the opacity where 1 is opaque white and 0.0 is translucent clear. The !important will overide anything and the pics and texts will show above the container box. You can change the darkness of the font from gray by changing the color in the global area as seen below. I changed it to black so it can be seen clearer. The font size is sort of small.





    textarea {

    color: black!important;

    font-family: ‘Source Sans Pro’, sans-serif;

    font-size: 15px;

    line-height: 1.6;


    • dg

      you can see my progress at

    • Jordan

      I pasted:

      .container_12 {

      background-color: rgba(255, 255, 255, 0.8) !important;


      to the very end of style.php. When I clicked Update, it gave an error message. I am using Shuttershot 3.0…

      • Jordan

        I added a space between …….rgba and (255…….
        This eliminated the error message and successfully updated, but my pages are still opaque white.

        • dg

          I have Shuttershot 2.2. It is weird that yours is not working… they must have changed something in 3.0 to prevent that code from working. Patch 3.0 must have only been a week old so I don’t know these changes.

  • My Client is using this Theme (Version 1.0.0) – in your list you define “WordPress 3” – is it possible to update? Or we better don’t? Thx for a Feedback

  • Saurabh

    How we can add testimonials on home page of Shuttershot Theme at WordPress?

  • Corrie


    I’ve tried contacting the fabthemes support, but they seem to be offline or something…I don’t get any answers – so I thought I’d post my questions here:

    1. Is there a way to disable the “Pushy” menu on mobile devices?
    2. Is there a way to center the pictures that make up the slideshow on the homepage when viewing the site on a mobile device in portrait orientation? Currently, my slides are being displayed in the top-left corner of my browser window…

    Thanks a lot,


  • Sal4dian

    Hi, could somebody please explain how to remove the
    right-hand sidebar [shuttershot] and centre align the page. I would like to
    remove the sidebar from all pages.

    Thanks in advance


    • Sal4dian

      it’s okay, I’ve sorted it.

      • t

        how did you do it? i only managed to make the sidebar empty…. i want it gone completely.

  • Rogier


    on my website there is a black box in the top menu behind my logo. How do I make this black box just as transparent as the rest of the top bar?

    Thanks in advance,


    • Andy

      i done it with v2.2 version, didnt upgrade as it was giving me problems elsewhere..

      Might not be the best way but its the only way i’ve done it

      Login cpanel,
      Went to file manager and looked for theme.css and search for “site-branding line”

      Then changed the color code to background: #0000ffff and save,refresh page.

      This worked for me

  • Cha

    Hi !!

    I like Shuttershot but I want to make some modifications.

    (I inform you, my english is poor as my css/html knowledges !)

    I did a child template to make some modifications. But when i watch my website with firebug, i see that style.css and theme.css come still from the parent template.. However i activated the child template in the dasboard.

    I did a style.css in the child folder with that line : @import url(“../Shuttershot/style.css”);
    and that one : @import url(“../Shuttershot/css/theme.css”);

    but nothing happens… I don’t understand…

    Moeover, have I to write also about the pushy.css and the grid.css ?

    Do you know where i did an error ? And how to fix it ?
    I hope my request is understable…

    By the way, nice to meet you 🙂

  • nitesh mittal


    I liked your “” theme same I want to create. Please let me know how to create slider images along with transparent content page.


  • Beverley Lu Steeves

    I’ve removed the sidebar (sponsors, search, categories) so it doesn’t pull them in on the pages I create, but now when adding any content to the pages, there is a space where that sidebar was. Can’t seem to figure out where I need to go to center my content on each page without having that space to the right. All content on pages are to the left. What file do I need to edit to get rid of this?

    Anyone else have any ideas? Thanks 🙂

  • Tiina

    Same problem, how to get that sigle blog page to full whole content area. I deleted get_sidebar from single.php, but it leaves an empty space. Ideas?

  • virtu

    Hi.. I am having troubles to set the blog page at I set the Home Page as Static one and the New and Updates as my post pages, but there is no posts on it, do you know what I am doing wrong?

  • Mark

    Hi.. I have some problem with my site I need slides on every page. Slides works fine only on the homepage now. On the fullpages there are solid (now white colour) backrounds. I don’t know what to set or change to have slides on every pages. I wil be gratefull for helping me.

  • Annemarie

    Hi, thanks for all the tips, very usefull comments! I have a question about the menu bar; could the color be changed (don’t like the black much). Couldn’t find where to change it.. Thanks!

    • Alex

      open your style.css in wordpress and look for line “menu”, there are all setting for change alignment and color. black is #000. then just save and refresh your site.

  • Erc Orc
  • iranian graphic designers