Bethlehem

Responsive Multipurpose HTML5 Template

Thank you very much for purchasing our theme!

If you have any issue or question that this document does not cover, feel free to contact us here.. Thank you.

About

Bethlehem is a clean and professional site template, perfect for all types of companies and personal web sites. Built on the Advanced Bootstrap 3 framework with HTML5 / CSS3. Its responsive too - Will fit great on all devices. More features like 5 Homepages, 2 Portfolio pages, About page, Services page, Masakini layouts, Timeline homepages and much more gives you more space to work with and also with a few lines of code.

Clean coded and Easy updation are the key features. Go ahead to know more.

HTML Structure

This theme is a Responsive layout with four columns. The general template structure is the same throughout the template. Here is the general structure.


	

		

			.....
			.....
			.....

CSS files and structure

I have used Nine CSS files in this theme.

  1. style.css - Contains all of the specific stylings for the page.
  2. accordion.css - Contains all of the specific stylings for Shop Accordion.
  3. isotope.css - Contains all of the specific stylings for Isotope Portfolio.
  4. bootstrap.css - Contains all of the specific stylings for Bootstrap.
  5. timeline.css - Contains all of the specific stylings for Timeline
Style.css file contains all of the specific stylings for the page. The file is separated into sections using: 
    /*-----------------------------------------------------------------------------------*/  
    /* GLOBAL STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* HEADER WRAP
    /*-----------------------------------------------------------------------------------*/
     css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* SLIDER WRAP
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* SERVICES WRAP
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* INDEX - PORTFOLIO STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* RECENT BLOG POST STYLES
    /*-----------------------------------------------------------------------------------*/
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* TESTIMONIAL STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* ABOUT CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* BLOG CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* CONTACT FORM CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* FOOTER CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  

and much more
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Dont change anything in foundation.css file. It may affect the whole theme.

Javascript

This theme imports Eleven Javascript files.

  1. bootstrap.js - Plugin for Bootstrap framework.
  2. jquery.mobilemenu.js - Plugin for Responsive menu.
  3. html5.js - Plugin for HTML5.
  4. respond.min.js - Plugin for IE8 MediaqueriesPlugin.
  5. jquery.isotope.min.js - Plugin for Isotope Portfolio.
  6. rlaccordion.js - Accordion Plugin.
  7. jquery.gmap.js - Google Map Plugin.
  8. jquery.stellar.js - Custom Parallax plugin.
  9. owl.carousel.js - Owl Carousel plugin.
  10. jquery.flexslider.js - Flexslider plugin.
  11. main.js - Custom js files.

Tutorial

Lets start updating the template. Open index.html file and follow the steps.

Header and footer updates are same for all pages. So will explain once here.

Header - Logo

  1. Replace "images/logo.png" with your logo image url or source.

Navmenu

This is the basic structure.
  1. Replace "Primary menu" & "PRIMARY_MENU_LINK" with the menu name and url .
  2. Replace "Sub menu" & "SUB_MENU_LINK" with your sub menu name and url .
  3. You can add unmited submenus. Submenus can also be nested.

Custom Homepage slider.
  1. Replace "demo/slide/1.jpg" with the 1st slier image source or url.
  2. replace the text between "<h2>" "</h2>" with the slide title.
  3. replace the text between "<p>" "</p>" with the slide description.
  4. Same for all. Unlimited Slides can be added

Stories content

		

			
5 Apr 2013 / Helping

			
More food for Victoria

			
			
Sed eu orci dictum, condimentum orci et, adipiscing leo. Etiam luctus tincidunt neque non posuere. Praesent eu augue...

			Read more
			
    
				
    • 
				
    • 
				
    •
This is the basic structure. Same as for all.
  1. Replace "Helping" with your category.
  2. Replace "demo/blog/1.jpg" with any story image url or source.
  3. replace the text between "<h3>" "</h3>" with the story title.
  4. replace the text between "<p>" "</p>" with the story description.
  5. Replace the social icons as per its name.

Team wrap


					

						

							
						

						

							
David Kowalsky Executive Pastor

							
Mauris sit amet leo neque. Etiam tempus massa dolor, ac tempor ligula pharetra ut. Proin in ornare dui. In ut orci feugiat, dignissim massa in, dignissim felis.

							

							Read more
							
    
								
    • 
								
    •
  1. replace "demo/team.1.jpg" with your staff profile image url or source.
  2. replace the text between "<h4>" "</h4>" & "<h6>" "</h6>" with the staff name and profession.
  3. replace the text between "<p>" "</p>" with the staff info.
  4. Social Links - Replace as per the social name

Google Map

Open "main.js" file from js folder and find this code 
40.7143528,-74.0059731
In this 40.714.. is the latitude and -74.00... is longitude. You have to chnage this as per your location. TO obtain your location value, go to this link
Update you location and get the values.

Ministries content

Now find this one

						

							
							
Men Ministry

Contact form

Now open "contact.php" from the folder "PHP".

Find "YOUR NAME HERE" and replace it with your name.
Find "YOUR EMAIL ID HERE" and replace it with the email id, where you want to receive the mail.

Thats it. You are done. Now your website is ready to launch.




PSD files

PSD files are not added with this template. You can get it here

Sources and Credits

We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.

Fonts
jQuery Plugins
Images Images in live preview are not included to the template.





Once again, thank you so much for purchasing this theme.
As I said at the beginning, We'd be glad to help you if you have any questions relating to this theme. We I'll do our best to assist.

Thanks

Spyropress