Thank you for purchasing our template Pacifico. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
This template has fixed layout.
This zip archive contains 20 html files (home page, different content pages, shortcodes and typography, left/right sidebar, full width page, 404 error page, 8 gallery pages, 5 blog pages, contact page, social profiles page.
Theme skin and page layout you can edit in "body" tag:
<body class="standard simple"> // For changing page layout - you need change first class to standard/vertical/horizon, and for changing theme skin - you need change second class to simple/jeans/wood/black/brown/purple/green/red.
<script type="text/javascript"> if (window.jQuery == undefined){ document.write( unescape('%3Cscript src="js/jquery-1.6.4.min.js" type="text/javascript"%3E%3C/script%3E') ); } </script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
Main navigation, logo and hide button are located in the upper zone - div with id "header":
<!-- _________________________ Start Header _________________________ -->
<div class="header_wrap">
<div id="header">
<div class="header_inner">
<a class="logo" title="Pacifico" href="index.html">
<img alt="Pacifico" src="images/logo.png" />
<img class="logo_text" alt="Pacifico" src="images/logo-text.png" />
</a>
<!-- _________________________ Start Navigation _____________________ -->
<div class="navigation_wrap">
<ul id="navigation">
<li><a href="about.html">About<span>Read my bio</span></a></li>
<li><a href="shortcodes.html">Features<span>Tasty cakes</span></a>
<ul>
<li><a href="typography.html">Typography</a></li>
...
</ul>
</li>
<li><a href="gallery_three.html">Gallery<span>Photo temple</span></a>
<ul>
<li><a href="gallery_motion.html">Motion Gallery</a></li>
...
</ul>
</li>
...
<li><a href="contacts.html">Contacts<span>Don't be shy</span></a></li>
</ul>
</div>
<!-- _________________________ Finish Navigation ____________________ -->
</div>
<div class="header_arrow_wrap">
<a href="#" class="header_arrow"><span> </span></a>
</div>
</div>
</div>
<!-- _________________________ Finish Header ________________________ -->
All information in main content area is in div with id "middle":
<!-- _________________________ Start Middle _________________________ -->
<div id="middle">
<!-- _________________________ Start Content _________________________ -->
...
<!-- _________________________ Finish Content _________________________ -->
<!-- _________________________ Start Sidebar ________________________ -->
...
<!-- _________________________ Finish Sidebar _______________________ -->
<!-- _________________________ Start Bottom _________________________ -->
...
<!-- _________________________ Finish Bottom ________________________ -->
<!-- _________________________ Start Footer _________________________ -->
...
<!-- _________________________ Finish Footer ________________________ -->
</div>
<!-- _________________________ Finish Middle ________________________ -->
Div id "middle" can include 6 zones:
Div with id "home", which displays headline of the page:
<!-- _________________________ Start Home _________________________ --> <div id="home"> <h2 class="home">About</h2> </div> <!-- _________________________ Finish Home _________________________ -->
Div with id "content", which displays content of the pages:
<!-- _________________________ Start Content _________________________ --> <div id="content"> <div class="entry"> ... </div> </div> <!-- _________________________ Finish Content _________________________ -->
Sidebar content wich is in a div with id "sidebar", and contains some helpful and additional information:
<!-- _________________________ Start Sidebar _________________________ --> <div id="sidebar"> <div class="widget widget_links"> <div class="one_third"> <h3 class="widgettitle">More About Us</h3> <ul> <li><a href="about.php">About Us</a></li> ... </ul> </div> </div> ... </div> <!-- _________________________ Finish Sidebar _________________________ -->
Or it can consist only div with class "middle_conent" insted of "sidebar" and "content" id's in fullwidth pages:
<!-- _________________________ Start Content _________________________ --> <div class="middle_content"> <div class="entry"> ... </div> </div> <!-- _________________________ Finish Content _________________________ -->
Bottom widgets is in div with id "bottom", this zone is in bottom of page:
<!-- _________________________ Start Bottom _________________________ -->
<div id="bottom">
<div class="widget widget_follow">
<div class="one_third">
<h4 class="widgettitle">Follow</h4>
<ul>
<li class="flickr"><a href="#">My Flickr Fotostream</a></li>
...
</ul>
</div>
</div>
<div class="widget widget_links">
<div class="one_third">
<h4 class="widgettitle">Links</h4>
<ul>
<li><a href="#">Cmsmasters on Themeforest</a></li>
...
</ul>
</div>
</div>
<div class="widget widget_custom_comments_entries">
<div class="one_third last">
<h4 class="widgettitle">Recent Comment</h4>
<ul>
<li>
<p>Lorem ipsum dolor sit amet...</p>
</li>
...
</ul>
</div>
</div>
<div class="cl"></div>
</div>
<!-- _________________________ Finish Bottom ________________________ -->
You can write copyrights or another text in footer zone - div with id "footer":
<!-- _________________________ Start Footer _________________________ --> <div id="footer"> <p>Pacifico © 2011 by cmsmasters</p> </div> <!-- _________________________ Finish Footer _________________________ -->
There is 6 css files in template.
<head> <meta content="charset=utf-8" /> // Character Encoding <meta name="description" content="CMSMasters website template" /> // Page description <meta name="keywords" content="html, css, template" /> // Page keyvords <link rel="shortcut icon" href="images/favicon.png" type="image/png" /> // Page favicon <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> // Main css file <link rel="stylesheet" href="css/styles/prettyPhoto.css" type="text/css" media="screen" /> // PrettyPhoto lightbox css file <link id="gFontName" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cuprum:rerular,italic,bold,bolditalic" type="text/css" /> // Custom Google Font <!--[if lt IE 9]> <link rel="stylesheet" href="css/styles/ie.css" type="text/css" /> // Css file for Internet Explorer <![endif]--> <title>Pacifico</title> // Title of the page </head>
General css file
is a style.css, it contains general parameters of all html-pages.
General files devided on zones with html-files id's.: "header", "middle", "home", "content", "sidebar", "bottom", "footer", "widgets", "motion slider".
/* ---------------------------------- Header ----------------------------------------------*/ ... /* ---------------------------------- Middle ----------------------------------------------*/ ... /* ---------------------------------- Home ----------------------------------------------*/ ... /* ---------------------------------- Content ----------------------------------------------*/ ... /* ---------------------------------- Sidebar ----------------------------------------------*/ ... /* ---------------------------------- Bottom ----------------------------------------------*/ ... /* ---------------------------------- Footer ----------------------------------------------*/ ... /* ---------------------------------- Widgets ----------------------------------------------*/ ... /* ---------------------------------- Motion Slider ----------------------------------------------*/ ...
Also there is 2 support css-files:
prettyPhoto.css - is responsible for the visual design of the lightbox.
ie.css - configuration file of Internet Explorer special settings.
Styles for background slider and template elements included to style.css file.
This template contains 3 JavaScript files.
1. jquery-1.6.4.min.js
2. jquery.prettyPhoto.js
3. script.js
1. JQuery is a JavaScript Framework, which significantly reduces the amount of code that the user has to write himself, version 1.6.4.
2. JQuery-plugin which responsible for PrettyPhoto lightboxes, version 3.1.2.
3. JQuery libraries and user interface scripts, includes:
- Easing JQuery-plugin - used in background slider and template scripts
- Superfish JQuery-plugin - used in navigation animation
- Motion Slider JQuery-plugin - used in background slider
- Tooltips JQuery-plugin - used in tooltips and has such parametrs:
jQuery(document).ready(function(){
jQuery('.link_tooltip').tooltip({ // class that used
effect:'slide', // animation effect
direction:'up', // animation direction (up/down/left/right)
slideOffset:15, // offset parametr
slideInSpeed:300, // animation in speed
slideOutSpeed:300, // animation out speed
position:'bottom center' // position of tooltip
});
});
- Social Sharing JQuery-plugin - used in sharing
- some other scripts...
In the archive you can also find the PSD folder.
There are some of the files with black and white styles. Note that this is our working material and there can be some mismatch with design presented in html / php version. But generally you can find many styles and graphics to change Pacifico design or use them at your discretion.
The Pacifico archive include 1 PHP file.
sendmail.php - it is file that sand mail from contact form:
<?php
if (isset($_REQUEST['type']) && $_REQUEST['type'] == 'form'){
if (isset($_REQUEST['contactemail'])){ $mailTo = $_REQUEST['contactemail']; }
if (isset($_REQUEST['name'])){ $mailFromName = $_REQUEST['name']; }
if (isset($_REQUEST['email'])){ $mailFromEmail = $_REQUEST['email']; }
if (isset($_REQUEST['website'])){ $website = $_REQUEST['website']; } else { $website = 'unknown'; }
if (isset($_REQUEST['subject'])){ $subject = $_REQUEST['subject']; }
if (isset($_REQUEST['message'])){ $message = $_REQUEST['message']; }
if (isset($_REQUEST['mywebsite'])){ $mailFromWebsite = $_REQUEST['mywebsite']; }
$msg = "This message was send from: $mailFromWebsite \n\nby: $mailFromName \n\nEmail: $mailFromEmail \n\nWebsite: $website \n\nSubject: $subject \n\nText of message: $message";
$headers = "MIME-Version: 1.0\r\n Content-type: text/html; charset=utf-8\r\n From: $mailFromEmail\r\n Reply-To: $mailFromEmail";
mail($mailTo, $subject, $msg, $headers);
}
if (isset($_REQUEST['type']) && $_REQUEST['type'] == 'widget'){
if (isset($_REQUEST['contactemail'])){ $mailTo = $_REQUEST['contactemail']; }
if (isset($_REQUEST['name'])){ $mailFromName = $_REQUEST['name']; }
if (isset($_REQUEST['email'])){ $mailFromEmail = $_REQUEST['email']; }
if (isset($_REQUEST['message'])){ $message = $_REQUEST['message']; }
if (isset($_REQUEST['mywebsite'])){ $mailFromWebsite = $_REQUEST['mywebsite']; }
$subject = 'Quick Message';
$msg = "This message was send from: $mailFromWebsite \n\nby: $mailFromName \n\nEmail: $mailFromEmail \n\nSubject: Quick Message \n\nText of message: $message";
$headers = "MIME-Version: 1.0\r\n Content-type: text/html; charset=utf-8\r\n From: $mailFromEmail\r\n Reply-To: $mailFromEmail";
mail($mailTo, $subject, $msg, $headers);
}
?>
CMSMasters Motion Slider (background slider) has such parameters (default):
jQuery('#slider').cmsmsMotionSlider({
sliderWidth:1000, //slider width
sliderHeight:500, //slider height
pauseOnHover:true, //enable/disable pause on mouseover
showControl:true, //enable/disable all navigations
showNav:true, //enable/disable control navigation
navThumbs:true, //show slides thumbnails on control navigation
showArrows:true, //enable/disable arrow navigation
showPause:true, //enable/disable pause/play button
showTimer:true, //enable/disable timer
showLightbox:true, //enable/disable lightbox buttons on control navigation items
showCaptions:true, //enable/disable slides captions
useCanvas:true //enable/disable slider motion effect
});
CMSMasters Motion Slider slides may have the following parameters:
<li data-thumb="images/slider/thumbs/img2.jpg" data-pause="5" data-animation="30" data-start="top left" data-finish="bottom right" data-zoom="in"> //all possible slide parameters
<a class="video autoplay autostop loop hd hideControls" href="http://www.youtube.com/watch?v=-PAjEHhz2mw"><img src="images/slider/img2.jpg" alt="Banner Image 2" /></a> //all possible video parameters
<div class="cmsmsSlideCaption" data-width="300" data-top="300" data-left="300"> //all possible caption parameters
<h1>Caption Title</h1>
<p>Some caption text...</p>
<a href="#">Caption link</a>
</div>
</li>
Slide parameters and accepted values:
| Parameter | Values |
|---|---|
| data-thumb |
thumbnail img url for thumb preview if parameter is missing - slider will use original image URL but with small width and height |
| data-pause |
pause time for showing slide image, before show next slide (in seconds) if parameter is missing - slider will use default value (5 seconds) |
| data-animation |
slide motion effect animation speed (in seconds) if parameter is missing - slider will use default value (30 seconds) |
| data-start |
slide motion effect start position for example: "top left", where first parameter - vertical position, second parameter - horizontal position vertical position can be "top", "bottom" or "center" horizontal position can be "left", "right" or "center" if parameter is missing - slider will use random value |
| data-finish |
slide motion effect finish position for example: "bottom right", where first parameter - vertical position, second parameter - horizontal position vertical position can be "top", "bottom" or "center" horizontal position can be "left", "right" or "center" if parameter is missing - slider will use random value |
| data-zoom |
slide motion effect zoom mode - can be "in", "out" or "none" if parameter is missing - slider will use random value |
Slide caption parameters and accepted values:
| Parameter | Values |
|---|---|
| data-width | slide caption width in pixels |
| data-top | slide caption top position in pixels |
| data-left | slide caption left position in pixels |
Accepted images variations:
1. Simple image:
<img src="images/slider/img.jpg" alt="Banner Image" />
2. Image with link that open in same tab:
<a href="http://cmsmasters.net/"><img src="images/slider/img.jpg" alt="Banner Image" /></a>
3. Image with link that open in new tab:
<a target="_blank" href="http://cmsmasters.net/"><img src="images/slider/img.jpg" alt="Banner Image" /></a>
4. Image with lightbox:
<a rel="prettyPhoto" href="images/slider/large_img.jpg"><img src="images/slider/img.jpg" alt="Banner Image" /></a>
5. Image with video:
<a class="video autoplay autostop loop hd hideControls" href="http://www.youtube.com/watch?v=-PAjEHhz2mw"><img src="images/slider/img.jpg" alt="Banner Image" /></a>
If you want enable video on slide - you need wrap slide image tag (img) into link tag (a) with class video, than add video slide parameters by adding to video class another classes: autoplay, autostop, loop, hd, hideControls.
Video slide parameters:
| Class | Description |
|---|---|
| video |
enable video on slide if the class is missing then link just open href attribute URL |
| autoplay |
play video on slide load if the class is missing then video play on click to the slide |
| autostop |
close video and start next slides when video ends if the class is missing then when video ends it stop playing and for playing next slide you need click to the close button |
| hd |
set video quality to high definition if the class is missing then video quality will be default |
| loop |
loop video again when it ends if the class is missing then the video will be stopped |
| hideControls |
hide video player controls (supported only with youtube videos) if the class is missing then video player controls will be enabled |
In a tag href attribute you need insert video URL from vimeo (for example "http://vimeo.com/19625497") or youtube (for example "http://www.youtube.com/watch?v=-PAjEHhz2mw").
For example if you want play video in HD quality when slide start and start next slide when the video ends, you need add such classes: class="video autoplay autostop hd".
And your slide HTML code must be:
<li data-thumb="images/img_thumb.jpg">
<a href="http://vimeo.com/19625497" class="video autoplay autostop hd"><img src="images/img.jpg" alt="Image description" /></a>
</li>
If you need enable slider on page - add this code after body tag:
<script type="text/javascript">
jQuery(document).ready(function(){ //Slider Load And Resize Scripts
if (jQuery.browser.msie && jQuery.browser.version < 9){
var $windowWidth = jQuery(window).width()+17;
var $windowHeight = jQuery(window).height()+17;
} else {
var $windowWidth = window.innerWidth;
var $windowHeight = window.innerHeight;
}
jQuery('body').append('<div id="preloaderMotion" />');
jQuery('a.header_arrow').addClass('hidden');
var $slider = '#sliderMotion';
var $preloader = '#preloaderMotion';
var $images = jQuery($slider+' li img');
var $max = $images.length;
$images.each(function(){
var img = new Image();
img.src = jQuery(this).attr('src');
var intervalId = setInterval(function(){
if (img.complete){
clearInterval(intervalId);
$max--;
jQuery($preloader).append('<img id="nMotion'+$max+'" src="'+img.src+'" width="60" height="35" alt="" />');
jQuery($preloader).find('img#nMotion'+$max).animate({opacity:1}, 500);
if ($max == 0){
LoadImageStart(jQuery($slider));
jQuery($preloader).fadeOut(500, function(){
jQuery(this).css({display:'none'});
showHideContent();
});
}
}
}, 50);
});
function LoadImageStart(slider){
slider.cmsmsMotionSlider({ //Slider Start
sliderWidth:$windowWidth,
sliderHeight:$windowHeight,
pauseOnHover:false,
showPause:false,
showCaptions:false
});
jQuery('a[rel="prettyPhoto[bgSlider]"]').prettyPhoto({animationSpeed:'normal', deeplinking:false, social_tools:false});
}
jQuery(window).resize(function(){
if (jQuery.browser.msie && jQuery.browser.version < 9){
var $windowWidth = jQuery(window).width()+17;
var $windowHeight = jQuery(window).height();
} else {
var $windowWidth = window.innerWidth;
var $windowHeight = window.innerHeight;
}
jQuery('.cmsmsMotionSliderContainer, .cmsmsMotionSlides, .cmsmsMotionSlides canvas, .cmsmsMotionSlides img, .cmsmsMotionSlides iframe').css({width:$windowWidth+'px', height:$windowHeight+'px'});
jQuery('.cmsmsMotionControl').css({height:$windowHeight+'px'});
jQuery('.cmsmsMotionNavigation').css({height:parseInt($windowHeight - 195)+'px'});
});
});
</script>
<!-- _________________________ Start Slider __________________________ -->
<ul id="sliderMotion"> //Slider Code
<li data-thumb="images/slider/thumbs/img1.jpg">
<img src="images/slider/img1.jpg" alt="Banner Image 1" />
</li>
<li data-thumb="images/slider/thumbs/img2.jpg">
<a class="video autostop hd" href="http://www.youtube.com/watch?v=-PAjEHhz2mw"><img src="images/slider/img2.jpg" alt="Banner Image 2" /></a>
</li>
<li data-thumb="images/slider/thumbs/img3.jpg">
<img src="images/slider/img3.jpg" alt="Banner Image 3" />
</li>
<li data-thumb="images/slider/thumbs/img4.jpg">
<a class="video autostop hd" href="http://vimeo.com/19625497"><img src="images/slider/img4.jpg" alt="Banner Image 4" /></a>
</li>
<li data-thumb="images/slider/thumbs/img5.jpg">
<img src="images/slider/img5.jpg" alt="Banner Image 5" />
</li>
</ul>
<!-- _________________________ Finish Slider __________________________ -->
For changing standard style settings of your Pacifico HTML-template, you must:
1. Layout Type - by default it standard, but if you want to use vertical/horizontal layout you must change first class from standard to vertical or horizon in body tag in all HTML files that you use.
2. Theme Skin - by default it simple, but if you want to use jeans/wood/black/brown/purple/green/red color skin you must change second class from simple to jeans or wood in body tag in all HTML files that you use.
3. Background Color - you need to change style.css file body tag background color from #000000 to color that you choose, for example #999999.
4. Background Image - you need to add:
<script type="text/javascript"> //Image Load And Resize Script
jQuery(document).ready(function(){
if (jQuery.browser.msie && jQuery.browser.version < 9){
var $windowWidth = jQuery(window).width()+17;
var $windowHeight = jQuery(window).height()+17;
} else {
var $windowWidth = window.innerWidth;
var $windowHeight = window.innerHeight;
}
var $image = jQuery('.bgImage img');
var img = new Image();
img.src = jQuery($image).attr('src');
var intervalId = setInterval(function(){
if (img.complete){
var $imgWidth = img.width;
var $imgHeight = img.height;
var $widthFactor = parseFloat($imgWidth/$windowWidth);
var $heightFactor = parseFloat($imgHeight/$windowHeight);
if ($widthFactor < $heightFactor){
jQuery($image).css({width:$windowWidth+'px', height:parseInt($imgHeight/$widthFactor)+'px', top:'-'+parseInt((parseInt($imgHeight/$widthFactor)-$windowHeight)/2)+'px', left:0});
} else {
jQuery($image).css({width:parseInt($imgWidth/$heightFactor)+'px', height:$windowHeight+'px', top:0, left:'-'+parseInt((parseInt($imgWidth/$heightFactor)-$windowWidth)/2)+'px'});
}
clearInterval(intervalId);
LoadImageStart();
}
}, 50);
function LoadImageStart(){
$image.parent().fadeIn(500, function(){
jQuery(this).css({display:'block'});
});
}
jQuery(window).resize(function(){
if (jQuery.browser.msie && jQuery.browser.version < 9){
var $windowWidth = jQuery(window).width()+17;
var $windowHeight = jQuery(window).height();
} else {
var $windowWidth = window.innerWidth;
var $windowHeight = window.innerHeight;
}
var $imgWidth = img.width;
var $imgHeight = img.height;
var $widthFactor = parseFloat($imgWidth/$windowWidth);
var $heightFactor = parseFloat($imgHeight/$windowHeight);
if ($widthFactor < $heightFactor){
jQuery($image).css({width:$windowWidth+'px', height:parseInt($imgHeight/$widthFactor)+'px', top:'-'+parseInt((parseInt($imgHeight/$widthFactor)-$windowHeight)/2)+'px', left:0});
} else {
jQuery($image).css({width:parseInt($imgWidth/$heightFactor)+'px', height:$windowHeight+'px', top:0, left:'-'+parseInt((parseInt($imgWidth/$heightFactor)-$windowWidth)/2)+'px'});
}
});
});
</script>
<!-- _________________________ Start Background Image __________________________ -->
<div class="bgImage">
<img src="images/subpage_bg.jpg" alt="" /> //Background Image
</div>
<!-- _________________________ Finish Background Image __________________________ -->
after body tag to all HTML files that you use (where subpage_bg.jpg - image that you want to use).
Can not be used on a same page with a slider!
5. Background Pattern - you need to add:
<!-- _________________________ Start Pattern __________________________ --> <div class="bgPattern"></div> <!-- _________________________ Finish Pattern __________________________ -->
after background image or slider to all HTML files that you use (file images/pattern.png - image that used as pattern).
6. Headings Google Font - by default it Cuprum, but if you want to use another font you must change in all HTML files that you use:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cuprum:rerular,italic,bold,bolditalic" type="text/css" />
for example to Lato:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:rerular,italic,bold,bolditalic" type="text/css" />
and you need to add:
<style type="text/css"> h1, h2, h3, h4, h5, h6, a.logo span.logo_text, #navigation li a, #navigation li a span, .album_nav a, .quotation, blockquote:before, q:before, .dropcap, .dropcap2 { font-family:'Lato', Arial, Helvetica, 'Nimbus Sans L', sans-serif; } </style>
(where 'Lato' font that you choose), also you can write all parameters on your style.css file.
7. Content font - by default it Arial, Helvetica, 'Nimbus Sans L', sans-serif, but if you want to use another fonts you must add to all HTML files that you use:
<style type="text/css"> body, code, input[type="text"], textarea { font-family:Calibri, AppleGothic, "MgOpen Modata", sans-serif; } </style>
if you want to change your content font to Calibri, AppleGothic, "MgOpen Modata", sans-serif:
also you can write all parameters on your style.css file.
And on file style.css you need to replace on tags: body, code, input[type="text"], textarea font or font-family rules from:
Arial, Helvetica, 'Nimbus Sans L', sans-serif
for example to:
Calibri, AppleGothic, "MgOpen Modata", sans-serif.
September 24, 2011 - Pacifico 1.0 Release