Introduction

Site Structure

Change Site Background Colour

Change Colour Scheme

Home Page Content Slider

Testimonial Slider

Portfolio Image Galleries

YouTube/Vimeo Video Configuration

Buttons

Image Size Reference

File Sources and Credits

‘Fundamental’ Serif WebPlus Template ~ Documentation by Serif Templates

 

‘Fundamental’ Serif WebPlus Template

Hello! First of all I would like to thank you for purchasing this template! :)

 

If you have any questions that are beyond the scope of this help file, please feel free to ask your question in the template discussion forum at: seriftemplates.com/forum

 

This file will teach you how to set up and use the ‘Fundamental’ - Serif WebPlus Template.

 

The content found in this file is very extensive and may give you the impression the template is difficult to set up, in fact it’s not, it is just that a website with added widgets, sliders and additional coding such as this needs some explanation to help you modify it with your own content.

 

Don’t forget you can print off the documentation found here by clicking the print icon in the top right corner!

 

Have fun with your new template!

 

Regards

Neil

Table of Content

Introduction ~ Top

The Fundamental template is a massively versatile theme for Serif WebPlus, by changing the sites background colour you instantly set the style of your site to match the colours of your business or organisation. The home page content slider can display a simple image or if you’re a web designer, with few simple tweeks, can display a browser background so you can show off your portfolio - Check out the demo.

Want PrettyPhoto image galleries with the option to like your images on Facebook or tweet on Twitter? You’ve got it! You can also play YouTube or Vimeo videos through it!

Let your site visitors hear what people are saying about you with the nifty Testimonial Slider.

As with all our templates the download comes in both WebPlus X4 and X5 file format and is packaged with a ton of documentation to help you customise the site to your own needs.

Site Structure ~ Top

All image, JavaScript and CSS files that are used in this template are already inserted in to the site using the built in WebPlus File Manager, uploading the website to your server using WebPlus’ built in ftp uploader will include all the relevant files and place them in the correct folders, no need to use a 3rd party ftp program.

 

Master Pages

Our template takes advantage of WebPlus’ ability to layer Master Pages. You’ll notice there are 3 Master Pages - A, B and C. The list below details each Master Pages properties:

Master Page A: Holds the background used throughout the site, excluding the home page.

Master Page B: Contains the navigation elements, logo, testimonial slider and footer. All the content in the footer has been attached to the bottom of the page so no matter how long you make the pages in the rest of the site the footer will always remain at the bottom of the page.

Master Page C: Used for the navigation bar in Project Brief Pages.

 

Tip

When creating new pages that require widgets, features or sliders already used elsewhere, it is recommended to clone the page you wish to duplicate then update the content ie image file locations and text. This option is preferred to simply copying over HTML Code Fragments from other pages as the code inserted in the head of the page may also need inclusion to allow the add-on to work.

Changing Site Background Colour ~ Top

You can very easily customise the background colour of the template, to do this right click the Home page and select Page Properties, from here you can set the colour for the background. Then do the same for Master Page A.

Image Size Reference ~ Top

Home Page Content Slider: 458 X 320

Home Page Content Slider - With Browser Window: 458 X 339

Gallery/Home Page Thumbnails: 170 X 127

Project/Video Brief: 600 X 200

Portfolio Image Galleries ~ Top

The portfolio page’s Galleries use PrettyPhoto, a lightbox pluggin for jQuery.

Before you begin to add your own images it will be necessary to resize them and optimise them for the web using photo editing software.

The image sizes for each page layout is referenced below. The thumbnail images are contained within the file manager - Click Tools > Site manager > File manager > images > You’ll see that each file, for example ‘thumnails’ contains a list of images (these are the thumbnails) and a file named ‘fullscreen’ which can be used for housing the relating images. Delete the old images and insert your own, making sure they are sized correctly for the page layout and the names correlate to the code inserted on the page in the HTML Code Fragment. Naming the images ‘01.jpg’ etc, will prevent the need to change much of the HTML.

To help you understand how the link to the pop up window works, below is an example:

Example image link in HTML Code Fragment:

<div class="prettyphoto-gallery">

<a href="images/fullscreen/01.jpg" rel="prettyPhoto[folio]"><span class="plus"></span><img src="images/thumbnails/01.jpg" width="170" height="127" alt="" /></a>

</div>

Break down of the code:

<div class="prettyphoto-gallery">  Gives the images the border.

<a href="images/fullscreen/01.jpg"  Is the link to the full size images. Change the href of your link so it points to the full size image.

rel="prettyPhoto  Calls PrettyPhoto in to action.

[folio]  Links the image to it’s own unique gallery on a single page. All the images with this reference will become a group and be navigational via the arrow button on the pop-up.

<span class="plus"> Puts the plus sign graphic in the top right corner of the image.

<img src="images/thumbnails/01.jpg"  Is the link to the thumbnail.

width="170" height="127"  Sets the thumbnail image size.

alt=""  Add a description for screen readers or if the image can’t be displayed.

 

Tips

The large images in the ‘fullscreen’ file that pop-up can be any size you like, we recommend anything up to 900 pixels in width.

YouTube and Vimeo Video Configuration ~ Top

The YouTube and Vimeo video pop-up uses PrettyPhoto, the same plugin that is used for the picture galleries.

Get the YouTube/Vimeo embed link for the video you wish to use and set it as your hyperlink, within the code. To do this double click the HTML Code Fragment on the page and change the highlighted blue part below to point to your video.

It is important to note that to display a play icon at the top right of the thumbnail image you must make sure the class section highlighted in yellow in the code reads ‘plus-video’.

<div class="prettyphoto-gallery">

<a href="http://www.youtube.com/watch?v=EViy1G_hwNc&feature=fvwrel" rel="prettyPhoto"><span class="plus-video"></span><img src="images/brief/06.jpg" width="600" height="220" alt="" /></a>

</div>

Testimonial Slider ~ Top

The slider is easy to update with your own testimonials, you can have as many or as few as you wish but it is important not to overload each panel with too much text. The limit is 550 Characters, this handy online tool is good for counting how many characters you’ve written: lettercount.com

To add your own content navigate to Master Page B and double click the HTML Code Fragment at the bottom of the page, this will bring up the HTML code for the testimonial slider in the WebPlus workspace.

The content for each panel of the slider looks like this:

<li>

      <p>Testimonial text goes here</p>

      <p>Joe Doe</p>

      <div class="clear"></div>

</li>

Update each section as required.

 

Setting the Slider Speed times

Press Alt + S in the WebPlus Workspace and scroll to the section below and  set the ‘speed’ and ‘pause’ times to your own liking. Higher figures result in slower transitions and longer pause times.

   $('#slider3').bxSlider({

           mode: 'horizontal',

           speed: 500,

           pause: 5000,

           infiniteLoop: true,

           captions: false,

           auto: true,

           controls: false,

           pager: true,

           randomStart: true

     });

Home Page Content Slider ~ Top

There are 2 options for displaying images in the slider, one option is to have a browser window as a background, this is perfect for website designers looking to show off their portfolio. The second is to simply have the image showing with a nice shadow effect around it.

To set the slider to show the browser window background, you need to set the yellow highlighted text as ‘slider1’ and the image height size to ‘339’, your images will need to reflect these dimensions and reside in the ‘slider1’ file, click on Tools > Site Manager > File Manager > Images > slider1.

<ul id="slider1">

<li>

<img src="images/slider1/01.jpg" width="458" height="339" />

<h2>Fundamental Template</h2>

<p>Mel rebum constituam ut, erat prompta delenit est ea. Modus splendide mel eu. Duo id habeo oporteat, rebum aliquyam in his, vel et facer tempor officiis. Ne his doming salutandi, sea eu salutatus persequeris, putant latine aperiri ei mei. Pri at inani bonorum consulatu, convenire vulputate ius et. Vim solet vivendo efficiendi id, per impedit recteque ad.</p>

<a class="button" href="#"><span>Find Out More</span></a>

 

To set the slider to show images with a shadow background, you need to set the yellow highlighted text as ‘slider2’ and the image height size to ‘320’, your images will need to reflect these dimensions and reside in the ‘slider2’ file, click on Tools > Site Manager > File Manager > Images > slider2.

<ul id="slider2">

<li>

<img src="images/slider2/01.jpg" width="458" height="320" />

<h2>Fundamental Template</h2>

<p>Mel rebum constituam ut, erat prompta delenit est ea. Modus splendide mel eu. Duo id habeo oporteat, rebum aliquyam in his, vel et facer tempor officiis. Ne his doming salutandi, sea eu salutatus persequeris, putant latine aperiri ei mei. Pri at inani bonorum consulatu, convenire vulputate ius et. Vim solet vivendo efficiendi id, per impedit recteque ad.</p>

<a class="button" href="#"><span>Find Out More</span></a>

 

Add your own title between the <h2> elements <h2>here</h2>, and your own body text between the <p> elements <p>here</p>.

Set your call to action buttons to link somewhere in your site (the blue highlighted section) and add your own text (the yellow highlighted part), the button will automatically extend to accommodate more text.

<a class="button" href="Link Goes Here"><span>Button Text</span></a>

 

Setting the Slider Speed times

Press Alt + S in the WebPlus Workspace and scroll to the section below and  set the ‘speed’ and ‘pause’ times to your own liking. Higher figures result in slower transitions and longer pause times.

$(document).ready(function(){

 $('#slider1, #slider2').bxSlider({

           infiniteLoop: true,

           speed: 500,

           pause: 5000,

           auto: true,

           pager: false,

           autoHover: true

    });

File Sources and Credits ~ Top

PrettyPhoto Lightbox

BXSlider

 

Thanks again for purchasing this template, I hope it is a success for you. Please visit our dedicated forum if you have any problems, we’ll do our best to help you out: seriftemplates.com/forum

And don’t forget to call in to check our new additions at Serif Templates

Neil ~ Serif Templates

Back to Table of Content

Button ~ Top

You can add buttons anywhere you like on the site by copying the HTML Code Fragment of a button and updating it with your own link and text. The button will automatically extend in width the more text you add.

The HTML for the button looks like this:

<a class="sml_button" href="Your link goes here"><span>Button text goes here</span></a>

Simply double click the buttons HTML Code Fragment and add your own link (the blue highlighted section) and your button text (the highlighted yellow part)

Change Colour Scheme ~ Top

Click ‘Tools’ in the WebPlus workspace and select ‘Colour Scheme Designer’ this brings up the colour scheme properties for the template down the right hand column, this is where the text colours can be changed.

Colour Scheme 1 = Body text colour throughout the template

Colour Scheme 2 = Header text colour

Hyperlink, Followed Hyperlink and Active Hyperlink can be set to the same colour as the header text, but the choice of colours is up to you.