Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!
I`m happy to present you my newest template - Superb. It is single page, responsive, HTML5 / CSS3 template. Superb is perfect for freelancers, creative people or agencies. It focuses on presenting your work in an elegent way. It is responsive so it will look perfect on any device. It is equiped with parallaxed sections.
About this documentation file
In this help file I`ll first present some general things, for example: template structure, changing the logo, editing the menu etc. Then I`ll go trought each section and stop on elements like slider, parallax... Just thing you need to know to customise and put your content there.
Read this documentation carefully. If you have any question, problems with customisation feel free to send me a message on webdesign@shegy.pl
Superb is based on Twitter Bootstrap v3 grid system (http://getbootstrap.com/) - I have only incuded grid functionality and basic responsivness support so other bootstrap functions wont work out of the box. Feel free to include them yourselves as you need them.
index.html is a core file of this template
css folder - here are stored all css files, fonts and icon fonts.
js folder - here is a folder with all reqired Java Script files.
images foder - all neccesary graphic files are stored here.
In order to change the logo please find in the index.html file this line:
<div id="logo"><a href="#home"><img src="images/logo.jpg" alt="logo"></a></div>
As you can see in a div with id=logo we have a link with <img> logo.jpg. Best way is to just replace the img with your logo, or if you want you can edit the ilg source path.
On the home section of Superb I have implemented animated text. In order to change the texts find in the index.html file this code:
<ul class="texts" > <li >You will Love</li> <li >Users share</li> <li >Clients remember</li> </ul>
As you can see it is a simple list, just edit/add/remove list items and it will be ready.
If you want to edit the transition animations please check out: http://jschr.github.io/textillate/ and edit the main.js file.
$('.tlt').textillate({ selector: '.texts', loop: true, initialDelay: 10, 'in': { effect: 'fadeInDown', delayScale: 1.3, delay: 40, sync: false, shuffle: true, }, 'out': { effect: 'fadeOutDown', delayScale: 1.3, delay: 40, sync: false, shuffle: true, } }); $('#home p').textillate({ loop: false, 'in': { effect: 'fadeInUp', delayScale: 0.5, delay: 10, sync: false, shuffle: true, }, });
Superb s equiped with 2 sections with parallax scrolling effect on the background but you can have more than 2 if you want.
The background img of section with parallax is declared in style.css file.
In the documentation we will focus on "services" section. So for services sevtion the code will look like this:
#services { padding-top: 110px; padding-bottom: 50px; background-color:white; background-image: url(../images/services_bg.jpg); background-position: center; background-repeat: no-repeat; display:block; position:relative; z-index:120; padding-top:90px; text-align:center; }
I have bolded the important part. In order to change the img just replace the image in images folder or edit the url.
Partallax works because of the js code in parallax.js file and some atributes in html file. Check out services section opening index.html file:
<section id="services" data-speed="-5" data-type="background">
data-type:''background" - if you want parallax to work just insert this attribute.
data-speed:"" - this attribiute is responible for the speed of parallax, you can put there also negative number - it will change the direction of background movement.
For services section corresponding Java Script code will look something like this:
$('#services').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { // Scroll the background at var speed // the yPos is a negative value because we're scrolling it UP! var yPos = -($window.scrollTop() / $bgobj.data('speed'))-400; // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); });
I have bolded the most inportant parameters in this code. First you declare the section you want to have the parallax effect. So if you want to add some parallax sections you can do that but you need to copy all this code and then change the section for new one. Also the second bolded parameter is important. Sometimes you will need to correct that in order to see the background, so experiment.
Superb has a masonry grid based portfolio. Each portfolio item has its own modal box with more info about the project.
I have prepared 3 types of modals
If you want to add or remove portfolio item follow this steps:
Find this code in index.html file:
<ul class="grid effect" id="grid"> <li><a class="md-trigger" data-modal="work1"><img src="images/1.jpg" alt="work"></a></li> <li><a class="md-trigger" data-modal="work2"><img src="images/2.jpg" alt="work"></a></li> <li><a class="md-trigger" data-modal="work3"><img src="images/3.jpg" alt="work"></a></li> </ul>
It is a unordered list with each list item representing one work in grid layout.
data-modal="work1"
here you declare witch modal box will open after user clicks on selected work.
Then you just need to input img source.
When you finish making thumbinal grid it comes time to make the modal boxes.
You can find code for each type of modal box in the index.html file.
Single image modal box:
<div class="md-modal md-effect-1" id="work1"> <div class="md-content"> <button class="button_nav md-close" ><span aria-hidden="true" class="button_nav_icon icon-cross"></span></button> <h3>Single image</h3> <img src="images/SlideOne.jpg" class="img-responsive" alt="slide"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div>
Whats really important is the id - I have bolded that - this id should be unique and it is what you will input in data-modal atribute in thumbinal grid.
Then it is easy stuff, just h3, img and p for your descripton.
For slider version of modal box:
<div class="md-modal md-effect-1" id="work3"> <div class="md-content"> <button class="button_nav md-close" ><span aria-hidden="true" class="button_nav_icon icon-cross"></span></button> <h3>Image slider</h3> <div class="flexslider-container"> <div class="flexslider"> <ul class="slides"> <li><img src="images/SlideOne.jpg" alt="slide"/></li> <li><img src="images/SlideTwo.jpg" alt="slide"/></li> </ul> </div> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div>
exacly the same as single image one but insteed of single image we now have a list of images.
And the third one is video one:
<div class="md-modal md-effect-1" id="work2"> <div class="md-content"> <button class="button_nav md-close" ><span aria-hidden="true" class="button_nav_icon icon-cross"></span></button> <h3>Video</h3> <div class="video"> <!-- Copy & Pasted from YouTube or Vimeo --> <iframe src="//player.vimeo.com/video/37634714?byline=0&portrait=0&color=ffffff" width="600" height="255" allowfullscreen></iframe> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div>
The same as previous but with vimoe/youtube iframe insteed of img.
Filling the portfolio - Step by step:
1) fill the grid with your works by editing the list items.
2) decide witch type of modal box you want for each work and copy them and insert projectr details
3) make sure modal id`s are also correctly inderted in data-modal attribute in thumbinal list.
Superb is equiped with fully working contact form with validation. You can edit the destination e-mail adress, subject and warning messages in js/contactform.php file. just edit this code according to the descriptions:
$sendto = 'webdesign@shegy.pl'; $subject = 'Superb www contact'; $iserrormessage = 'Your message has not been sent due to following errors:'; $thanks = "Thanks for your message! We'll contact you back as soon as it is possible."; $emptyname = 'Please enter your name.'; $emptyemail = 'Invalid e-mail address.'; $emptymessage = 'Please enter your message.'; $alertname = 'Invalid name format. Please do not use special characters in your name.'; $alertemail = 'Invalid e-mail format, proper format is: yourname@domain.com'; $alertmessage = "Please do not use special characters in your message. Standard url's should work fine.";
Fonts used in this template:
Photos - http://photodune.net