CARVÃO NEGRITO

Sinônimo de qualidade em seu churrasco

Installation


Responsive Bootstrap Theme

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

  1. Unzip the download file bootstrap-gen-4.zip to a new folder that you can name as 'my site'. Your unzipped file will have four main folders. One is a folder named 'documentation' to guide you through customizing the template and the second, third and fourth ones are named '1st-color-layout', '2nd-color-layout' and '3rd-color-layout' which are the actual ones that holds all the files and folders you will be working on for each of the respective color layouts.
  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):

    • carousal/ - Carousal Sliders Folder
    • circlehover/ - CSS3 Circle animations Folder for 'index-alt.html' page
    • directionaware/ - jQuery image hover effects Folder for 'gallery.html' page
    • email/ - Email scripts Folder (required to make the contact form functional)
    • icons/ - Icon Images Folder for Social Footer Icons and 'services.html' page
    • 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. 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 271 for the style '#divSiteTitle' and change the font type from 'Syncopate' to any font of your choosing.

#divSiteTitle {font-family: Syncopate; font-size: 28px; line-height: 49px; color: rgb(104, 152, 204); text-shadow: rgba(0, 0, 0, 0.0980392) 0px 3px 5px, rgba(255, 255, 255, 0.298039) 0px -5px 35px; letter-spacing: 4px; font-weight: normal; font-style: normal; text-transform: uppercase;}

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

.ddmenu.nav-pills li a {font-family: Oxygen, sans-serif; font-size: 15px; line-height: 17px;}

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

#divHeaderLine1 {font-family: 'Source Sans Pro', sans-serif; font-size: 40px; line-height: 42px; margin-top: 0px; text-transform: none; color: rgb(104, 152, 204); letter-spacing: 1px; text-align: center; text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px; background-image: none; opacity: 1; padding: 0px;}

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

.page-content {line-height: 22px; font-family: 'Maven Pro', sans-serif;}

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

#divFooter{font-size: 13px; font-family: 'Maven Pro', sans-serif; background-image: url(bedge_grunge.png); background-repeat: repeat repeat;}


Camera Slider Setup


Bootstrap Carousel

The Slider can be found in the Container - #camera_wrap

<div class="camera_full_width">
    <div id="camera_wrap" class="shadow">
        <div data-src="slider-images/desert.jpg" >
        <div class="camera_caption fadeFromBottom cap1">This slider can be customized to have multiple slides and          many effects.</div>
        </div>
        <div data-src="slider-images/dancer.jpg" >						
        </div>
    </div>
    <br style="clear:both"/><div style="margin-bottom:40px"></div>
</div>

Edit your images for the slider so that the dimensions are 1090 pixels wide and 420 pixels in height. Place these slider images in the folder named 'slider-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 page and footer can easily be changed by editing a style in the file named :styles/custom.css

For the page background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 265 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.

body {background-image: url(mirrored_squares.png); background-color: rgb(181, 181, 181); background-position: inherit inherit; background-repeat: repeat repeat;}

For the Footer layout background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 319 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-size: 13px; font-family: 'Maven Pro', sans-serif; background-image: url(bedge_grunge.png); background-repeat: repeat repeat;}
A good source of backgrounds is the site subtlepatterns.com

Editing Carousel

To edit the carousel on the 'about-alt.html' page, content should be edited in the div class - #div id="myCarousel".

You can add as many images as you require in the carousal. The carousal is a good place to list your clients or sample work.


Bootstrap Carousel

The thumbnail sizes are 610 pixels wide by 400 pixels in height. Place your carousel images in the folder named 'carousel-images/'.

Here's the sample code below to edit:

<div class="carousel-inner">               
    <div class="item active">
    <img src="carousel/horizon.jpg" class="img-polaroid" alt="">
    </div>				
    <div class="item">
    <img src="carousel/green.jpg" class="img-polaroid" alt="">
    </div>			
    <div class="item">
    <img src="carousel/reflection2.jpg" class="img-polaroid" alt="">
    </div>                
    <div class="item">
    <img src="carousel/water.jpg" class="img-polaroid" alt="">
    </div>				
</div>
		

Editing circle hovers on the alternative index homepage

The index-alt.html page uses cool circle hover effects courtesy of the Codrops tutorial here.


Bootstrap Circles hover

To edit the gallery thumbnails and hover content should be edited in the ul class - #ch-grid. From line 163 to 197.

The thumbnail sizes are 215 pixels wide by 215 pixels in height. Place your thumbnail images in the folder named 'circlehover/images/'.

Note Ensure that the names of your images that you place in the 'circlehover/images/' folder match the ones in the css file named 'circlehover/css/style2.css. You can change the names of the images in the CSS file but they should match the actual names of your images.


Bootstrap Circles hover

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

<li>
    <div class="ch-item ch-img-1">
        <div class="ch-info">
        <h3>About</h3>
        <p>Lorem Ipsum... <a href="about.html">Read More</a></p>
        </div>
    </div>
</li>                                           

Editing 'Gallery' page

The gallery.html page uses a really nice animation direction hover effect courtesy of the Codrops tutorial here.


Bootstrap Gallery Page

To edit the gallery thumbnails and hover content should be edited in the div class - #gridArea. From line 142 to 215.

The thumbnail sizes are 220 pixels wide by 165 pixels in height. Place your thumbnail images in the folder named 'directionaware/images/'.

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

<li>
    <a href="http://500px.com/photo/27573675">
    <img src="directionaware/images/photo1.jpg" />
    <div><span>Green Umbrella by Dmitry Ryzhkov</span></div>
    </a>
</li>                                           

Editing 'Portfolio' page

To edit the portfolio thumbnails and the large lightbox previews in the '3-portfolio.html' page, content should be edited in the div class - #gridArea. From line 139 to 217.


Bootstrap Portfolio Page

The thumbnail sizes are 315 pixels wide by 200 pixels in height. Place your thumbnail images in the folder named 'images/'.

The large previews linked to the thumbnails must also be placed in the same 'images/' folder. These larger previews 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 'images/' folder. Here's the sample code below to edit.

<div class="span4 box">    
            
    <a href="images/alone-big.jpg"><img src="images/alone.jpg"  class="img-polaroid" alt="All Alone" title="All Alone" /></a>  
	
</div>                                              

You can use this '3-portfolio.html' portfolio page instead of the gallery.html page. We have included both for your personal preference.


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.