Bootstrap General Theme 2 / Getting Started

This file will help you getting started with the Theme

Installation


Responsive Bootstrap Theme

Follow the steps below to start working on this Responsive Bootstrap Theme:

  1. Unzip the download file bootstrap-gen-2.zip to a new folder that you can name as 'my site'. Your unzipped file will have two main folder. One is a folder named 'documentation' to guide you through customizing the template and the second one is named 'site' which is the actual one that holds all the files and folders you will be working on.
  2. Once your site is completed you will need to upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below (don't upload the documentation folder):
    • backgrounds/ - Backgrounds Folder
    • carousal/ - Carousal Sliders Folder
    • email/ - Email scripts Folder (required to make the contact form functional)
    • images/ - Images Folder
    • scripts/ - Bootstrap jQuery and CSS files Folder
    • slider-images/ - Slider images Folder
    • styles/ - Custom style sheet and layout backgrounds Folder
    • index.html - Home-Page and other site html pages including contact.php page

  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Page Structure

All the content is enclosed in #pageBody

<body id="pageBody">
    ...
</div>

The page is divided into 5 Areas:

  1. Logo Area - #divLogo
  2. Top Navigation Area - #navbar
  3. Camera Slider on Home-Page - #camera_wrap
  4. Main Content Area - #contentArea
  5. Sliding Carousal - #list_carousel responsive
  6. Footer - #divFooter

#camera_wrap - Only on Home Page

Grid Structure

  • .sidebar - Sidebar
  • .span12 - Full Column (Full Page)
  • .span6 - Half Column
  • .span4 - One-Third Column
  • .span8 - Two-Third Column
  • .span3 - One-Fourth Column
  • .span9 - Three-Fourth Column
  • .span2 - One-Sixth Column
  • .span4 - Two-Sixth Column
  • .span10 - Five-Sixth Column

Bootstrap Documentation for scaffolding at: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem


Logo Editing

The Logo Container can be found in between the commented tags - !--Edit Logo here--

<div id="divLogo">
    <a href="index.html" id="divSiteTitle">Your Site Name</a>
    <a href="index.html" id="divTagLine">Your Tag Line Here</a>	
</div>

You need to type in your site name and tag line.


Inserting your own Logo

If you wish to use your own Logo, make sure that that it does not exceed more than 350 pixels wide and 70 pixels in height. Replace the existing logo code for the following new code if you wish to use your own logo:

<div id="divLogo" class="pull-left">
    <a href="index.html" id="divSiteTitle"><img src="images/logo.png" alt="Site Name" title="Site Name" /></a>
</div>

Note Ensure that your code points to the correct path of your logo's location, i.e. in your '/images' folder.


Changing Fonts

You can easily change the font type for the site name, navigation menu and header titles, by editing the font-family style in the file named custom.css, located in the 'styles/' folder.

To change the font type for the site name open the CSS file named 'styles/custom.css, scroll down to line 222 for the style '#divSiteTitle' and change the font type from 'Allura' to any font of your choosing.

#divSiteTitle {font-family: Allura, cursive; color: rgb(142, 176, 55); font-size: 45px; text-shadow: rgba(0, 0, 0, 0.298039) 2px 4px 3px; line-height: 40px; letter-spacing: 2px; text-transform: none; font-weight: bold; font-style: normal; text-decoration: none;}

The font type navigation menu can be changed on line 368 'styles/custom.css' for the style named 'ddmenu.nav-pills':

.ddmenu.nav-pills li a {font-family: Calligraffitti; font-size: 15px; text-shadow: none; line-height: 17px;}

The font type for header line 1 and header line 2 can be changed on line 290 and 293 'styles/custom.css' for the styles named 'divHeaderLine1':

#divHeaderLine1{letter-spacing: -1px; word-spacing: 0px; margin-top: 31px; color: rgb(142, 176, 55); font-size: 51px; line-height: 55px; font-family: Pacifico; text-transform: none; text-shadow: rgba(0, 0, 0, 0.14902) 0px 3px 5px, rgba(255, 255, 255, 0.298039) 0px -5px 35px; font-weight: normal; font-style: normal; text-align: left; opacity: 1; padding: 0px; background-image: none;}

The font type for body text can be changed on line 262 'styles/custom.css' for the style named 'page-content':

.page-content {line-height: 26px; font-family: 'Open Sans', sans-serif; font-size: 15px;}

The font type for footer text can be changed on line 278 'styles/custom.css' for the style named 'divFooter':

#divFooter {font-family: 'Open Sans', sans-serif; background-color: rgb(18, 18, 18); color: rgb(180, 173, 173); padding-top: 32px; line-height: 23px; font-size: 12px; text-transform: none; background-image: url(backgrounds/noisy_net.png); background-repeat: repeat repeat;}

Inserting your own Logo

If you wish to use your own Logo, make sure that that it does not exceed more than 350 pixels wide and 70 pixels in height. Replace the existing logo code for the following new code if you wish to use your own logo:

<div id="divLogo" class="pull-left">
    <a href="index.html" id="divSiteTitle"><img src="images/logo.png" alt="Site Name" title="Site Name" /></a>
</div>

Note Ensure that your code points to the correct path of your logo's location, i.e. in your '/images' folder.



Camera Slider Setup

The Slider can be found in the Container - #camera_wrap

<div id="camera_wrap">
<div data-src="images/caprese.jpg" ><div class="camera_caption fadeFromBottom cap1">Lorem Ipsum is simply dummy        text of the printing.</div></div><div data-src="images/plate.jpg" ><div class="camera_caption fadeFromBottom cap2">Lorem Ipsum is simply dummy text of the printing.</div></div>
<div data-src="images/gourmandises.jpg" ><div class="camera_caption fadeFromBottom cap1">Lorem Ipsum is simply         dummy text of the printing.</div>
</div>                            
</div>

Edit your images for the slider so that the dimensions are 571 pixels wide and 372 pixels in height. Place these slider images in the folder named 'images/'. You can have as many slides as you wish.

You can also use your own slider. A fantastic collection of premium sliders can be seen here . We really recommend the 'Strapslide' slider which is based on Bootstrap.


Footer Settings

All the Footer content is enclosed in #divFooter

<div id="divFooter" class="footerArea">
    ...
</div>

Background Settings

The backgrounds for both the header and footer can easily be changed by editing a style in the file named :styles/custom.css

For the header background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 274 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

#decorative1 {background-color: rgb(235, 235, 235); background-image: url(gray_jean.png); background-size: auto; -webkit-background-size: cover; background-repeat: repeat repeat;}

For the Footer layout background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 278 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

#divFooter {font-family: 'Open Sans', sans-serif; background-color: rgb(18, 18, 18); color: rgb(180, 173, 173); padding-top: 32px; line-height: 23px; font-size: 12px; text-transform: none; background-image: url(backgrounds/noisy_net.png); background-repeat: repeat repeat;}
A good source of backgrounds is the site subtlepatterns.com

Editing Carousel

To edit the carousel on the 'index.html' homepage, content should be edited in the div class - #list_carousel responsive.

You can add as many thumbnails as you require in the carousal. You can then link to either a lightbox preview or a separate page altogether. The carousal is a good place to list your clients or sample work.

The thumbnail sizes are 320 pixels wide by 150 pixels in height. Place your carousel images in the folder named 'images/'.

Here's the sample code below to edit:

<div class="list_carousel responsive">
   <ul id="list_photos">
      <li><img src="carousal/muffin.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/strawberries.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/cheesecake.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/peppers.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/pomengranates.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/refreshment.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/kitchen.jpg" class="img-polaroid">  </li>
      <li><img src="carousal/soup.jpg" class="img-polaroid">  </li>                            
   </ul>
</div>
		

Editing 'Gallery' page

To edit the gallery thumbnails and the large previews content should be edited in the div class - #gridArea. From line 109 to 236.

The thumbnail sizes are 350 pixels wide by 263 pixels in height. Place your thumbnail images in the folder named 'styles/thumbs/'.

The large previews linked to the thumbnails must also be placed in the same 'styles/thumbs/' folder. These larger prviews can be any size. Try and match the name similar to the associated thumbnail, e.g, thumbnail name could be 'holiday-paris.jpg' and the large preview for this thumbnail could be named as 'holiday-paris-large.jpg'.

Make sure that the code for the thumbnails and large previews follow the correct path to the 'styles/thumbs/' folder. Here's the sample code below to edit.

<li>
<a href="styles/thumbs/sticky_800.jpg" title="Sticky" rel="prettyPhoto[gallery1]"><img src="styles/thumbs/sticky_350.jpg" alt="Sticky" title="Sticky"/></a>
<div class="meta"><span>7 minutes ago</span><span class="pull-right">By Bob</span></div>
<h4><a href="#">New photo</a></h4>
<p>A sample photo with short description. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li></pre>                                              
    	
	 
        

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Setting up Bootstrap Contact Form page

To configure the Bootstrap contact form on the contact page to send the form query to your specified email address just open the file named 'index.php' located in the folder named 'email/' and edit line 8, by replacing the default email address for your own.

$to="your-email@your-domain.com";
Your webhost must support PHP in order for the form to work. PHP features are usually on Linux servers. If your hosting is not on Linux, request your host to change to it. Your Webhost should not charge you for the changeover.

Uploading your files to your remote server

Once you have completed your site. Upload all the files and folders from your main 'site/' folder to the 'public/' directory of your remote server. This 'public/' folder is the your root site folder where your default placeholder index.html file is held. When uploading you will get a prompt to ovewrite the exising default index.html file, click o'kay to overwrite it with the new one.

We recommend using Filezilla to upload your files. It is fast and easy to use.

You will need to use your FTP Host Name, Username and Password to logon using Filezilla. This information is sent to you when you first signup with a webhosting package. In case you don't know it, you can always request it from your webhost again.

Do not upload the folder named 'documentation/'.


Using third party scripts

You can use any third party scripts to enhance overall user experience, such as image preloaders, calendars, search scripts, animations, shopping carts, Html5 video players, hover effects etc...

We thoroughly recommend scripts from CodeCanyon.