Set up your home page

We think this theme looks best with a full-width page with a large image at the top. To do that, go into WordPress Appearance -> Customize and set the option for Static Home Page to one of your pages. You’ll also need another page that doesn’t need any content it, but you will assign it as your blog page.

To add a full-width image to your home page (or any page for that matter), just use an image that is at least 1170px wide and for the home page at least 640px high. For any page except the home page, the image can be as short as 400px high. Set the Title, Caption, and optionally the Description and they will display centered in a white font. Full-width images can be set on any page. They will be full-width even on pages with a sidebar.

To set your home page (or any page) to full-width, You can choose either “Full Width” or “No Sidebar” for the page Template. Its under the Page Attributes section in the WordPress Editor. The full-width one will let any colored sections you add to your page fill the entire width of the screen. However, you will need to be sure to contain your actual page content.

The easiest way to do that is to set the WordPress editor to “Text” mode. You’ll see a button that says “Full Width”. Click on that and type in your content. Click on it again when you’re done. It will insert the following:

<div class="section offwhite"><div class="container">;
Put your content here.
</div></div>

The section adds padding and you can set the color to any one of the ones in our included color-palette. See the next section for details. Also read on for more information about all the included page template and more about the buttons we added to the WordPress editor.

If you use the “No Sidebar” template, you won’t have to mess with the container div, but your images and colored sections will have margin on the sides.

While you’re in the editor, you may or may not notice that we’ve added a new section called Additional Post / Page Options. There you will find a Subtitle field that we encourage you to fill out at least for pages. It will display under the title of the page or post. Most premium themes have this and it looks great, so we included it.

NEW! If you want to display some text or another widget on your home page, you can use the Home Page widget area. This will display regardless of whether you have a static page or your blog set as your home. In the latter case, its a great way to create an “intro” sections to your website even when you want users focused on your blog.

If you want to have a colored background for a home page widget (or Page Top and Page Bottom widget areas), its easiest to use the Simple CSS for Widgets plugin. It adds a CSS Class field to every widget. Create a text widget and add the classes “section bg-midnightblue” or any other color from our color palette.

If you really don’t want to use a widget, you can do the same thing this way. Leave the widget title blank and put all of this in the widget text area:

</div></div>
<div class="section bg-midnightblue">
<div class="container">
<h1>Welcome to our Website!</h1>
<p>This is an optional widget area that you can display on all your pages or just your home page. It works when the blog is your home page.</p>
</div></div>
<div><div>

The first two /div’s break out of the default widget div’s. The last two div’s are needed because the default widget will of course end its own div’s. Be very careful with this, though, because if you mess this up it will break your site layout.

Set theme options

One of the first things you’ll want to set is your header menu and optionally a footer menu. Use the standard WordPress menu editor to build those and set theme there or in Appearance -> Customize.

If you have a drop down list for your primary site navigation, the parent item should only be a grouping title with a “#” value for the URL parameter. The Bootstrap navbar requires a click to open the drop down list so any link that is set in the parent item will not work.

The footer navbar only allows for a depth of one drop down level. Its not designed to be a primary nav.

As for the header, you can get rid of it altogether if you want and your site title will display in the left part of the navbar. In Appearance -> Customize, uncheck “Display Header Text”. In this case, your site name will appear in the left part of the navbar.

However, if you would like to upload a custom background image that sits behind your site title and tagline, you can do that there as well. The image should optimally be 1600px x 200px, but the theme will let you upload different sizes. You just might need to add some CSS to get it to look right.

You can also upload a background image from here as well. However, this theme was designed to be “full width” so you won’t really see it very often. For really wide screens, like an iMac, we did cap the width of the theme at 1600px so the background will show in that case. But if your screen is narrower than that, you won’t see it.

Also note that if you change background color, that only shows beyond 1600px wide as well.

Set colored backgrounds in the content on your page or post

To add a colored section to your content, just add a section like you did above and change the color to one of the ones below. These colors are all perfectly color-matched to go together and are common colors for “flat” style websites. They are largely taken from Gizmodo’s flat-ui, but we’ve given them easy to remember names.

  • bg-white
  • bg-offwhite
  • bg-lightgray
  • bg-gray
  • bg-darkgray
  • bg-lightgreen
  • bg-darkgreen
  • bg-brightgreen
  • bg-darkbrightgreen
  • bg-yellow
  • bg-lightorange
  • bg-orange
  • bg-darkorange
  • bg-blue
  • bg-darkblue
  • bg-midnightblue
  • bg-purple
  • bg-darkpurple
  • bg-red
  • bg-brightred
  • bg-darkred
  • bg-almostblack
  • bg-notquiteblack
  • bg-black

When you use a colored background, it fills the width of the screen. The fonts and link color on the lighter colors (up through dark gray) and the shades of black are left untouched. The fonts are set to white and the link is white with an underline in the middle colors (light green through red). The reason we put the underline on the links is because one of the main complaints about flat websites is that the user can’t tell what’s clickable. This way they can easily tell and it looks fine anyway.

Add full-width images as “sections” in your content

In addition to colored sections, you can easily add a full-width image as the background to a section. It works similarly to when you add a featured image to a page, except you can add them anywhere in your content.

Just choose the standard WordPress “Add Media” button and select or upload an image. These images should be 1600px wide and at least 400px high. Fill whatever you want in the “Caption” field and it will be displayed, centered, on top of the image. You can use <h1> and <h2> tags for big fonts. Anything else will display in the normal text size (which is 18px by the way).

Format a page differently using this theme’s included page templates

Since this theme is designed to be full-width, we’ve included a number of page templates for that. We’ve also included an additional template to move the sidebar to the left (default is right for non-full-width pages). The page templates are described well in the actual post editor, but here is more information on them.

Default Template: Left sidebar

Full Width: No container, so you can insert full-width colored sections and images. Be sure to wrap your content in <div class="container">content here...</div> so it has sufficient padding around it.

Full Width No Content Header: Same as above, except doesn’t display the page title at all. This way you can insert your own image or colored section or whatever you want to be the “header” of your page.

Full Width with Recent Posts: This is full-width like above, but is great for your home page in that it displays 3 recent posts at the bottom of the page.

Full Width with Sub Pages: Ah yes. This template is great for listing products, your portfolio or whatever without needing a plugin or custom post types. Just add this template to a page and all of its sub-pages will display in a grid style layout with image thumbnail and title.

Left Sidebar: Just like the default template, but with the sidebar on the left. Maybe you like that better than on the right?

No Sidebar: If you don’t want to mess with the true full-width templates and having to remember to wrap stuff in a “container”, just use this. Its works like a normal page but with no sidebar. You’ll have a bit of margin on the right and left, but no big deal.

No Sidebar or Content Header: Just like above, but doesn’t display the page title. Put whatever you want at the top of the page instead.

Site Index: What theme isn’t complete without a site index template, right? Especially in the days of “mobile first” where menus are kept simple, this is a great way to let readers explore your whole site. And for no extra charge, the “Page not Found (404)” page also includes this same site index.

Use the included buttons to quickly add common elements to your page or post

This theme includes two “quick tags” in the WordPress HTML editor to add a normal full-width sections or a special “header” section that has a thick bottom border. You just need to make sure you are in Text mode instead of Visual mode in the editor. The quicktags are as follows:

fullwidth – For use in a full-width page template or fullwidth article. Inserts a section and container for your content. Default color is offwhite, but you can change it to any of our included colored backgrounds.

featured – If you want a full-width colored section that perhaps contains a smaller image (eg. screenshot), you can use this. Default is also offwhite, but looks great with a color.

What these quicktags are doing is simply inserting some HTML to utilize the included Bootstrap capabilities. Read on for more information about Bootstrap. We can add more if people want, but read on to see other ways you can do this.

Use Bootstrap to add cool stuff to your pages or posts

This theme is based on Bootstrap. It is an open-source CSS framework from Twitter that is mobile-first, fully responsive, and cross-browser tested. It lets you add columns, tabs, navbars, carousels (sliders), icons, lists, panels, tooltips, and much, much more to your content.

One thing you don’t want from Bootstap, though, is their default settings. Your website will scream “Bootstrap”. So we’ve tweaked all the settings for you already to give you a nice color palette, great looking fonts, and a “flat” look.

You can check out our “Shortcodes” page on our website to see many of the Bootstrap features in action. Just go to Our Theme Shortcodes

For the full documentation, please see the Bootstrap website at getbootstrap.com/compontents and getbootstrap.com/css. Be sure to check out the components section and javascript sections there as well. All of that works perfectly in this theme.

Add icons to your pages and posts

Bootstrap comes with a bunch of icons you can use. Check them out here: Glyphicons. You’ll want to put these in a <span> tag or the WordPress visual editor will strip them out. When in Text mode in the editor, click the button that says “icon” and a sample will be inserted for you as follows:

<span class="glyphicon glyphicon-heart icon-lg">&nbsp;</span>

We put the &nbsp; code in there just to add a space as WordPress likes to strip out HTML tags that it thinks are empty.

But wait… there’s more! We’ve also included Font Awesome which takes the whole icon thing to another level. Particularly useful are the social networking icons, but there are tons more to choose from. Just like Bootstrap’s icons, these icons are stored as a font file meaning they are pixel-perfect at any font size even on retina (high pixel density) displays like the iPad, Macbook Pro Retina, high-end Android tablets, etc.

To use Font Awesome icons, just put the following in your content:

<span class="fa fa-facebook"><span>

Please see the documentation for the full list of icons: Font Awesome.

One more cool thing about icons… you can use them in menus as well if you’d like. fa-home, fa-user, etc. are all very useful for this.

Add buttons to your pages, posts, and/or widgets

In addition to the all the standard Bootstrap buttons, we’ve also added a couple of additional buttons that work great on colored sections. One is hollow, meaning it just has the border and the center let’s the background color show through. The other is a “transparent” button that adds opacity to the background color to make it look darker. Use them like this:

<a href="whatever.com" class="btn btn-hollow">Hollow Button</a><a href="whatever.com" class="btn btn-transparent">Transparent Button</a>

Set a POST to full width

Yep, you can do that! Very few themes have this feature because its not a standard part of WordPress, but we’ve added it because this theme is so focused on full-width. When editing a post, within our Additional Post / Page Options section there is a checkbox to display the them full-width. It works exactly like the “Full Width” page template described above.

If you are concerned that the text is too wide to be read easily on large screens, use the Bootstrap grid system (columns) to narrow the text only on large screens. This works perfectly for that:

<div class="container"><div class="row">
<div class="col-lg-8 col-lg-offset-2">
Content goes here.
</div>
</div></div>

What this does is contain the text to about two-thirds of the screen width (Bootstrap’s grid is 12 columns), but ONLY on large screens. For smaller screens, it displays full width. Now you are starting to see the power of Bootstrap’s grid system 😉 You can also use col-lg-10 and col-lg-offset-1 if you’d like it a littler wider.

Add widgets to the sidebar and optionally the footer, page top, page bottom, and home page widget areas

We’ve included lots of widget areas. Of course there is an obligatory sidebar that you can put whatever you want to in. However, if you are using mostly full-width pages and full-width posts, its only going to display on the archives and search pages.

So you may want to add sections to the page bottom which display after your content and before the footer. Full-width colored sections look great there for calls to action or whatever else you want. We recommend installing the Simple CSS for Widgets plugin, so you can just add “bg-gray” or whatever color you want to it. We think these actually look better than loading up the sidebar, but that of course is entirely up to you.

Remove the sample Page Bottom and Footer Widgets

Most of our themes have sample widgets that display when you first install the theme. These are just examples of some of the types of things you can do with the widget areas.

If you added any widgets to the Page Bottom and Footer areas, the default widgets will no longer show. However, if you don’t want to add any widgets to those areas and also don’t want to show the default ones, you can simply add an empty text widget to each area.

NEW: The Home Page widget area obviously will display only on the home page, but it works whether you have a static page or your blog set as your home page. In the latter case, it’s a great way to add an “intro” section or sections to your home page even though you want the blog to display there as well.

Install additional plugins that work well with this theme

When you first installed the theme, you may have noticed a banner at the top of the screen that talked about installing required and optional plugins. To be sure, none of these plugins are required. However, they are very useful additions to this theme. As of initial release, the following plugins are in the recommended list.

Jetpack – This plugin from the makers of WordPress themselves adds a ton of features. The most relevant for this theme are: Tiled Galleries and Widget Visibility. The latter can be used to display certain “Sidebar” or “Page Bottom” widgets only on certain pages.

Simple CSS for Widgets – Great way to easily add a background color to an entire widget, especially the ones in the Page Top, Page Bottom, and Home Page widget areas.

Bootstrap 3 Shortcodes – This plugin supports most of the Bootstrap components and makes it easy to insert the HTML and then you can easily edit it. Its a lot like the quicktags we included, but much more comprehensive.

There are other Bootstrap Shortcode plugins out there as well and they all will work well with this theme. Some of them require you to uncheck a box to indicate that you are already using a theme that includes Bootstrap so the plugin doesn’t try to add another copy of it. That’s primarily the reason we chose to recommend the one above is simply because it doesn’t try to add Bootstrap it all. It requires a theme like this one that has it.

Regenerate Thumbnails – This is very useful when first setting up the theme because it allows you to resize all your featured images to match this theme’s standard sizes. See below section for more information.

Set Post “Thumbnail” Image Sizes

In your blog, this theme displays “thumbnails” that are 640px x 360px. If you don’t want to have an extra image size stored on your server, go into Appearance -> Media and set the Medium thumbnail size to that.

While you’re in there, you can update the Large image size as well. Of course you don’t have to, but the maximum content area that this theme displays is 1170px wide. So you probably don’t want to go any wider than that. The theme will resize it on the fly in the viewer’s browser, but its a good practice to set this so it doesn’t have to do that.

Note that these settings only change the sizes of new images that you upload. So you can use the Regenerate Thumbnails plugin to resize all of your existing images.

Frequently Asked Questions

Why did you write this theme and why should I use it?

Great question! There are thousands of WordPress themes and dozens of Bootstrap themes, but almost all of them are designed with a maximum width. Most of the Bootstrap themes are also only for developers, not users, with just the basic ugly Bootstrap sticking out like a sore thumb. Most of the Bootstraps themes aren’t based on a core WordPress theme either, so they can be difficult to figure out how to adjust the styling.

We developed this theme to be unique in these key ways:

  1. It is based on the WordPress core “starter theme”, so you already know how to style it and override templates and such in a child theme without learning anything new!
  2. It is based on Bootstrap for cross-browser capability in a fully responsive theme with tons of components that you can use in your content, such as buttons, navbars, sliders, etc.
  3. It is designed to be a modern, “flat” (or technically “almost flat”) theme with full-width colored sections and full-width images. This really brings your content alive and allows the reader to focus on that content instead of the theme itself.
  4. Its open source AND completely free. Most themes like this are considered “premium” themes and cost money. Our hope is that user’s will love it and theme developers will start using it as a core “framework” as well.

How come you haven’t included a bunch of “shortcodes” like most of the WordPress themes OUTSIDE WordPress.org

Well, don’t get the WordPress community started on this topic 😉 Themes are supposed to be just the theme. Plugins are supposed to allow users to easily format content or automatically add content. In fact, WordPress won’t approve any themes with actual shortcodes in them. Plus, if a theme includes shortcodes, you are locked into that theme because those shortcodes will break on any other theme.

This theme includes a few “quick tags” in the WordPress HTML editor to add sample icons, full-width sections, etc. See the section How to Use This Theme above for a list.

Of course you can always copy any of the samples from the Bootstrap website as well.

However, if you really want true “shortcodes”, we’ve recommended a couple of plugins for that and you’ll see those recommendations when you install our theme. This way, you can still have the convenience of using shortcodes, but switch to any Bootstrap theme and not lose your content.

Why is there a full-width checkbox on my posts?

WordPress doesn’t let you have post templates like the page templates above. So until then, we’ve included a checkbox that will display your post full-width just like the fullwidth page template. This template is great for full-length articles, especially when you have one or more fullwidth images in them.

See the section above How to Use this Theme for more information on the various page templates and full-width post template.

How do I change the link colors?

Changing the link colors in the main post / page content area is pretty easy with CSS:

a { color: #16a085; }
a:hover, a:focus { color: #19B798; }

Note that links in the footer, copyright section, or any colored sections you’ve added to a page will still use their original link colors. This is so the links look good and don’t have conflicting color combinations.

How do I replace the site title with a custom logo?

After WordPress.com releases their official plugin for custom logos, we plan to support that. In the meantime, you can do it with something like this in CSS:

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

130 responses to “How to use our Bootstrap Themes”

Comments
  1. Tim Nicholson Avatar

    Hi, Thanks! I thought about adding breadcrumbs to my themes, but there are already lots of plugins to do that. I don’t really have a recommendation though… I’d just do a search.

  2. onlinetutorsindia Avatar
    onlinetutorsindia

    Great themes and documentation? How do we add breadcrumbs to the Spot theme?
    Thanks

  3. ritgrad83 Avatar
    ritgrad83

    Hello Tim

    I just started using your Flat Bootstrap theme and would like to see if I can mimic the header area from Elegant Themes Extra theme layout. Here is the Elegant Theme version – http://richardmeagher.com/blog/. Notice how I have the camera and the site title and subtitle on the left and the menu on the right. Is this possible in Flat Bootstrap?

    Thanks

    Richard

  4. allanpfreitas Avatar
    allanpfreitas

    Hello Tim! I’m using your template in my current site, but I’m having a issue with the logo. I’m using this CSS code that you shared:
    .site-title a {
    background: url(‘http://yourdomain.com/images/logo.png’) left top no-repeat;
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 100px;
    }

    But my logo in Mobile is not responsive, in Desktop looking great. Can you help me?
    I tried to add a custom CSS with max-width: 100% height: auto without success.

  5. zakcowen94 Avatar
    zakcowen94

    Somehow managed to mess my whole page up? any suggestions on what i’ve done? I was trying to remove the search bar and categories part of the nav? URL is http://practicallyperfectweddingbelles.co.uk/ regards Zak

    1. Tim Nicholson Avatar

      It looks like you figured out those were widgets added to your sidebar. Your site looks really good!

  6. Nicole Dieckhoff Avatar
    Nicole Dieckhoff

    Hi Tim, thank you for this cool template. I like it a lot an have customized the colors and fonts in the css sheet to meet my requirements, all fine. But what is troubleing me is, placing the sidebar to the left. I noticed there is a left-sidebar.php file, but i simply can’t figure out how to use it. Do i have to replace some other file with this one? I guess it is quite easy, but i cannot find a how to do it. Perhaps i have to exchange files in my filsystem? I am not so much in php, but i suppose i wouldn’t have to do any coding to get my sidebar to the left. Could you please give me a little hint how i can put the sidebar to the left? That would be great, thank you in advance and greez from germany, Nicole

    1. Tim Nicholson Avatar

      The theme is designed to let you set individual pages to use a left sidebar. You do that by selecting the template from each page itself in the page editor. To change it universally, I would look at the code in sidebar-left.php and apply it to sidebar.php (the default sidebar). The trick is this CSS class: col-md-pull-8. Bootstrap literally makes it that easy.

  7. richardmiller587 Avatar
    richardmiller587

    Hi – I am enjoying the Flat Bootstrap theme, but have encountered one problem I can’t get to the bottom of.
    So that I could tailor the theme, I loaded Flat Bootstrap and Flat Bootstrap – Child into the Themes level directory intending to messa round witht the Child theme. However, If I use the parent theme and select the no-header no-sidebar template, I get a page with no header or sidebar. If I switch to the same template in the child theme, I get a search box and the following objects below the text:

    Recent Posts

    Hello world!

    Recent Comments

    Mr WordPress on Hello world!

    Archives

    August 2014

    Categories

    Uncategorized

    Meta

    Site Admin
    Log out
    Entries RSS
    Comments RSS
    WordPress.org

    I can’t work out where they are coming from in the template, so I can’t fix them. Any ideas?

    Thanks

    Richard

    1. Tim Nicholson Avatar

      That’s a really tough one. I can tell you that list of widgets is WordPress Core’s default set, not the default set from my theme. So something is wrong with the template hierarchy (what files are where between the parent and child theme). A quick fix might be to copy down that page template from the parent to the child and/or copying down the sidebar.php from the parent into the child.

  8. James Bouchard Avatar
    James Bouchard

    Hi Tim, sorry I’m quite a newbie but I was wondering if there was a way to decrease the height from the blue (default I think) banner under the “Sample Page” and “Home” navigation menu. I’m not sure if this will throw things off though if I try to modify this. Very cool stuff and a nice theme! I really like it and plan to use it. Thanks.

    1. Tim Nicholson Avatar

      Look at the CSS class “content-header”. There is a minimum height set on it and you could reduce that. But you always would probably need to mess with the padding/margins on the “page-title” and “page-subtitle” classes. Thanks for the kind words!

  9. kpry44 Avatar
    kpry44

    Great theme. I am just beginning to use it and believe it will be extremely flexible for quick project.

    I want to use the Spot theme, but want to change some of the text, such as the call to action near footer for example. Normally, I would create a child theme, but since Spot is already a child theme, I can not create a child theme of a child theme. How would I go about editing this? I could rename the Spot theme but then will not receive updates if you ever push any out. May I ask your opinion on this please?

    1. Tim Nicholson Avatar

      Hi, the call-to-action section is just an example for when previewing the theme. Once you add any widget to the Page Bottom widget area, it will be replaced with that widget’s content. So you should create a text widget and put your content in that. No need for a child theme, code changes, or anything like that.

  10. Julio Andres Orellana Avatar
    Julio Andres Orellana

    Hello again, I have been trying to change or disable the Read More from excerpt but it has been impossible for me, I have been using filters and checking the core files.

    http://i.dmtinc.cl/image/gU9
    http://i.dmtinc.cl/image/gUN

    Also, for images on posts, what are the rules for showing them in the page header? the only ones available are the ones of 1600×400 or more.

    Thank you.

    1. Tim Nicholson Avatar

      There is a support article here on WordPress.org that shows you how to remove the read more link.

      Any featured image (on a post or page) that is >1170px wide will display as a large background image. Images narrower than that aren’t displayed by default at all. The assumption is you will place that featured image or another one into the page content itself.

  11. Vincent Lebée Avatar
    Vincent Lebée

    Hi Tim
    I’m more and more happy with your work !
    I would like to use flat-bootstrap with the woocommerce plugin.
    Have you some experiences in it, (i did’nt find information on your website).
    I would be happy if you share it with me.
    Thank you very much

    1. Tim Nicholson Avatar

      I haven’t used Woo Commerce. Plugins *shouldn’t* be effected by themes, but if you use it and have any issues let me know. I’d like my themes to be compatible with major plugins like that.

  12. Julio Andres Orellana Avatar
    Julio Andres Orellana

    Hello, I have been working with your theme recently and let me tell you it’s awesome, very satisfied.
    But I am having a problem, When I add a Page to NavBar the link works fine, but when I add a submenu on that Page link in NavBar I am unabled to click to the page, looking to code the link is changed to #. Do you know how to change this?

    I have uploaded the image using dmtinc, and marked my problem with red and green colors:

    http://i.dmtinc.cl/image/gcP

    Thank you!

    1. Tim Nicholson Avatar

      Hi, my themes are based on the Bootstrap UI kit by Twitter. It is a “mobile first” design and they say that the nav menus work that way is better for mobile. What you have to do is create a second sub-menu item that links to the “parent” page. Take a look at our “WordPress” menu on this site. The first link is “All WordPress Themes” because that is the parent page.

      If you really wanted the menus to work like more traditional ones where hovering opens the submenu, I could direct you as to how to do it. You’d have to then handle the menu styling with CSS and also deal with “collapsing” the menus for mobile devices, though.

      1. Julio Andres Orellana Avatar
        Julio Andres Orellana

        Thanks! I think I will use the theme as it is, thank you.

  13. avinashkarnani11 Avatar
    avinashkarnani11

    Appreciate your response Tim!!
    I actually wanted to put some ads on the right side and some widgets on the left side and hence was looking for 2 sidebars so that it looks tidy.

    I understand from you that there are lot of changes in the coding and it will take much of your time to figure out the changes in the coding and i do not want to do that.

    Thank You so much! I am happy with this theme as well. 🙂

    1. Tim Nicholson Avatar

      Ahh, widgets on the left and ads on the right. I totally get it. What I’m seeing with modern sites are ads placed inline within the page. For example, you show maybe 5 article summaries, then an ad, then 5 more article summaries. Then in individual articles, you show a few paragraphs, then an add, then the rest of the article. Click through rates are higher that way. Those things would be easier modifications as you may just want to edit index.php (blog), single.php (blog entry), and possible page.php (pages) templates. You’d still need to know PHP to do it, though.

      For now what I would suggest to you is to incorporate ads into one or more of the already-included widget areas: Page Top, Page Bottom, Sidebar (and you can have the sidebar on the left or right by choosing a page template already built into the theme), footer, or even the brand new home page widget area.

      If you want different ads on different pages, you can use the Jetpack Plugin’s “Widget Visibility” feature. So for example, you add several different ad blocks to the sidebar and then control which ads show on the blog versus different pages on your site.

      Thanks for posting the question, though. I’ll think about the idea of advertisements as I’m thinking about new features and new themes.

  14. avinashkarnani11 Avatar
    avinashkarnani11

    Hello Tim,

    First of all i would like to thank you for creating such a wonderful theme (Flat Bootstrap Xtremely Social Green theme). It looks great at the site i have created. Now i have a query on the sidebar. I wanted to put widgets on left side and right side and hence wanted the sidebar on both the sides while the content be in middle? Can i do that?

    I am not well versed with php but if you could help me to get the code and let me know where the code has to be pasted, i can do that. Appreciate your response.

    1. Tim Nicholson Avatar

      Hi. I haven’t seen too many sites these days with dual sidebars, so I hadn’t really thought there would be a demand for it. My themes are all based on Bootstrap and I have focused on full-width pages and then using Bootstrap’s grid system to create different pages with different columns in different sections.

      If you just want a few pages to have 3 columns, that’s definitely the way to go. However, I can certainly see how you’d want to have two sidebars and be able to easily place widgets in them. Doing it won’t be simple if you aren’t familiar with WordPress, PHP, and Bootstrap. You’d have to edit over half of the template files in the theme plus create a new sidebar in functions.php and a new sidebar-whatever.php to handle the extra sidebar. Its not impossible, but a lot of work unless you are a WordPress theme developer. I’m sorry I don’t have an easier answer for you.

      Others feel free to chime in on this. I would certainly consider creating a theme that handles two sidebars if there is demand for it. In fact, I’m going to be posting a new article on the website soon asking for suggesting for new theme features, new theme ideas, plugin ideas, etc! I have my thoughts, but its you guys that use my themes that I’d really like to get input from!

  15. Paul Schweiger (aka. PowerPowl!) Avatar
    Paul Schweiger (aka. PowerPowl!)

    Hi Tim,

    I immediately fell in love with your theme and am using it since I started using wordpress about a month ago. But since the latest update the sample widgets in the Page Bottom section have returned, and I can’t get rid of them. I tried removing them, first by adding widgets to the bottom, and later by editing the sidebar-pagebottom.php file. I CAN remove them, but I cannot add any widgets to the page bottom area, even when they’re gone.
    Any suggestions or ideas, how I could be able to fix my page bottom area? I suspect that it’s been broken before, which could be the reason why the sample widgets weren’t removable by adding widgets… but now I’m left without any ideas.
    I appreciate any help!

    Thank you very much,
    Paul

    1. Paul Schweiger (aka. PowerPowl!) Avatar
      Paul Schweiger (aka. PowerPowl!)

      Edit:
      I undid all of my changes to the .php file, but the footer content is still gone. Weird stuff going on here…

      1. Paul Schweiger (aka. PowerPowl!) Avatar
        Paul Schweiger (aka. PowerPowl!)

        Okay, I did it. Since it’s working with Flat Bootstrap, I copy-pasted the contents of sidebar-pagebottom.php from there, and inserted it in the one in Link. Whatever it was that caused the error in the first place – it’s gone.
        😀

  16. claregroom Avatar
    claregroom

    I’m using the Spot theme and really like it. However, I can’t get rid of the default Page Bottom text, even though I’ve tried adding all sorts of widgets to the Page Bottom area. Any suggestions?

  17. cortatrajesmachine Avatar
    cortatrajesmachine

    Hi there. I’ve done literally everything to remove the “call to action” thing but nothing happens. I put a blank text widget and nothing. I put different widgets and still nothing. I’m desperate. Please help me, your theme does have a lot of potential and i’m questioning a change to another more flexible but not so versatile. Please help me. For sure there’s something i’m not doing right. Thank you in advance.

    1. cortatrajesmachine Avatar
      cortatrajesmachine

      i’ve found the solution by myself. i’ve changed wordpress from spanish to english and… tadaaaaaaaa… problem solved! Thank you for all

  18. Melissa Amarello Avatar
    Melissa Amarello

    A few days after paying for a ‘premium’ theme, I switched to yours because it’s cleaner and does much of what I paid for without non-transferable short codes. So thank you 🙂

    I am wondering if it is possible to change the default page layout, so that I don’t have to manually change each page’s layout? Likewise for changing the default blog layout. Here is my site if that helps: http://www.snakes.ngo/

  19. isaacjumba Avatar
    isaacjumba

    Hi Tim,
    I like the theme very much and am currently using it for a blogging site. Am still new to WordPress. How can I override the site credits? And secondly, how can I change the background color at the bottom?
    Thanks in advance

    1. Tim Nicholson Avatar

      The main way to override the site credits is in functions.php. Take a look at the Flat Bootstrap Child Theme included in the main theme for how to do it.

      To change the background color at the bottom of the theme, do it with CSS. The Footer class is sidebar-footer. The section below that is after-footer. So to override that in CSS do something like this:
      .sidebar-footer { background-color: #123456; }.

  20. Cybortronik Records Avatar
    Cybortronik Records

    Great themes~! Im using Flat Bootstrap with the child theme. I wan to have the navbar right aligned, navbar-right, I tried adding it in functions.php in the child them but it did not seem to work. I have a static home page and blog posts page, Im trying to find the default template .php for those and would I make copies of those in the child theme folder ? On the the blog posts static page no matter what page template I choose it does not change (full width-left-page no sidebar or content header etc). Also on the blog posts page (www.mywebsite.com/blog) how would I show the post thumbnails ? Thanks again for great themes…

    1. Tim Nicholson Avatar

      To right align the navbar, there is a theme option that can be set in functions.php. Do it like this:
      $xsbf_theme_options['navbar_classes']='navbar-default navbar-static-top navbar-right'.

      The “blog” page in WordPress is a bit of an oddity. It’s only there to specify the page slug (URL). The content and other settings are ignored. In our theme, the blog does always have a right sidebar. You could edit index.php, but that defines the “default” page layout for everything, so its best to add a home.php file. When present, that will define the layout of your blog page. You can first copy in the content in index.php and then look at the page template you want (e.g. full-width) and update the grid (col-md-xx) and remove the call to get_sidebar().

      The blog should always display the post thumbnail (now called “featured image”). That is controlled by content.php if you want to take a look.

  21. hotpropertiesoc Avatar
    hotpropertiesoc

    Tim,
    I did not have the option to uncheck the “display header text” so I had to go in and change the PHP to this:
    ‘header-text’ => true, // does allow user to turn off header text
    so now even though I have the box uncheck the function still does not work and I’m getting header text all over my cover image and my pages need titles.
    what do I do?
    How do I overwrite or remove the header text altogether?
    I like it in the Nav bar but it’s so unnecessary over the cover image where I placed my logo

    1. Tim Nicholson Avatar

      Which theme are you using? Flat Bootstrap lets you turn off the header text from the Customizer. If you have a custom header image setup, that will still display above the navbar. It’s also designed to display just the site name in the navbar when you do that. If you are using one of my other themes, that option just toggles the site title in the navbar since those themes don’t have a “header” above the navbar.

      1. hotpropertiesoc Avatar
        hotpropertiesoc

        Thanks so much for your reply, I’m using spot theme, I’d post a link but I only have a splash page up right now as I build it. I’ll take a look at the flatbootstrap theme too, maybe I can use that one?

      2. hotpropertiesoc Avatar
        hotpropertiesoc

        flat bootstrap wont work. is there any code I can put in spot to remove the text overlay on the header image and still keep the page title intact?

  22. Montrose Townsend Avatar
    Montrose Townsend

    Hello Tim, I love the Link theme. But as I am a novice I am finding it really difficult to edit the call to action area, page bottom and the footer. I want to start a juice bar and I am trying to customize those areas accordingly. Do you have a tutorial?

    1. Tim Nicholson Avatar

      I don’t have a specific tutorial with the exact code you need, but in general you can “view page source” and copy in the HTML for each of those sections and paste them into a text widget. That will get you very close and you can tweak the HTML from there.

      BTW, I am working on a plugin that makes it easy to create a call-to-action section at least.

      I’d also like to automate the social media section using a the social media menu that’s already included in the Link theme. I just don’t know a good way to handle if someone wants more or less than 3 icons because the theme design really only looks good with 3. What I would probably do is if exactly 3 links are set in the menu, then make it look exactly like the sample, but if less or more links are in the menu, then just put a single green colored background instead of using the two shades of green.

      At any rate, I realize that ease of duplicating the “demo” theme is important and I’m working on the best ways to handle that. So stay tuned!

      If you are adventurous, you can try out that plugin from my github. Its still very much in development, but the call-to-action widget works pretty well as long as you put it in the Page Top or Page Bottom widget area. I’ve got work to do on it to decide how to handle things if someone were to place it in a sidebar or footer where its really not intended to be.

  23. Mira Living Avatar
    Mira Living

    That would be wonderful, Tim!

    From looking at heap of free themes (go WP! I LOVE this community!), the things that frustrate me the most as a developer are when I can’t quickly and easily create EXACTLY what the demo looks like – all the demo functions should be built in as default. If they’re not default options, remove them from the demo (or alternatively create 2 demos? one for the free version and another for the pro version).

    The theme my client decided to go with on my recommendation was called “Seasonal” – so simple and beautiful right out of the box – brilliant for absolute WP beginners. She decided to purchase the pro version because it wasn’t possible to change the sidebar image or font colourings with the free version.

    So maybe that’s a model that could be useful for this amazing theme of yours, Tim? Include all the demo features AS IS in the free version, then with the pro version include the more advanced customisation?

    If more developers did this kind of thing, it would make WP themes shine and compete with the other DIY site builders (squarespace, wix, weebly for example).

    1. Tim Nicholson Avatar

      Thanks for the clarification. I see what you mean now in terms of “simplicity” of replicating the demo site. I haven’t yet figured out how to go about building a “pro” version of the themes for monetization.

      I believe what you are suggesting is that the free theme on WordPress.org could have very theme-specific options to allow users to just edit the links and text in the “demo” or “sample”. Then have a paid Pro version that is more flexible in changing up the layouts, more flexible widgets, etc.

      That is an interesting approach that I hadn’t really thought of. Mainly because my goal with the free theme was to make it a “framework” of sorts (technically a “parent theme”) that had lots of flexibility but then leverage 3rd-party plugins to simplify content creation.

      I’ll continue to put thought into all this. I’m trying to decide whether to focus on such a plugin next or roll out more themes with different color schemes, layouts, etc. I’ll probably pose this question in more detail in an upcoming post on the site to get feedback.

      1. Mira Living Avatar
        Mira Living

        Pleasure, Tim 🙂

  24. Mira Living Avatar
    Mira Living

    Hi there,

    I’d love to use the call to action bar in Flat Bootstrap but can’t figure out how to edit this? Apologies if this information is elsewhere – I couldn’t find any answers.

    1. Tim Nicholson Avatar

      While the sample widget is still visible, use “Show Page Source” in your browser and copy that widget’s code. Then paste it into a new text widget. You’ll need the Widget CSS plugin that the theme recommends in order to color the text box. I’d also add the CSS class “section”. So the CSS would look like “section bg-darkblue”.

      1. Mira Living Avatar
        Mira Living

        Thanks so much for your quick response, Tim! The client decided to go with a simpler theme – Flat Bootstrap is brilliant and SO powerful – it just wasn’t quite easy enough for a wordpress beginner but I’ll personally return to it in the future.

        1. Tim Nicholson Avatar

          Thanks for the kinds words, Mira. I would consider creating a child theme that removes some of the features (complexity) of Flat Bootstrap if there is demand for that. I’m also considering developing a plugin with things like widgets to make building colored sections, call-to-action buttons, etc. easier. There are certainly a ton of plugins for that, but I’m thinking of rolling my own. What types of things did you have in mind to make Flat Bootstrap simpler?

  25. Mina Canterville Avatar
    Mina Canterville

    Hi, I really like this theme, thank you! As some people have already commented here, I’m also having trouble changing widgets. No matter which ones I select, only the default ones are showing. I changed theme and the right ones showed. I changed back to Flat Bootstrap and only the default appeared. I also tried deactivating all plugins and my wordpress and theme are the latest updates. Any ideas of why this is happening, please? Here’s my website, (still under construction): http://goo.gl/ZH7yxf At the moment the widgets I have for the sidebar are Recent Posts and Text, but none are appearing. Might it have something to do with the site language being Spanish? Thank you!

    1. Tim Nicholson Avatar

      It looks like you changed your site to a different theme so I can’t look at it. Have you upgraded Flat Bootstrap to the latest version? Can you try just adding a simple text widget to the sidebar to see if that displays?

  26. Tim Nicholson Avatar

    Hmm. There doesn’t seem to be an easy way to do this with a CSS override. Thanks for pointing out the desire to do it, so I can see if there is something I can put in the next theme update to make it easier. Its pretty easy to hide just the calendar icon, but there isn’t an easy way to hide the “|” symbol that separates the icon/date from the # of comments. If you wanted to hide ALL of that stuff on that line below the article title, then the CSS would be .entry-meta p { display: none; }

  27. Jonathan Friedman Avatar
    Jonathan Friedman

    The Spot theme is fantastic, thanks for creating!
    A quick question:
    I removed the dates for my posts using a plugin, but it left the calendar icon in the beginning of each post. How can I stop the calendar icon from appearing at the top of all my posts? And when I do this, how can I adjust so title of post appears next to the body (ie filling in the empty space where icon/date used to be)?

  28. Danielle Frappier Avatar
    Danielle Frappier

    I’m using the Pratt theme, which I really enjoy btw! I’m looking to replace the logo with a custom one. I saw this:

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

    but what class would I have to override for the pratt theme?

  29. reedmthompson Avatar
    reedmthompson

    How do you change the aqua color scheme of the text and buttons?

    1. Tim Nicholson Avatar

      Look for the styles you want to change in theme-flat.css (a, a:hover, etc.). Then specify different colors in style.css or better yet using Jetpack or some other plugin that let’s you add css overrides within the WordPress admin.

  30. levityracing Avatar
    levityracing

    Also how do i centre and change the spacing on the Header menu? its currently all bunched to the left side

    Thanks

    1. Tim Nicholson Avatar

      Which theme are you using? Flat Bootstrap? What do you mean by “all bunched to the left side”?

  31. levityracing Avatar
    levityracing

    Really enjoying working with this Template! just wondered, I’ve used the CSS you supplied for the social media tags on the footer, but do you have one for Vimeo and instagram?

    Thanks

    1. Tim Nicholson Avatar

      The theme loads the full set of “FontAwesome” icons, so you can use any of them listed here: fontawseome.io. Well, except for the newer ones until I update the version number.

  32. larrydowell Avatar
    larrydowell

    I’ve set up the website ozicsholdings.com using & customizing your Pratt theme. Everything has worked very well until I installed the qTranslate plugin. That works well, except for the Spanish language selection. Spanish selection hides all the content in the footer. The content is in the source code but does not display. I’ve tested several other languages and French has the same results, while other languages work fine. I’ve tested the site with other themes and all works well. What is it about Spanish and French that causes the Pratt footer to malfunction.

    1. larrydowell Avatar
      larrydowell

      I’ve tried moving the content widgets to the page bottom and the results are the same – Spanish content is hidden.

    2. larrydowell Avatar
      larrydowell

      OK, gave up on the Pratt footer, switched to Flat Bootstrap, put the menu in the after-footer and did some css tweaks to make it work.

    3. Tim Nicholson Avatar

      There are a ton of qTranslate plugins. Could you give me the exact URL in the WordPress.org plugin directory for the one you are using? I can install it on my test site and see how it works.

  33. kezhome Avatar
    kezhome

    I’m using Internet Explorer 11 – New Windows 8 PC ..
    Karen

    1. Tim Nicholson Avatar

      You can email me a screenshot, but I’d really need to be able to use the development tools in the browser to inspect what specific CSS rules aren’t being handled properly by that particular browser version. Email it to tim at xtremelysocial dot com. I do have a new work laptop coming sometime this month which I assume will have Windows 8 with IE11 on it. But I tried IE11 via Remote Desktop and it rendered fine.

  34. kezhome Avatar
    kezhome

    Hello! I just found your theme and am starting a new site for one of my clients. In Chrome the menu bar is fine, but in IE it is aligned left .. Can this be fixed? The domain is http://www.HowardsMufflers.com

    Thank you so much!

    Karen

    1. Tim Nicholson Avatar

      It appears to be right-aligned properly on the latest version of IE. That’s all I have access to from my Mac (via Microsoft Remote Desktop). Are you using an old version of IE?

      1. kezhome Avatar
        kezhome

        Hi Tim, Is there anyway to send you a screen shot? I really want to use this theme, but it won’t look right on some browsers.
        Thanks!

  35. Florita Welsh Avatar
    Florita Welsh

    I just started using this theme and wanted to make a couple of tweaks. I figured out how to change the Site Title color but I also want to change the tagline color as well.

    Also, is it possible to have the Site Title and Tagline appear on each page rather than the menu name appearing over the image?

    Thanks.

    1. Tim Nicholson Avatar

      I’m using the standard WordPress code for changing the site title and tagline color. For some reason, they decided not to let them be changed independently of each other. You could change it easily by adding a line of css, but it depends on which theme of mine you are using. In Flat Bootstrap its .site-description {color: 123456; }. In my other themes, the text depends on what you have set as your home page and/or text overlay of the header image.

      In Flat Bootstrap, the Site Title and Tagline do appear on each page. In most of my other themes, just the site title displays in the top nav menu itself to make room for the menu items. But none of them display the menu name, so I’m a bit confused as to what you are asking about.

  36. Hitesh Sethi Avatar

    Hi,

    I want to make the menu horizontal on the top instead of vertical. I tried playing around with the CSS but couldn’t make it happen.

    Could you please guide me on how to do this.

    Thanks.

  37. petrasundell Avatar
    petrasundell

    Hi Tim,
    I love the Link theme and have just started to use it. I have two questions that I can’t seem to solve.

    1. I’m trying to add a custom logo instead of the title and have tried adding both: .site-title a { background: url(‘http://www.upbeater.com/wp-content/uploads/2015/03/Upbeater-Logo1.png’) left top no-repeat; display: block; text-indent: -9999px; width: 100px; height: 100px; } and to both the custom CSS and the header.php but I can’t get it to work. Can you please explain again how and where to add my logo over the picture to replace the text?

    2. I’m trying to add two of your transparent buttons just under the slogan (between slogan and arrow) but it ends up on the top of the page pushing my background image down. How can I add the two buttons side to side over the picture (like toggled menu) right under the text?

    Thanks!
    Petra

  38. praesenz2 Avatar
    praesenz2

    Dear Tim,
    I am so happy using Link.
    Just a small question: How can I change the colour of the footer? I read all the Q&A but did not find it, sorry.
    Thanks again for your fine work!!
    All the best
    Ulf

    1. Tim Nicholson Avatar

      Sure, you can change the color of the footer by adding this CSS:
      .sidebar-footer { background-color: #999999; }
      Thanks for the kind words. I’m glad you really like the theme.

      1. praesenz2 Avatar
        praesenz2

        Thank you very much and Happy Easter!

  39. ruben2040 Avatar
    ruben2040

    Hello, I really like your theme, I am a fan now!
    the problem is I can´t seem to make the sample widgets disappear, even If I try to insert new ones (as you said), they are nowhere to be seen, and the sample ones still remain. Is there maybe something I am doing wrong or what excactly should I be doing then? I would love if you could help me out! Thanks in advanced.

    1. Tim Nicholson Avatar

      As soon as you add a widget to whatever widget area has the sample, the sample should disappear. Which theme are you using? Also, can you send a link to your site? Most themes just have samples in the Page Bottom widget area.

      1. Juan Manuel Martín Castillo Avatar
        Juan Manuel Martín Castillo

        It´s the same for me: http://www.metalicasfazouro.com I add widgets to the Page Bottom and they doesn´t appear and samples still remain.

  40. thebodhitreeandstacey Avatar
    thebodhitreeandstacey

    HI Tim,

    I am relatively new to editing WordPress and enjoying working with your theme. I am interested in updating the Posts (list) page to only show certain posts by excluding categories or tags. I am assuming I use WP_Query and while I can find it on ‘Flat Bootstrap: content-recent-posts.php’ I cannot seem to find another template file that would be used. I am sure it’s quite obvious and I am just really tired. I thank you in advance for your help.

    cheers
    r

    1. Tim Nicholson Avatar

      Are you talking about using the “Page with Recent Posts” page template or the main blog page? If the former, then you are on the right track. Look here to see how to add an argument to the WP_Query to select which categories or tags get displayed. Although, you might want to consider marking the posts you want there as “sticky” and then filtering on those. That way you have infinite control over which posts show up on the home page. Check out the WP_Query Parameters.

  41. praesenz2 Avatar
    praesenz2

    …thank you very much, Tim. I tried it, the smaller size is not enough and additionally it looks not so nice on the desktop anymore too…. Then I will leave it like this. (Perhaps you already found the link to my website in my former post, if it is still necessary)
    A big thanks for all your efforts. I am really happy with the theme!
    Ulf

    1. Tim Nicholson Avatar

      Ulf, from looking at your website if you use the tag you’ll be at 70px or if you use the above CSS you’ll be at 64px and both work fine on desktop and mobile. Remember that mobile is already a smaller font size.

      1. praesenz2 Avatar
        praesenz2

        Dear Tim, thank you very much for your tip. On my Samsung Galaxy Ace I need to go down to only 40px to have it as a whole – and then only in horizontal position of the smartphone. So I will leave it as it is….
        Best wishes!

  42. praesenz2 Avatar
    praesenz2

    Hello Tim!
    Sorry, it´s me again!! 😉
    I had the problem with the responsiveness of the header part. I set the site up totally new and the error is there, again! I did three other websites with your marvelous theme and they all are functioning well!)
    The site is http://rueckfuehrungstherapie-frankfurt-web.de/
    Problem is: The header picture, again, is correct on the pc monitor, but only half seen on the smartphone, the menu is folded out unssen on the right side, but is seen when swiping the header to the left without touching the header menu button. I think there lies the problem.

    I am sure, this is not caused by the size of the picture (cropped by the theme) and I activated the LINK theme now correctly before I did anything else.
    Thank you very much in advance for your support!
    Many greetings from sunny Frankfurt , Germany!
    Ulf

    1. praesenz2 Avatar
      praesenz2

      …I learned just right now from your answers that it is the length of the title… (the whole work of setting up again for nothing… sh…. 😉 ) I can´t change it because it is the name of my therapy method. So I thin I have to live with it….
      Thanks,
      Ulf

      1. Tim Nicholson Avatar

        If adding the <small> doesn’t work, then just add some CSS to make the font smaller, like this:

        .cover-image h1 { font-size: 64px; }
        
  43. praesenz2 Avatar
    praesenz2

    Sorry, I bombarded you with two comments regarding a mistake in the header part. Now I set up the website newly, so do not bother and delete my comments, please. The few ideas of the first comment for improvements you can keep in mind if you think the are of value.
    Keep up the good work and all the best to you, Tim!
    Ulf

  44. Víctor Méndez Avatar

    Hi! Lovely theme. I’m having trouble with widgets. It doesn’t show me any new widgets, only the examples. What could it be? I’m using Wordpres 4.1.

  45. James Olmos Avatar
    James Olmos

    Loving this site! Question though regarding the “Call To Action” widget at the bottom on my page. I’d like to keep the widget and edit it. Hovering shows that I can shift-click to edit but this option does not work for me. Thanks for sharing my options for editing this widget.

    p.s. I’m fairly new to the deeper aspects of WordPress site creation.

    1. Tim Nicholson Avatar

      Check out what to do here on our How to use our themes page. In short, the sample widget will disappear when you add an actual text widget to the “Page Bottom” widget area. You could edit the sample via PHP but its much easier to just create your own text widget.

  46. lisabaughn94 Avatar
    lisabaughn94

    Hi again Tim,

    My header image on my homepage disappeared:

    http://www.lisabaughnwriter.com

    It happened after I played around with Widgets–>Page Bottom.The only widget I have there is the Text box. I went there and clicked Reorder to see what might pop up or occur in general. Then I did some Quick Edits of the names of my Pages. I refreshed my homepage and it was gone. Can you help with this too!? Thank you so much!

    1. Tim Nicholson Avatar

      All that is basic WordPress, not controlled by the theme. I can’t imagine why a widget would disappear for no reason. Instead of using Appearance->Customize, what shows when you go directly into Appearance->Widgets? They *just* added the former, but the latter has been tried-and-true for years.

  47. katheratom Avatar
    katheratom

    I found Spot and fell in love with the design, and have been happily hacking it to suit my needs. One basic question – I was able to get rid of the stock footer by adding an empty text widget, as suggested in a previous comment, but all the way at the bottom of the page are still social media sharing links, just the images for Twitter, Facebook, and Google+, with HREF=#.. I’d use these links if I could update the HREF, or replace it entirely with the widget you described here in the comments if I could disable it.. What would you suggest? How do I either disable the social media icons (and replace them with your footer snippet) or update them to reflect the actual URL of my social media pages?

    1. Tim Nicholson Avatar

      For Spot, create a text widget and place it in the footer with this code and replace the “#”‘s with actual URL’s:

      <div class="row">
      <center>
      <a href="#"><span class="fa fa-twitter icon-lg"></span></a>      <a href="#"><span class="fa fa-facebook  icon-lg"></span></a>      <a href="#"><span class="fa fa-dribbble icon-lg"></span></a>
      </center>		
      </div>
      

      I’m glad you really like the theme, btw!

  48. Nic Bada Avatar

    Hello Tim!

    I love this theme, I really do. But the header isn’t working out for me in the new update. I have an image that works well on the desktop site, but on the mobile site, the header doesn’t resize, and it is just extremely zoomed in to the top left corner of my header image on the homepage. Is there a way to shrink the header image to fit for mobile, or for the width of the page in general? Please let me know! Thank you so much.

    Nicole

    1. Tim Nicholson Avatar

      Can you send me a link to your page so I can take a look at it? Are you using Flat Bootstrap v1.5? The custom header image should resize and on narrow widths it should be cropping in the center. Only prior versions cropped top left.

      1. Nic Bada Avatar

        Sure! http://www.nicole-badaan.com
        I believe the theme I’m using is Pratt. It was working fine for me, and then it said there was an update available so I updated, and the header stopped resizing as it had done before. Thank you so much for your help!

        1. Tim Nicholson Avatar

          If you are using Pratt, be sure to update its parent theme, Flat Bootstrap as well. The latest version is 1.5. That should fix your issues.

  49. Rusty Williams Avatar

    Hi Tim. Thanks for the Theme. It looks great. I’ve been using it for a few months and I think something changed recently so now the large header images appear above the posts. I’d like to have the large images (rotating through three different versions) on the Front page. It’s also OK ot have them on the top of the Pages. But I don’t want them on the post. The simple white on blue header format for those pages is fine.

    I’ve looked through all of the customization options and I don’t see how to change this. Can you help? Thanks.

    1. Tim Nicholson Avatar

      Interesting use case. I hadn’t thought of someone wanting to rotate the home page images and then not have them on the post pages. That is a bit tricky. The CSS would be pretty complex. If you don’t mind editing PHP, go into the file single.php. Comment out the call to get the content header like this:

      
      

      Then right after that, add this code to display the normal white on blue title:

      <?php
      $title = get_the_title();
      $subtitle = get_post_meta( get_the_ID(), '_subtitle', $single = true );
      ?>
      <header class="content-header">
      <div class="container">
      <h1 class="page-title"><?php echo $title; ?>
      <?php if ( $subtitle ) printf( '<h3 class="page-subtitle taxonomy-description">%s</h3>', $subtitle ); ?>
      </div>
      </header>
      
  50. Richard Meyer Avatar

    When I add a featured image I would like to have the title not appear over the image can you tell me how to get rid of it all together?

    1. Tim Nicholson Avatar

      In general, featured images get their text from the image itself and if there isn’t any then it uses the page or post title. Are you trying to make a page or a post without any text on the featured image at all? I haven’t really designed the theme to handle that. You could hide the text with CSS, though. Each individual page gets a CSS tag added to the body like ‘page-id-6999’ and then you could add:
      .page-id-6999 .header-image-title, .page-id-6999 .header-image-caption { display:none; }

  51. Dave Turner Avatar

    I really like this template. When adding a header image, the default text changes to White. How can this be changed?

    1. Tim Nicholson Avatar

      You can change the text overlay color for full-width images by adding this CSS:

      .section-image h1, 
      .section-image h2, 
      .section-image p, 
      .cover-image h1,
      .cover-image h2, 
      .cover-image p {
      	color: #000;
      }
      

      Basically what that does is override the default white (#fff) text from the theme-base.css file with black (#000) text .

      1. Shahar Peter Avatar

        Where exactly I should insert this code…?

        1. Tim Nicholson Avatar

          For easily adding CSS like this to your website, I recommend the Jetpack Plugin. It adds a “custom CSS” option in the admin area where you can paste in this code. Otherwise, you need to add that code to the theme’s style.css… but each time the theme is updated, you’d lose those changes. With the Jetpack plugin, your custom CSS is preserved.

    2. Tim Nicholson Avatar

      Change it from the Admin under Appearance -> Customize

  52. Garrett Muston Avatar

    Hi Tim,
    I know you said the sample widgets disappear when you add a new one, but what if I want to use the sample social widget? I really like it, I just need to know how to edit its features and link to my social profiles. Thanks!

    1. Tim Nicholson Avatar

      I’d look at the HTML from the sample widget and copy it. Then create a new text widget and paste that HTML in and edit it. I’m thinking of adding a section to this page with code for the sample widgets so its easier to do that in the future.

  53. Induja Balasubramanian Avatar

    Hi,
    How can I add a header menu which can be seen on the top of the page and not as a sidebar menu

    1. Tim Nicholson Avatar

      Set the header menu from Appearance -> Menus. There are both header and footer menu options there.

  54. André Messias Avatar

    How can I change the color of a button, like “Search” or the “Post Comment” one?
    I took a look to the .css, but it seems not be there.

    Thanks in advance!

    1. Tim Nicholson Avatar

      Look at the CSS for the parent theme, Flat Bootstrap. Specifically, the search and post comment buttons are in the /inc/theme-flat.css file.

  55. Tammie Cheung Avatar

    Hello Tim, I have been broswing for ahwile for a theme I like, wheras I came across this one and I am loving it.
    However, I have a few problems and wanna see if you can give me a hand with it.
    1. I followed your instructions , however I still can’t display my picture with full width/length for my first page.
    2. Can I get rid of the “SOME OF OUR AWESOME CLIENT”, “THIS IA CALL TO ACTION AREA” and the Stay Connected section?
    Thanks in advance and I hope you can give me some help with this

    1. Tim Nicholson Avatar

      On your home page, if you set a “featured image” that is at least 1171px wide then it will display full-width. If its narrower than that, then it just displays with its normal width. To get rid of the sample widgets, just add any widget (even a blank text widget) to the Page Bottom widget area. I’ve added instructions for that to this page. And thanks for the kinds words, Tammie.

  56. Tammie Cheung Avatar

    Hello Tim, how are you doing? Im in love with your Xtremely social theme, however there’s something I would like to get some help with . Regarding my homepage, how can I make my picture full width/length? Cuz now I can only display at the top, do you mind if you can give me some help on this?
    Another thing is, how can I get rid of the bottom part where it says “SOME OF OUR AWESOME CLIENTS” , the icons and the CALL TO ACTION area?
    Thanks for your time reading my message and I look forward in getting your reply. Thank you very much.

  57. Lee J. Yi Avatar

    Dumb question, but I didn’t know where to ask. How do you disable the READ MORE link in a specific category? I want to embed Instagram photos in posts, but I don’t want people to have to click READ MORE to see them. I do want the READ MORE link for the other posts, of course.

    1. Tim Nicholson Avatar

      That’s not a dumb question as its not a standard feature in WordPress or any themes I’ve used. Look in the file content.php for some if-then-else logic around the_excerpt() and the_content(). The theme only displays the full content on single posts and pages. You can use the WordPress function is_category( ‘whatever’ ) to determine when the post is of the image category and you want to display the full post content.

  58. Kirsty Hulse Avatar

    Excellent theme 🙂

    How do I edit (or remove) the social buttons in the footer? They are not available in the widgets. Thanks so much!

    1. Tim Nicholson Avatar

      Once you add any widget to the footer, the sample widget (that has the social media icons) will go away.

      1. Claire Guénand Avatar
        Claire Guénand

        Hi, I’m really happy with this theme, it’s really good 🙂
        However, a little problem: I’ve been trying during one hour to get rid of the “call to action” part since results. I put some widget to the footer, many kind , but it didn’t work. How could I do to resolve it ?
        Thank you very much !!

        1. Tim Nicholson Avatar

          If you add a new text widget to the “Page Bottom” widget area, the sample one should disappear. You can leave the widget title blank, but be sure to put a “space” in the widget text.

  59. I have some question

    WordPress is up and running on my host — but it completely mismatches my site’s existing theme/CSS. How hard would it be to modify/write a new theme to make it fit in? Is there an easier way to do this?.

  60. Ngaby De Santa Cirila Avatar

    Congratulations! I love your work so much I’m planning to adopt it for my personal blog. However I missed the fixed header menu (as in this site) feature, is there an easy way to achieve that on your excelent theme?

    1. Tim Nicholson Avatar

      Thanks for the kinds words! Yes, I’ve got a child theme for this right now that will have a fixed navbar and I’ll be uploading it to the WordPress directory soon. It can take them a couple weeks to approve themes, though. If you want to do this now, you can change the class on the navbar from “navbar-static-top” to “navbar-fixed-top” (functions.php) and set a padding of 50px on the body tag (style.css).

      1. Ngaby De Santa Cirila Avatar

        Thank you for your help, I think that child theme is a great idea, in the meantime i’ll try the code you suggest.

        In other order of things, I think I found a bug you may want to look into. When using full-width option in posts I got this error:
        Warning: include(/home/ngabycom/public_html/wp-content/themes/flat-bootstrap/inc/single-fullwidth.php) [function.include]: failed to open stream: No such file or directory in /home/ngabycom/public_html/wp-includes/template-loader.php on line 74

        Warning: include() [function.include]: Failed opening ‘/home/ngabycom/public_html/wp-content/themes/flat-bootstrap/inc/single-fullwidth.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/ngabycom/public_html/wp-includes/template-loader.php on line 74

        I copied single-fullwidth.php from theme’s folder to subfolder /inc and that solves the problem but maybe it isn’t the best solution. I’ll wait for your advice

        Thanks again for this theme, it is very flexible and really fun to play with

        1. Tim Nicholson Avatar

          Yeah, that’s what I get for moving some functions from the main functions.php into the /inc directory at the last minute. I’ve fixed that in v1.1 which as of now is approved, just waiting for the WordPress theme directory to be updated to show the new version.

        2. Tim Nicholson Avatar

          Also, I’ve uploaded the Pratt theme to my github if you want to grab it from there ahead of release to the WordPress directory. That is the child theme I was referring to that has the fixed navbar at the top. It also lets you upload a custom header that is used as the background for the page headers.

        3. Tim Nicholson Avatar

          I’ve uploaded a new version of Flat Bootstrap Pratt to github and the WordPress.org theme directory. Hopefully it will be approved soon. I’ve also got some more fixes to the parent theme almost ready to go as well.

Leave a Reply

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