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 coupe 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;
}

128 comments on “How to Use our WordPress Themes

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

      • 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

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

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

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

  • Pingback: TrackBack
      • 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 !!

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

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

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

  • 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

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

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

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

    • 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; }

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

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

      < ?php //get_template_part( 'content', 'header' ); ?>
      

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

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

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

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

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

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

  • 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

  • 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

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

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

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

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

  • 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

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

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

  • 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

  • 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

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

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

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

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

  • 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

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

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

  • 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)?

  • 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; }

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

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

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

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

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

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

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

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

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

  • 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

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

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

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

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

  • 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

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

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

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

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

  • 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

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

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

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

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

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

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

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

  • 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

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

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

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

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

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

  • 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

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

  • 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

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

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

  • 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