Spot Bootstrap WordPress Theme

Modern, responsive, “flat” style theme

Full Width Images and Sections

Set full-width “featured images” and use the included color palette to create stunning colored horizontal sections for your content.

Spot Bootstrap WordPress Theme

Dark, Fixed Navbar and Custom Header

The navbar is fixed at the top of the page and you can upload a custom header.

Spot is an adaptation of the “Spot” theme by Blacktie.co for WordPress. It is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections. The navbar is fixed at the top of the page for easy navigation.

The Spot theme is a child theme for Flat Bootstrap. The site title is displayed in the navbar, so you still retain your site branding while having a minimal fixed header.

It automatically adapts for desktops, tablets, and phones. It is based on the standard WordPress starter theme (_S) and the Twitter Bootstrap CSS framework. The theme was inspired by the HTML/CSS themes from Blacktie.co and color schemes from Designmodo.com’s flat UI.

Features include a mobile navigation bar, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more.

This theme is designed to have a “static” home page and so when previewing the theme and when you first install it, a sample page is displayed. The theme is perfect for showcasing products or photos with a midnight blue page header.

Theme Features

  • Fully responsive theme that changes layouts for desktop, tablets, and phones
  • Dark navbar fixed to the top of the page for easy navigation
  • Modern, “flat” style theme with beautiful color palette
  • Big full-width featured images on any page
  • Full-width colored sections
  • Hundreds of icons from Bootstrap and Font Awesome
  • Variable column footer with 1 to 4 columns

Page Templates

  • Full-width page with colored page header
  • Full-width page without page header
  • Full-width page with three (3) most recent posts (in columns on desktop)
  • Page with right sidebar (default)
  • Page with left sidebar
  • Page without sidebar
  • Site Index with search, pages, categories, tags, and recent posts listings

We’ve even included the ability to have individual posts be full-width as well.

“Shortcodes”

Our “shortcodes” aren’t really shortcodes… you simply use the standard Bootstrap markup, such as < div class=”whatever”>. If you really like shortcodes instead, you can download either of these plugins. They both work just fine with this theme.

  • Colored buttons
  • Colored message boxes (alerts)
  • Tabbed content areas
  • Collapsible content areas
  • Sliders (carousels)
  • Everything else that the Bootstrap CSS framework has to offer!

WordPress Features Supported

custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, fluid-layout, full-width-template, left sidebar, light, one-column, responsive-layout, right sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

Sample Usage

78 responses to “Spot Bootstrap WordPress Theme”

Comments
  1. ErikaErbe Avatar
    ErikaErbe

    Hello, on my website: http://gruenefarm.de/ the menu no longer works (/ferienwohnung). Is there a new version of Spot? I would like to keep the theme. The version does not work on the mobile phone. Thank you!!!

  2. Jan Pittard Photography Avatar
    Jan Pittard Photography

    How do I remove the bottom section text about WE ARE STORYTELLERS. BRANDS ARE OUR SUBJECTS. DESIGN IS OUR VOICE.
    We believe ideas come from everyone, everywhere. At ElderLude, everyone within our agency walls is a designer in their own right. And there are a few principles we believe about our design craft. These truths drive us, motivate us, and ultimately help us redefine the power of design. This is just a sample text widget, add your own in Admin -> Widgets.

    I couldn’t find an easy way to just uncheck a box. I am not a programmer. My site is http://www.elderlude.com. I love the look of this theme.

    1. Tim Nicholson Avatar

      That is just a sample text box added to the Page Bottom widget area. If you add any widget to the Page Bottom widget area, including just a blank text widget, that sample won’t display anymore.

  3. ethanpmusic3 Avatar
    ethanpmusic3

    Hi there, I was wondering if there was a way to remove the menu name text from my header image. On my home page, “HOME” is written across my header image, my social page displays “SOCIAL” on it, and etc. How do I remove this text?

  4. Christoffer Gustafsson Avatar
    Christoffer Gustafsson

    Hi, after the update the site is not full with anymore? Its max with is only 1600px

    1. Christoffer Gustafsson Avatar
      Christoffer Gustafsson

      Nevermind, #page, .navbar, .after-footer {
      max-width: 1600px; in theme-base.css

  5. jose19722015 Avatar
    jose19722015

    Hello Tim.
    Hello Extremely Social. Unfortunately I have hit a wall with your SPOT theme. I was trying to make some changes to the header.php file and when I udated the page, I lost my site completely. When I click on the home page through WordPress the page is, in fact, there but it doesn’t load to the internet. I get an error HTTP 500.

    Is it possible to send me the (header.php) under Flat Bootstrap>Theme Header file so I can replace mine with the default header.php?
    Other than that I’m very pleased with the SPOT theme and this was my only issue.

    Thanks in advance!

    http://www.dreamteamautorepair.com

    1. Tim Nicholson Avatar

      You can just re-download the theme and copy in the header.php.

  6. jose19722015 Avatar
    jose19722015

    The php file I need is under:
    Appearance>Editor>Flat Bootstrap>Theme Header (header.php)

  7. jose19722015 Avatar
    jose19722015

    HTTP 500 is the error

  8. jose19722015 Avatar
    jose19722015

    Hello Extremely Social. Unfortunately I have hit a wall with your SPOT theme. I was trying to make some changes to the header.php file and when I udated the page, I lost my site completely. When I click on the home page through WordPress the page is, in fact, there but it doesn’t load to the internet. I get an error 500.

    Is it possible to send me the (header.php) file so I can replace mine with the default php?

    Thanks in advance!

    http://www.dreamteamautorepair.com

  9. Carlos Araya Avatar
    Carlos Araya

    I’m looking at performance improvement in my spot – themed blog and I found out that the full theme takes almost 15 seconds to finish loading and I’m suspecting this is because of loading fonts with data attributes.

    This also hurts Page Speed Index for the blog.

    I’ve downloaded a fresh copy of spot to do further analysis. Is there a place where I can contribute code and ideas for the theme?

  10. Liz Kane Avatar
    Liz Kane

    Hello Tim, I’ve been trying to center align the top navbar. On larger screens all the content is centered but the the navbar hangs to the left. Is this defaulting because no property is set elsewhere? Any help appreciated. Using spot theme. Thanks

  11. clmoriarity Avatar
    clmoriarity

    Hey, I updated the Flat Bootstrap theme and now my site looks terrible, I think the latest version of Flat Bootstrap is overriding Spot. Ideas on how to fix this? http://www.caitlinmoriarity.com

    1. Tim Nicholson Avatar

      What’s not working for you? I have an update to Spot about ready to go. But I’ve been mostly testing it with the next release of Flat Bootstrap (v2.0). I still need to test it with the current Flat Bootstrap v1.9 to make sure there aren’t any issues.

  12. lucasanderton Avatar
    lucasanderton

    Hey there! Awesome theme! I am trying desperately to get rid of the colorful dots in my site title, and maybe even replace that with an img logo, and I saw some comments asking the same thing, and I even checked out your reference to your guide to do it on the Link Theme, however I couldn’t get this to work. I just need to get rid of the dots in the title. Thanks.

    1. Tim Nicholson Avatar

      I added that “feature”, since the design I based the theme on had that. I should probably consider removing it since some people may not want it. If you take a look at the functions.php file, you should be able to see how to get rid of it. If you need more help, let me know. I’m just sick right now, so it’s hard for me to dig into more details at the moment.

  13. David M. Kasprzak Avatar
    David M. Kasprzak

    Hello. Just installed Spot on a brand new wordpress site and I can’t get the default footer content to remove itself. Placing other widgets (including blank Text) does what it’s supposed to if I switch over to the Bootstrap theme, but not when using Spot.

    Also, is it possible to have the header image appear only on the Home page?

    Thanks!

    1. Tim Nicholson Avatar

      See above about the footer. For the header, remove the “custom header”, but then upload the same (or a different 1600x900px image) as the “featured” image directly on the home page itself (or any other page or post you want a unque “header image” on).

      1. David M. Kasprzak Avatar
        David M. Kasprzak

        Thanks, Tim. The fooer is A-ok. I am struggling a bit with removing the custom header, though. Is that something I can only do if I make the home page a static page? I love the look of the home page as it is, just don’t need the large graphic on post pages.

        LMK how to go about it if/when you can
        Here’s the site, btw: http://www.theowliswise.com/

        1. Tim Nicholson Avatar

          Go to the Customizer under Header Image and hit Hide Image. That header is designed to be site-wide. If you want certain pages to have a header image, upload a large (1600x900px) image as the “Featured Image”.

  14. Liz Kane Avatar
    Liz Kane

    Hello, I updated to Flat Bootstrap 1.7 and now the footer widgets will not display, cannot get rid of sample Call to Action, even after adding blank widgets. Tried copying and pasting over sidebar_footer.php from github files but no joy. I’ve limited knowledge here so afraid I’ll mess up further. Would appreciate any help. My site is lizkane.ie Thanks

    1. Tim Nicholson Avatar

      It was a bug when a language translation changed the name of the widget area. It’s fixed now! Just update your theme.

      1. Liz Kane Avatar
        Liz Kane

        Thank you Time, I updated Spot theme with files from wordpress.org unfortunately footer widgets are still not being recognised. Like Vishu Kamble above, since Flat Bootstrap update to 1.8, footer widgets are not recognised in the customise widget area and even though I create additional new blank widget, the call to action box persists, even after uploading latest files from Spot 1.4 just now.

        1. Liz Kane Avatar
          Liz Kane

          Deactivating and reactivating theme was needed. Thank you Tim

          1. Liz Kane Avatar
            Liz Kane

            Got so excited about foot widgets (3 of them) being back did n’t notice that the ‘call to action box’ is still there. Added blank text box to footer widget which showed, still call to action box persists. Only option seems to be to change the sidebar-pagebottom.php file?

          2. Liz Kane Avatar
            Liz Kane

            Sorry, I was confusing page-bottom with footer area to get rid of call to action button. All sorted now thanks

  15. Vishu Kamble Avatar
    Vishu Kamble

    Hey Tim, How do I edit the PageBotoom widget in Spot?
    There are no widgets in my widget section but the inspect element shows its a page-bottom widget. There are no widgets in the customize option too.

    1. Tim Nicholson Avatar

      It’s a sample widget. Just add a blank text widget and it will go away.

  16. webg1rl Avatar
    webg1rl

    Hello, I found this theme that is exactly what my client was looking for, but I am totally unfamiliar with Bootstrap. So far I’ve managed OK, but I can’t seem to get the logo and the menu items to align better. I just want either the logo to go up a little, or the page items to move down so the logo does not look so out of place on the navbar. I have spent hours trying to figure this out. Any help would be greatly appreciated! Here is the link: http://120.736.mwp.accessdomain.com/?GD_NONCE=174311d8f8
    Thanks!

    1. Alberto Treleani Avatar
      Alberto Treleani

      hy webg1rl, can you teach me to change the default logo with the brand logo please? Thank you

      1. webg1rl Avatar
        webg1rl

        Hello Alberto,
        I found two methods for accomplishing this mentioned in the support forums, but I could not get the CSS method to work. I used the first method, which was editing the header.php file. I replaced with the image link wherever it was mentioned. The CSS method is mentioned at the bottom of the page here: http://xtremelysocial.com/wordpress/userguide/

        Maybe you will have luck with it, but I could not get this method to work:

        `.site-title a {
        background: url(‘http://yourdomain.com/images/logo.png’) left top no-repeat;
        display: block;
        text-indent: -9999px;
        width: 100px;
        height: 100px;
        }`

        Good luck! I am still having alignment issues with the logo and menu links. Let me know if you have any suggestions!

    2. webg1rl Avatar
      webg1rl

      I don’t know how to mark this topic closed, but I figured it out on my own by adding margin-top: 0px; to .navbar-brand. Once the padding was removed above the logo, it aligned with the menu items.

      1. Alberto Treleani Avatar
        Alberto Treleani

        Thank you webg1rl 🙂 I will try both the way 🙂

  17. Alberto Treleani Avatar
    Alberto Treleani

    Hi. I love this theme, but i have a problem. I want to change the website logo with an image, but i don’t konw php language. Someone can help me step by step? Thanks to all

  18. Johanna Sänd Avatar
    Johanna Sänd

    Hello, I am super happy to have come across your theme with all the freedom in customizing that comes with it! Is it possible to change the individual site header (the blue one just below the navigational links) into an image? I can’t find an option for that, change the css .container or figure out how to do it with a plug-in (Dynamic Headers). Help would be greatly appreciated.

  19. astcreatives Avatar
    astcreatives

    Hello Tim,
    Thank you for this great job welldone ! I have just one request. Can i change the copyright link ?

  20. Christoffer Gustafsson Avatar
    Christoffer Gustafsson

    Hi, I´m just loving this theme! Is it possible to change the max-width of the template, where?

    1. Tim Nicholson Avatar

      If you are just talking about how wide the entire page itself spans, that should be pretty easy. The CSS that limits the page to 1600px looks like this:

      /* Limit the page for really wide screens, such as an iMac */
      #page, .navbar, .after-footer {
      	max-width: 1600px;
      	margin: 0 auto;
      }

      Note that wide images in the header or page content itself will still be limited to 1600px wide. That would be harder to override as you’d have to change the PHP code.

      If you are talking about changing the max width of the actual content area itself, that is all based on Bootstrap and would be really hard to change. Bootstrap uses a “container” class and it drives the grid system and has all kinds of media queries to handle the responsiveness built into it.

  21. edmichel2014 Avatar
    edmichel2014

    Tim:
    Thanks for your comment and info. I did try the post excerpt field and it that did not not work. I appreciate the code for the plugin. Now, as a newby, I just have to figure out to save the plug in to a file UNLESS, you already gave that to me and I can’t figure it out!

    Take care,
    Ed

    1. Tim Nicholson Avatar

      Copy and paste it into a text editor. You may want to change the plugin name. Save it with a file name like my-site-functionality.php and upload it via FTP to your WordPress directory under /wp-content/plugins/. Then you can activate the plugin through the WordPress admin. Or a quick search turned up this plugin which does it, plus a bunch of other things.

  22. edmichel2014 Avatar
    edmichel2014

    Hi Tim:

    Spot is a great theme and easy to use. I am having an issue with a plugin that I am using in a post. I place it in the text box and, on the opening page it will not show the info. However, when the headline or read more is clicked to go to its own page, everything works perfect. Help! http://www.DFWFunEvents.com is my site.

    1. Tim Nicholson Avatar

      It looks like your site is down, so I can’t view it. However, the issue with the plugin is likely that its only displaying on the full post not on excerpts. All my themes (so far) use post excerpts in the blog pages. You might try pasting the shortcode into the “Post Excerpt” field, although I’m guessing WordPress strips that field of things like shortcodes.

      1. edmichel2014 Avatar
        edmichel2014

        Tim…..I guess one should know what their own website is ….. http://www.DFWFunGuide.com Some Mondays are tougher than others! Thanks, Ed

        1. Tim Nicholson Avatar

          Thanks, nice site! Have you tried putting the text you want and the shortcode itself in the “Post Excerpt” field? With my themes, I’m trying to keep the “options” to a minimum and leverage built-in WordPress functions. You can actually put the full post in the excerpt field and the theme(s) will display it. However, WordPress doesn’t activate shortcodes in excerpts by default. You can create a very simple plugin that will do that. I recommend a plugin as opposed to editing functions.php in the theme because you’ll want this behavior regardless of the theme you use.

          
          
  23. Wendy Flor Avatar
    Wendy Flor

    Hi! I made the mistake of putting my own text at the pagebottom sidebar. I edited the text at the html settings. Now, i get this message:

    Parse error: syntax error, unexpected ‘button’ (T_STRING) in /homepages/4/d258855230/htdocs/wp-content/themes/spot/sidebar-pagebottom.php on line 52 – See more at: http://myrockingcradle.com/#sthash.ubE6NNPp.dpuf

    Please help! Thanks.

    1. Tim Nicholson Avatar

      It looks like you fixed it, but it would be much better if instead of editing the php, you created a text widget and placed it in the Page Bottom widget area.

  24. Jumair Macabago Avatar

    Hi, Tim!
    I really love your theme. I want to use it even though I can’t change the footer copyright.
    Can you help me? I’m having a hard time putting a link on the Social Logo below of the Theme. I want to social logo to really like that. I don’t want any change about it. I love the way it is. Would help me now? Thank you for creating this Theme.

  25. Kristen Barr Avatar

    Any way I could get the name of the font in this theme? I’d like to make my images fluid with the font theme. Thanks!

    1. Tim Nicholson Avatar

      All of my themes (so far) use Raleway (similar to Arial) for the headings and Lato (similar to Helvetica) for the body text. These are both free Google fonts, so you can easily install them on your computer for use with Photoshop or whatever imaging software you want to use.

  26. bitzcom Avatar
    bitzcom

    Hello Tim!

    I’m using Spot theme + wordpress-4.1.1-es_ES (from https://es.wordpress.org/) and the Flat_Bootstrap/sidebar.php file is overwriting my custom sidebar and widgets no matter what I do it always defaults the sidebar to: widget_search-widget_pages-widget_tag_cloud.

    When I change the main WP language to english, german or french the custom sidebar is displayed properly. I need the dynamic sidebar back, any suggestions?

    1. Istvan Horvath Avatar
      Istvan Horvath

      This issue still exists (and was left unanswered even at that time). Using WP 4.3.1-HU with this theme and the default (right) sidebar widgets stay there no matter what widgets are selected and added in the Appearance > Widgets subpanel.

      1. Istvan Horvath Avatar
        Istvan Horvath

        It might be the issue is somewhere in the parent (Flat Bootstrap) theme because the sidebar behaves in the same way: when switching language, the widgets stop working and only the default (hard coded) content of the sidebar is displayed.

        1. Tim Nicholson Avatar

          I’m sorry you are having these issues. It sounds like there is probably a bug in the actual Spanish translate file itself (/wp-content/themes/flat-bootstrap/languages/es_ES.po). Can you turn on debugging temporarily in WordPress and see if that file is indeed returning an error? Add define(‘WP_DEBUG’, true); in wp-config.php in your root WordPress folder then set it back to false..

  27. lisabaughn94 Avatar
    lisabaughn94

    Hi Tim, Spot is really cool, thanks!

    I want to delete the Leave A Reply comment options on all my Spot pages. I went to Home in WP like was suggested above, and there was a link to the Discussions area, but no check box to disable comments. I’ve been to Discussions and unchecked all boxes there, but the Leave A Reply box is still there. Can you help? Thanks so much!

    1. Tim Nicholson Avatar

      Its not in the discussions area, its on the individual pages (and posts). Thanks for the kind words about the theme!

  28. clmoriarity Avatar
    clmoriarity

    I just installed Spot as my theme, and I’m noticing a weird glitch. When I go to my homepage (caitlinmoriaritywriter.com), the icons all show up as boxes at first. Reloading the homepage doesn’t do anything, but if I go to another page on my site, like the About page, the icons *do* show up. And when I go back to my homepage after clicking on the About page or another page, then the icons on the homepage do show up. This glitch shows up on two different computers, and in both Chrome and Firefox.

    1. Tim Nicholson Avatar

      I don’t see any issues with icons on your site either in Chrome or Safari. Your site looks great! According to Font Awesome, the only browser not supported is IE7, which is ancient.

      1. clmoriarity Avatar
        clmoriarity

        Huh, that’s weird. Well, as long as it’s not showing up for anyone else, I can live with it. And thanks for the compliment! I still have a lot of tweaking I want to do on my content pages (like putting up a grid portfolio, but ugh, resizing all those images by hand). But overall I really like the theme and how my site looks with it. I may mess around with the color palette next so that it doesn’t quite look so similar to the sample page.

        1. Tim Nicholson Avatar

          Take a look at the color palette built into the parent theme (and all its child themes, including Spot). All the colors are designed to look good together. Our Theme Shortcodes. Also, each child theme has its own sample page that can be imported in the /samples folder and you can easily mix and match between themes. For the grid portfolio, try using the Jetpack plugin. Our Link Theme Sample Page uses it. When you choose the images to include, you can put a URL on each one to link over to your individual portfolio item pages (although I didn’t set all that up with the sample page).

  29. Rusty Williams Avatar

    Hi Tim. I really like the Spot theme. One tweak I’d like to make is to have more meta information display in the header of the posts. Or more specifically the author name and the more traditional links to other posts by that author. I see where you’ve “toned down” the info in the header. I tried changing that but wasn’t successful. Is there a quick change to the CSS I can make to show the author name next to the post date?

    1. Tim Nicholson Avatar

      I coded the theme to display the author name and link to other posts only if the blog has more than one author. You’ll see the code in content-post-header.php in the parent theme. You can comment out the condition of is_multi_author() if you want to always display it. Do you have more than one author are you the only author but still want to see your name and link there?

      1. Rusty Williams Avatar

        Thanks. I’ll try commenting out the condition or maybe a simpler solution it to have at least one post by a different author. We have two admins, but all the posts have been by one person so we never discovered the “if 2” rule.

  30. Takin Kroop Avatar

    Hi!

    I’m having trouble adding the call-to-action box on the bottom. It just doesn’t fill the whole width. What am I doing wrong? –> takinkroop.com

    1. Tim Nicholson Avatar

      Add this to the very beginning of the text in the text widget: <\div><\div>

      1. Takin Kroop Avatar

        Thanks for the quick reply Tim!

        Also – seems that header and footer doesn’t run to the edges either? (On a 1920px monitor)

        1. Tim Nicholson Avatar

          I have limited the full width of the site to 1600px, mainly because the header images I include with the themes are that width, but I also figured the site would look strange if the header/footer stretched the full width of an iMac. You can easily change this, though. Just edit the max width in number of px or set it to 100%. Here is the theme’s CSS related to that:
          /* Limit the page for really wide screens, such as an iMac */
          #page {
          max-width: 1600px;
          margin: 0 auto;
          }

      2. Takin Kroop Avatar

        Adding didn’t work either 🙁

        1. Tim Nicholson Avatar

          Ok, when you pasted the , it replaced it with special HTML characters. So that’s why your site is now showing those closing divs as text above the text box instead of actually closing the div’s that need to be closed to expand full-width. You can fix try to fix that or better yet, please update to the latest version of the Flat Bootstrap parent theme (v1.2) as it is now full-width by default without needing those closing div’s.

  31. Deknarok Sodality Avatar

    Hi,
    How can i change social logo on footer bar and does it possible to put link in to that.
    and on sample page [http://xtremelysocial.com/wordpress/samples/spot-sample/] on topic LATEST WORKS how do i do like that .
    Thanks for your theme, Love it.

    1. Tim Nicholson Avatar

      The easiest way to “edit” the social footer is to view the page source and copy the HTML. Then add a new text widget and paste the HTML there. Then you can edit it. Once you add your first widget to a widget area, like the footer, the samples will no longer display.

  32. John Nkume Avatar

    HI tim I struggleg to change the color with picker in the spot theme. so I used Pratt instead.

    1. Tim Nicholson Avatar

      For now, you can add this to Spot’s style.css file to fix the issue with not being able to change the background color:

      #page { background-color: transparent; }

      However, this is an issue with the parent theme and I’ll fix it in the next release.

  33. Hlubi Rene Jakuja Avatar

    Hello Tim. I have been trying to change the background color of spot to no avail. I would like to change both the left and right side bar area, and content area from the standard grey to white. How can I do this. my site is askjeannuke.com

    1. Tim Nicholson Avatar

      To change the background color, go to Customize -> Colors and set it with the color picker. It looks like you’ve already figured that out by looking at your site, though.

  34. Dillon Freed Avatar

    Hi – love the theme! Was wondering if it was possible to swap in a custom logo? Thanks so much!

    1. Tim Nicholson Avatar

      See here for tips on how to add a custom logo.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.