BergTheme Documentation

Home main view your site

The home page includes navigation and basic information ( opening hours and v-card ). We thought it would be nice give you a choice main view into your site so we created 4 different variants home page. ( classic, fullscreen slider, fullscreen video, static page and parallax). All information about settings the navigation you find here. More information about changing styles find here.

Classic home page

The classic home page includes background image with overlay, transparent and close navigation at the top of page, big logo and basic information with 2 buttons ( you can also add a short description ). All settings are customizable, so if you want to add or remove some setting, change a part of markup and insert the appropriate class. Needed information about classes here. As you can see we used overlay for better text visibility. We thought it looks nice but if you don't like you can remove it. If you don't know how can do it, check styles. To add own image, change url in markup presented below this text.

		index.html
		...
		<div class="home-bg-image opacity-10"  style="background-image: url('img/splash3.jpg');"></div>
		...

		home.less
		...
		.home-bg-image { position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index:-1; overflow: hidden !important; background-size: cover; background-position: center center; }
		...

Home page with fullscreen slider

We used Superslides jquery plugin to simply add images. Just insert your url images to content. Of course you can add as many images as you wish. The navigation and other infomation are static.

		<section class="item hidden-xs">
			<div class="slider-wrapper">
				<div id="slides">
					<ul class="slides-container">
						<li>
							<img src="img/splash.jpg" data-src="" alt="">
						</li>
						<li>
							<img src="img/splash2.jpg" data-src="" alt="">
						</li>
						<li>
							<img src="img/splash3.jpg" data-src="" alt="">
						</li>
					</ul>
				</div>
			</div>
		</section>

Home page with fullscreen video

You can create an unique page by add own video from event or inside restaurant. Remember it must be a Youtube® movie . More information about plugin and settings video here.

		<section class="item">
			<div class="video-wrapper" style="position:absolute; width: 100%; height: 100%; left: 0; top: 0; "></div>
			<div id="P1" class="player" style="display:block; margin: auto; background: rgba(0,0,0,0.5);" data-property="{videoURL:';http://youtu.be/dSpQ5zdR4dE',containment:'.video-wrapper',startAt:0,mute:true,autoPlay:true,loop:true,opacity:1, showControls: false}"></div>  <-- here add video url 
			<div class="video-mask hidden-xs"></div>
		</section>

Static home page

All settings in this home page are the same in classic page. To change background image, find a class "home-bg-image" in home.less and add url image.

		home.less
		...
		.home-bg-image { position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index:-1; overflow: hidden !important; background-image: url('../img/paralax-berg.jpg'); background-size: cover; background-position: center center; }
		...

Home page with parallax

If you want to have parallax effect into your home page, add lines to markup presented below. Set a background image by insert url. How you can do this? Read about classic and static page.