Flatstrap - Bootstrap Flat UI

Documentation

Theme Settup

  • make sure to activate your theme in your dashboard themes area
  • also be sure to "inspect" the theme page_types and activate those
  • go to your home page, and set the "design" to the "home" page_type
  • build away!

Addons

Apple_Sreens.pngFlatstrap

A Bootstrap Flat UI theme.

Gloriously Simple.

 

 

Setting up navigation

  1. View the home page at least once after activating the theme.
  2. go to your dashboard stacks area
  3. edit the "Header Nav" stack
  4. add an autonav block if not already there, and make sure that it is set to show all subpages
  5. set the custom template to "Flatstrap Header"
  6. save.

Setting up your logo

  1. View the home page at least once after activating the theme.
  2. go to your dashboard stacks area
  3. edit the "Logo" stack
  4. either add your logo image (we recommend limiting the height to 42px) or use the "Awesome Headings" addon for a fancy icon-word logo. (h3 size works best)
  5. no custom template is needed
  6. save

Setting up your slideshow

  1. create your images.  We recommend using "blur" effects for best results. Size should be 1500px X 550px .jpg
  2. Add the "Simple Flexslider" block and upload/use your new images. Add feature text/titles/buttons as needed. See the Typographypage for button classes. you will need to edit the html from the WYSIWYG and manually add them.

    NOTE: make sure when adding your slides that you clidk on the "Seafoam Green 'Add Slide'" button and not the "Blue 'Add Block'" button
  3. after adding, ckick the block and set the custom template to the "Flatstrap" view.

Setting up a search box

  1. Add your search block
  2. after adding, click on the block and set the custom template to "Flatstrap".

About the home page

The Home page layout is special in that it is designed to provide you a visual outline of how things can look.  

The demo content is not a block.  So when you place the page in edit mode, there will be no content.  Nor will the example content show once you place a block in that area.

If for some reason, you do not WANT a specific area on the Home page to show at all, simply add a blank HTML block.

Changing the Navbar

All of Flatstraps subpage layouts come with the afixed full-width navbar.  You can change these to the fixed-width non afixed navbar by changeing the include at the top of each page_type to (remove _afixed):

$this->inc('elements/header.php');