Bishop Documentation

By webRedox - www.webredox.com

Home Pages Customization

---

In this section we will explain how to customize home pages

CUSTOMIZING HOME PAGE DEFAULT

So first, we need to define which css files and js files are needed for home page to work like on preview. Let's start with default home page.

---

Customizing Default home page

SLIDER CUSTOMIZATION

As already mentioned this theme comes with Revolution slider. It is pretty easy to use and we included it's original documentation. So to accomplish the same look, or similar here is how it works.

First of all keep it's main structure the same. That is:

<div class="main-slider">
	<div class="tp-banner-container">
		<div class="tp-banner">
			
			<ul>
			
			</ul>
		
		</div>
	</div>
</div>

Inside the ul is the place to define your slides. Every slide is one list item. First to do is to place the image that will be on the slide background inside that "li". All images that slider uses can be placed in any folder (slides). Arrow, buttons and other items must be placed inside "rs-plugin" folder. All styling for revolution slider is placed in "rs-plugin/css/revolution.css" folder. So if you want to customize anything that's the place to do that. To position the item inside the slide (image, title,...), you must put "x" & "y" coordinates where you want it to be. Also you can use class to define the animation. For example "lfl" means "long-from-left". You can see more about it in Revolution slider documentation. For revolution slider to work, you must also include some js code at the bottom of the page. You can just go to the index.html file and simply copy-paste it.

---

PAGE CONTENT WRAPPERS

So, page content, that means everything below the slider and above the footer is placed inside container div's. On first home page there are several div's with id "content". Open index.html file for easier understanding. HTML structure looks like this:

	<div class="container">
		<div id="content">
			<div class="row">
				<div class="col-sm-12">
				
				</div>
			</div>
		</div>
	</div>
		

---