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



  • Courtney

    I am having trouble centering the menu. I’ve deleted the logo, and now have only the menu links left, which are all stuck on the right side. Anyone know how to do this?

  • theritz

    Hi please anyone how do i remove this shuttershot logo? i have tried everything and its still there, please helpppppp!!

  • amindzing

    I’d love to see it work… I’ve downloaded, installed the theme and uploaded a few slides, everything according to the tutorial… using slideshow in the options, disabled all plugins but still I cannot see the image at the background. Any suggestions?

    • amindzing

      doh! found it… just in case someone encounters the same problem, the thumbnail needs to have the same url.

  • Nicole_29


    Great theme!

    I have a question: how to insert a still image background except home page? .

    Is this possible?

    Please answer, Thanks a lot!!

    Nicole M.

  • Adam78

    How can I remove or otherwise change the white background on each page? I already have my image as the site background, but don’t want the white background behind each page text.

    • Adam78

      What I really want to do is change it to black and 50% transparent. Anyone know how??

      • Morgan Glassco

        In style.css look for incasing and change the background to this and see if it does what you like. RGBa is not universally compatible so it will not work with IE8 and below to the best of my knowledge.

        This should give you a starting point.



  • Wanabe

    Can I use AdSense in this template?

  • Eyekay

    I love this theme and most issues i had i have been able to solve by reading the old posts except one. i am having issues with the search at the top right and corner of the sample image been attached here.

    How do i get rid of it from the pages i create?


    • Morgan Glassco

      In style.css find the search and hide it.

      #search {


      there may be other ways but that works for me

  • Alicia B

    I am looking for help on this topic. On the preview blog page, it shows a teaser of the text and a thumbnail image of the uploaded photo. The thumbnail image defaults and displays the center of the image, not the full image, you have to click on the blog to get the remainder of the blog and full image.
    Is there a way to have the blog teaser page display a full image, instead of only the center portion of the image that has been uploaded? If so, how? And, if we change it, will it cause another issue with the text wrap?
    We love the theme and all other features, but it appears that int eh default of it choosing onyl the center portion of the picture, the thumbnail picture is not always a good image, pending what portion of the image gets chosen to display as the thumbnail. Examples at Thanks!

    • Yarzar Htoon

      When you got it, Please Let me know 🙂 !!! yarzar4u [a]

  • Morgan Glassco

    Has anoyone setup a child theme yet? I ran into some troubles. I figured out if I add the js folder and images/logo.png to my child theme it works mostly except I cannot get featured images to show up in the category view.


  • Braden Kuznia

    How can I change the Fav Icon on this theme?

  • Braden Kuznia

    I also have an issue with my links not being active in my Blog Posts? Thoughts anyone?

  • Banjer

    Hi, I create a child theme…and it seems to work except for the slides. In the control panel the icon does not appear but it give me the possibilites to set the slides, however when I saved and display the result nothing appear on the site.

    I have to include in addition to some other css file in the child theme?

    • Banjer

      Ok maybe I solved by meself, I include the js and images folder in the child theme and it seems to work.

  • Michael Lanfield

    I have a few questions. First of all I want to delete the entire search bar and the black background behind the search bar that is on top of the white text box in the middle. 2nd I want to delete totally the sidebar so I can write in the whole white text box. And last I would like to delete the current logo and make it larger, I don’t like teh size to be only 125×125, I want it longer/larger

  • redeye101

    I would like a slider background on my homepage only and a white background on the other pages on my site. Any advice? I currently get the slider image throughout the site. THANK YOU!

  • redeye101

    I am using the Shuttershot theme and would like
    the full size slider on my home page only. All other pages I would like a
    white background. Can’t seem to make the correct changes in the
    header.php I have changed is_singular to is_home but not a fix. Any Ideas?




    slideshow : 1, //Slideshow on/off

    autoplay : 1, //Slideshow starts playing automatically

    start_slide : 1, //Start slide (0 is random)

    random : 0, //Randomize slide order (Ignores start slide)

    slide_interval : 5000, //Length between transitions

    transition : 1, //0-None, 1-Fade, 2-Slide Top,
    3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right,
    7-Carousel Left

    transition_speed : 1000, //Speed of transition

    new_window : 1, //Image links open in new window/tab

    pause_hover : 0, //Pause slideshow on hover

    keyboard_nav : 1, //Keyboard navigation on/off

    performance : 1, //0-Normal, 1-Hybrid speed/quality,
    2-Optimizes image quality, 3-Optimizes transition speed // (Only works
    for Firefox/IE, not Webkit)

    image_protect : 1, //Disables image dragging and right click with Javascript

    //Size & Position

    min_width : 0, //Min width allowed (in pixels)

    min_height : 0, //Min height allowed (in pixels)

    vertical_center : 1, //Vertically center background

    horizontal_center : 1, //Horizontally center background

    fit_portrait : 1, //Portrait images will not exceed browser height

    fit_landscape : 0, //Landscape images will not exceed browser width


    navigation : 1, //Slideshow controls on/off

    thumbnail_navigation : 1, //Thumbnail navigation

    slide_counter : 1, //Display slide numbers

    slide_captions : 1, //Slide caption (Pull from “title” in slides array)

    slides : [ //Slideshow Images

    ID, ‘wtf_slide’, true);

    if ($i > 0) : echo ‘,’; else: echo ”; endif; //For IE sake add a coma BEFORE every image offsetting the first one.

    echo “{image : ‘”.$simg.”‘}”;








  • Jimmy

    what version is shuttershot in? I still have 1.0.0 uploaded and didnt know if there were any updates.

  • Ankit Singh

    I would like to ask that along with the slider image I would like to post some text. How to do this? Please advice. Thanks in advance

  • Jimmy

    The theme seems to load really slow on most computers. Mine is ok, but I have a top of the line iMac. Any suggestions?

  • Guy

    How do I align the slideshow to the right side of the screen?

  • xukca

    Hello, friends! I would like to remove the entire “posted by” row and the “category” row… Thank you in advance!

  • Morgan Glassco

    All of a sudden I cannot get my featured images to show up in Category view…? Anyone?

  • Jakub Gawinski

    HELP! I’m a complete noob in this area and I can’t set this theme up at all :/ I’m watching tutorial videos, but I don’t even have these options in my wordpress editor! I’m working on WP 3.8.1, under Windows OS. Can anybody help me? My email is

    • Dan Black

      you need to be in the admin config mode.

      You then login in with your admin account to make any changes.

      • Jakub Gawinski

        I’m in the admin mode. I can make changes, but there are different options than in the video. It’s a…. black magic to me!

        • Dan Black

          Might be as the Theme is now on version 2.0 not 1.0

  • Dan Black

    Hi All, I have managed to tweak a few things with this theme, but struggling to fix the logo issue when viewing on an Iphone., covers most of drop menu. I’m running the style.css version 2.0.0 so all the fixes I see below are based on 1.0. Any ideas? (to review)

    I need it to work like “Jimmy” site, but this this site is using the 1.0 version.

    many thanks


  • 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.

  • mator

    I was able to do it by copying part of the 404 code and inserting on the page i wanted.

  • 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,