“Survive” Documentation by “EvGreen” v1.0

“Survive”

Created: 14/09/2010
By: Daniel Leczycki
Email: the242@gmail.com

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 here. Thanks so much!

Table of Contents

  1. Template files
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Walkthrough - all what you need is here.
  6. Sources and Credits

A) HTML Template files - top

Survive theme comes in 14 HTML files, these are as follow:

  1. index.html - Home Page with Nivo slider, space for slogan and 3 text widgets.
  2. index_v1.html - Same as above, this time images in the 3 text widgets are with borders.
  3. index_v2.html - Home Page extended with a blog.
  4. index_v3.html - Home Page extended with a blog, without 3 text widgets.
  5. index_v4.html - Home Page extended with a blog, without 3 text widgets and slogan.
  6. about.html - About Page with full-width layout.
  7. example.html - Typography Example Page with full-width layout.
  8. sidebar_r.html - Typography Example Page with sidebar on the right layout.
  9. two_columns.html - Typography Example Page with two, evenly sized columns layout.
  10. blog.html - Blog Page.
  11. portfolio.html - Portfolio Page with 3 evenly sized columns, without jQuery effects.
  12. portfolio2.html - Portfolio Page with 3 evenly sized columns, with jQuery effects.
  13. portfolio3.html - Portfolio Page with 2 evenly sized columns, with jQuery effects.
  14. contact.html - Contact Page with contact form.

B) CSS Files and Structure - top

I'm using three CSS files in this theme.

  1. style.css - This is the main style for the site. You will want to edit only this one. You can find style.css in the main folder with the HTML templates.
  2. reset.css - This file helps with browser compatibility. You can find it in /css folder.
  3. nivo-slider.css - This file is partially responsible for the looks of the nivo slider. Edit only when you know what you are doing. Found in /nivo folder.

The first file contains all of the specific stylings for the page. The file is separated into sections using:

	
	1-21 code lines: Responsible for background, color of the links, 
	color of the  image borders in porfolio and blog.
	
	21-254 code lines: General typography.
	
	/* === Top Section === */

	Edit logo position, menu and search button.

	/* === Slider Section === */
	
	Settings for slider.
	
	/* === Main Section === */
	
	Slogan settings, main wrapper settings.
	
	/* === Main Section - blog page === */
	
	General settings covering blog posts.
	
	/* === Main section - img special border === */
	
	Settings regarding image borders, normal-border and css borders that i call "magic" here.
	
	/* === Main section - portfolio === */
	
	Settings for portfolio columns, portfolio boxes, sliding caption in portfolio boxes.
	
	/* === Main section - text widgets === */
	
	Settings for "3-text-widgets" that are to be found on homepage.
	
	/* === Contact section === */
	
	Contact form styling.
	
	/* === Pagination === */
	
	Pagination settings.
	
	/* === Footer section === */
	
	General footer styling, position of the social icons, "connect with us" message.
	
	/* === Footer widgets section === */
	
	Styling for lists of links in the footer.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

I strongly recommend FireFox browser with FireBug addon to find sections of the code that you want to alter. It will save you a lot of time and trouble, as CSS file in this theme takes over 1000lines of code.

Most important parts of the code, that you probably will want to change to your liking are put in the very top section of the CSS file. In example color of the links, background image and color, color of the image borders.

Link colors are in lines 12 - primary link color, and line 16 - secondary link color that shows up on hover.

Background color can be changed at line 2. Background image properties at lines 3 to 5.

Image borders color can be changed at line 20.

C) JavaScript - top

This theme imports six Javascript files.

  1. jQuery - in /js/jquery-1.4.2.min.js
  2. Custom scripts - in /js/jquery_site_enhanced.js
  3. And 4 plugins - /js/pirobox.min.js for pirobox, /js/titt_100-titt_400.font.js and /js/cufon-yoi.js for font replacement, /nivo/jquery.nivo.slider.js for the nivo slider
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over. 
    $(document).ready(function() {  
	$('.box').hover(function(){
		$(".cover", this).stop().animate({top:'80px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'200px'},{queue:false,duration:300});
	});
});

$(document).ready(function() {  
	$('.magic_cap .box').hover(function(){
		$(this).find('img').animate({"opacity": "0.55"}, {queue:false,duration:300});
	}, function() {
		$(this).find('img').animate({"opacity": "1"}, {queue:false,duration:300});

	});
});

    The code above is responsible for animation in portfolio page.

    $(document).ready(function() {  
	$('.search_click').toggle(function(){
		$('.search_field').slideDown(200);
		$('#search_input').focus();
	}, function() {
		$('.search_field').slideUp(200);

	});
});

    The code above is responsible for "rolling out" search button

  3. In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. Those plugins are packed, so you won't need to manually edit anything in the files. The only necessary thing to know is how to call the method. For example: 
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    - calls jquery library.

D) PSD Files - top

I've included three psds with this theme:

  1. Logo
  2. Read more button
  3. Slider caption

1) If you'd like to change logo to your own, and want to keep that white "special" background, you can open logo.psd file and work on it there.

2) psd that will help with changing the "read more" buttons from mainpage.

3) psd file of exact width and height size as the slides on the main page, also contains the first photo from the slides so you can use it in your own project.

E) Walkthrough - top

Again, thank you for buying the theme. This is a walktrough page that I prepared for you, so you can understand this template better, and make necessary changes easier.

LOGO First of all, we want to change the logo to your own. If you have logo ready and prepared, then just replace the /images/logo.png and, if some aligning is necessary, edit style.css file, find line 259 and in class .logo change (left and bottom) values.

If you dont have your logo ready, you can open logo.psd photoshop file and work on it there.

MENU Menu is simply an unordered list of link elements. Opening another <ul> inside <li></li> tags will allow for drop-down menus. Lines in index.html file: 68-104.

SEARCH There is possibility that you wont need the search function, in this case - to remove it, edit all html files and delete the code in between <!-- Search slide-down --> and <!-- Search Ends --> Menu will align itself to the right automaticly. It's that simple!

SLIDER To add/remove slides simply add or.. remove image tags that are placed in betweeen <!-- Nivo Slider --> comments in index.html file. Adding title="Some text" to img tag will produce nice caption under the image. Slides can be links, to do this, simply wrap <a> tags around the img tag. To alter displaying settings of the slider you will have to edit bottom lines of the code in /nivo/jquery.nivo.slider.js file. For reference visit nivo slider page.

TEXT WIDGETS The 3 text widgets on the main page are just 3 divs that contain appropriate text. So, we have link with image - line 139,145,151. Then headline h2 - line 140,146,152. And the text - line 141,147,153. Lines 142, 148 and 154 trigger the read-more button.

ICONS The social icons in the footer can be added/removed by simply adding.. or removing :) another list items. All of the icons that are available are located at /images/icons. There are plenty.

JQUERY PORTFOLIO Construction of the jQuery portfolio is very simple, just like in text widgets - it's a series of div elements that contain all the necessary info inside. So, we got link with the image, and class="pirobox" for the nice lightbox effect when clicked, at line 125, then heading h3 at line 127, and finally little info on who created the item, with link to i.e. full, in-detail post about that item.

CONTACT All you need to do to make the contact form work is: edit the sendEmail.php file and at line 7 and 8 enter your email adress and name.

All the code is commented and you should have no problems figuring out how to populate the rest of the site with your content, as every aspect of construction of the site is similar if not identical to the examples mentioned above. However if you still have problems understanding HTML code, you can try to learn more from w3schools or.. simply wait for wordpress edition of this site. It will be even easier to operate and use.

F) Sources and Credits - top

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Daniel "EvGreen" Leczycki

Go To Table of Contents