In first part we downloaded the Master Slider jQuery files, uploaded them to our theme folder and also wrote the custom siteconfig file to extend the siteconfig.
In this part we will add the theme code for our homepage master slider and other fields in siteconfig.
1.Now lets edit our Page.ss I use the Simple theme so I add code like this in my themes/simple/templates/ folder
<!DOCTYPE html>
<!--[if !IE]><!-->
<html lang="$ContentLocale">
<!--<![endif]-->
<!--[if IE 6 ]><html lang="$ContentLocale" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="$ContentLocale" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="$ContentLocale" class="ie ie8"><![endif]-->
<head>
<% base_tag %>
<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta property="og:image" content="{$ThemeDir}/images/logo.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
$MetaTags(false)
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<% require themedCSS('reset') %>
<% require themedCSS('typography') %>
<% require themedCSS('form') %>
<% require themedCSS('layout') %>
<% require javascript('framework/thirdparty/jquery/jquery.js') %>
<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
<link rel="stylesheet" href="{$ThemeDir}/masterslider/style/masterslider.css" />
<link href="{$ThemeDir}/masterslider/skins/light-3/style.css" rel='stylesheet' type='text/css'>
</head>
<body class="$ClassName<% if not $Menu(2) %> no-sidebar<% end_if %>" <% if $i18nScriptDirection %>dir="$i18nScriptDirection"<% end_if %>>
<% include Header %>
$Layout
<% include Footer %>
<%-- Please move: Theme javascript (below) should be moved to mysite/code/page.php --%>
<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"></script>
<script type="text/javascript" src="{$ThemeDir}/masterslider/jquery.easing.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/masterslider/masterslider.min.js"></script>
</body>
</html>
2. Now lets add HomePage.ss to theme/simple/templates/Layout/ folder with this code:
<div class="master-slider ms-skin-light-3" id="masterslider">
<% loop SiteConfig %>
<% loop Slides %>
<div class="ms-slide $Name" data-delay="$Durnation">
<img src="$Image.URL" data-src="$Image.URL" alt="$Name Background" title="$Name"/>
</div>
<% end_loop %>
<% end_loop %>
</div>
<script type="text/javascript">
(function ( $ ) {
"use strict";
$(function () {
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:1100, // slider standard width
height:400, // slider standard height
view:"fade",
overPause:false, // true if you wanna that on hover the slider is paused or false if not
space:2,
start:1,
fullwidth:true,// True if you want the slder to be fullwidth or false if its max width is the size of width
grabCursor:true,
swipe:true,
mouse:true,
loop:true,
preload:0,
autoplay:true
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
slider.control('bullets');
});
})(jQuery);
</script>
<div class="main" role="main">
<div class="inner typography line">
<div class="content-container unit size3of4 lastUnit">
<article>
<h1>$Title</h1>
<div class="content">$Content</div>
</article>
$Form
$PageComments
</div>
</div>
</div>
3. Flush the site adding ?flush=all in the end of website URL and press enter.
4. Now go to admin->pages and choose homepage (in my demo its home). Go to the setting tab and change the Page Type to HomePage and save the page.
5. Now lets add the images to slider for that you need to go back the website settings page slider tab
7. Now lets go to front end and look how the website looks like.
6. We also have other stuff like logo, Email, Phone, Facebook Url and Google plus url. use codes below:
For email use in your href - $SiteConfig.Email or <% loop SiteConfig %>$Email<% end_loop %> For phone use in your theme - $SiteConfig.Phone or <% loop SiteConfig %>$Phone<% end_loop %> For Google plus use in your href - $SiteConfig.GooglePlus or <% loop SiteConfig %>$GooglePlus<% end_loop %> For Facebook use in your href - $SiteConfig.Facebook or <% loop SiteConfig %>$Facebook<% end_loop %> For LOGO image use line: <% loop SiteConfig %> <% loop LogoImage %> $Setheight(100) <% end_loop %> <% end_loop %>
7. Don’t forget to flush the theme files after editing using ?flush=all in the end of your website URL.
In Master slider theme files you can choose from 10 diffrent skins. To change the skin change it in the code and css tag on themes/simple/templates/Page.ss like so:
For metro use in HomePage.ss
<div class="master-slider ms-skin-metro" id="masterslider">
and in css tag
<link href="{$ThemeDir}/masterslider/skins/metro/style.css" rel='stylesheet' type='text/css'>
Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!
