“LIFE XHTML/CSS” Documentation by “Jonathan Atkinson” v1.0

“LIFE XHTML/CSS”

Created: 9/24/2010
By: Jonathan Atkinson

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. HTML Files and Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Sources and Credits
  6. PHP Code Explanation
  7. Color Choices
  8. Twitter Setup

A) HTML Files and Structure - top

This theme is very versatile - not only just a blog theme, not only just a portfolio showcase theme and not only just a magazine-type theme. It could be all 3 or any combination of the 3. This theme consists of an about page, a contact page, a services page, a category page, 4 different styles of blog pages, 2 different portfolio detail pages, 4 different portfolio pages featuring a 1, 2, 3 or 4 column layout, an index page with a Nivo Slider, an index page without a Nivo Slider or you can have an index page featuring a particlar singular product/image and an "examples" page that shows you all the different columns and styles that have been coded for you in this theme. All pages have been fully tested on MAC and Windows browsers such as IE7, IE8, Google Chrome, Firefox and Safari as well as all HTML code checked through W3C Validation.

Each HTML is correctly coded and extremely well commented to help you with any alterations and understanding of what you are looking at - calls all javascript files and css files in each file where necessary. You should not have to change anything in the way these html files connect to their relevant css and js files as long as you upload everything in order (see instructions for installing below).

The menu system is powered by SuperFish. All necessary links - ie those to pages included - all work correctly - the image slider on the homepage is present (if desired) and even the contact form works with only one single adjustment required (must have php loaded on your server environment with mail()function fully operational) - please see the PHP section for details on the contact form.

All div's have been labeled to make alterations as easy as possible within the html and CSS files.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	#content_area a {
		color: #someColor;
	}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	#wrap #content_area a {
		color: #someColor;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

B) CSS Files and Structure - top

I'm using seven CSS files in this theme. Included in this template download is a single CSS directory / folder for the template - all necessary css files are included and shouldn't need any alterations unless you wish to customize anything. Here is a list and description for each one:

  1. prettyPhoto.css - used to style the lightbox style pop-out images on the portfolio section
  2. main.css - used to style the main pages, portfolio pages and the blog pages
  3. main_ie7.css - used to style the main pages, portfolio pages and the blog pages
  4. main_ie8.css - used to style the main pages, portfolio pages and the blog pages
  5. nivo_slider.css - used to style the slider on the main page
  6. superfish.css - used to style the menu
  7. tipsy.css - used to style the tool tips on the social icons

NOTE: included in the css folder are the web friendly @fontface fonts used for various browsers - all the same FREE font MYRIAD PRO - these are required for the use of the special font in browsers for all pages.

Each css file should be easy to follow and if using a modern html page editor you should be able to easily see the structure of each css file. As a tip if you are not using firefox browser and the awesome firebug plugin then you are making things difficult for yourself - it's easier to supply a link that shows how this helps rather than me explain, but needless to say if you want to alter the css USE FIREFOX AND FIREBUG! Here is a link

CSS Structure

C) JavaScript - top

Included in this template download is a single JS directory / folder - all necessary JS files are included (5 in total) and shouldn't need any alterations unless you wish to customize anything. Here is a list and description for each one:

  1. scrolltopcontrol.js - used by pages to quickly jump back to the top of the page smoothly.
  2. jquery.nivo.slider.pack.js - powers the "nivo" slider on the main page (if desired) - http://nivo.dev7studios.com/
  3. jquery.easing.1.3.js - used by the scrolling effect, superfish and the slider
  4. jquery.prettyPhoto.js - used for the light box on the portfolio pages http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
  5. hoverIntent.js - used by the superfish menu
  6. superfish.js - powers the superfish main menu
  7. supersubs.js - powers the superfish sub-menus
  8. custom.js - a custom script created that includes several heavily commented scripts
  9. jcarousellite.min.js - used for the ticker on the no-slider home page

Please note that alterations to JS files could result in certain features not working - you should not attempt to alter javascript unless you are experienced - please use the web site references next to each JS file listed above for further details and help.

D) PSD Files - top

I've included 11 psd's (photoshop native files) with this theme - split in to 2 different folders for ease of use we have Page Templates (these are the main page designs for the entire site):

  1. Blog Page Design.psd
  2. Final_Home.psd
  3. Full Width.psd
  4. Portfolio Design.psd
  5. Right Sidebar Design.psd

And we also have Quick Edit Elements (these are certain elements I presume you will want to alter the most - just open - edit - and save out as the same name as the original image to replace - doesn't get any easier!):

  1. blog_ribbon.psd
  2. icon.psd
  3. portfolio_ribbon.psd
  4. product_images.psd
  5. slider.psd
  6. splash2.psd

All PSD files can be opened in Photoshop CS3 or earlier and contain well labelled layers and groups.

You should be able to change the majority of the graphical content on all these pages very quickly indeed.

E) Sources, Credits and Fonts - top

All images used have been created by myself and you are free to use them if you wish - the ONLY image used is the iphone 4 image on the product home page image - the font used is Myriad Pro - see below for credits.

F) PHP Code Explanation - top

Included in the files is the PHP contact form mailer.php - this is the file you will need to alter to have a fully functional contact form on your website.You have only 1 thing to change to get this PHP mailer script to work (as long as your host is running php 5 on a unix server - if not then you need to replace this script with your own or one provided by your hosting company) - open the mailer.php file in a text editor or code editor and you will see this code:

$email_to = "you@yourdomain.com";
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$url = $_POST["url"];
$message = $_POST["message"];
$text = "NAME: $name
         EMAIL: $email
		 PHONE: $phone
		 URL: $url		 
         MESSAGE: $message";
$headers = "MIME-Version: 1.0" . "\r\n"; 
$headers .= "Content-type:text/html; charset=utf-8" . "\r\n"; 
$headers .= "From: <$email>" . "\r\n";
mail($email_to, "Message", $text, $headers);

Now simply alter this line:

        
        $email_to = "you@yourdomain.com";

Change you@yourdomain.com to your email address - done!

If you would like to change the validation error messages or the thank you message simply edit the strings in the custom.js for the form validation script:

        $(document).ready(function() {
	$('form#contact_form').submit(function() {
		$('form#contact_form .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
            	var labelText = $(this).prev('label').text();
            	$(this).parent().append('You forgot to enter your '+labelText+'.');
            	$(this).addClass('inputError');
            	hasError = true;
            } else if($(this).hasClass('email')) {
            	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            	if(!emailReg.test(jQuery.trim($(this).val()))) {
            		var labelText = $(this).prev('label').text();
            		$(this).parent().append('You entered an invalid '+labelText+'.');
            		$(this).addClass('inputError');
            		hasError = true;
            	}
            }
		});
		if(!hasError) {
			$('form#contact_form input.submit').fadeOut('normal', function() {
				$(this).parent().append('');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('form#contact_form').slideUp("fast", function() {
					$(this).before('
Thanks! Your email was successfully sent. We will contact you as soon as possible.
');
				});
			});
		}

		return false;

	});
});

G) Color Choices - top

Included with this template is 6 different colors schemes: Coffee, Dark Blue, Green, Orange, Teal & White. Each are supplied in separate folders for ease of use - each use their own set of images and css style sheets.

I) Twitter Feed Setup - top

On select pages we have a dynamic Twitter feed you can use very very simply - open the page with the Twitter feed and towards the top in the < head > section and before the opening < Body > section of the code you will see Javascript that appears like below: 

        $(".tweet").tweet({
            username: "twsjonathan",
            join_text: "auto",
            avatar_size: 0,
            count: 3,
            auto_join_text_default: "we said,", 
            auto_join_text_ed: "we",
            auto_join_text_ing: "we were",
            auto_join_text_reply: "we replied to",
            auto_join_text_url: "we were checking out",
            loading_text: "loading tweets..."

To change the feed to your own account is silly simple - look for this line:

            username: "twsjonathan",

Simply replace my username - twsjonathan - with your own Twitter username.

If you would like to increase or decrease the number of feeds showing at any time simply look for this line of code:

            count: 3,

You will see that by default we call "3" on the count - alter this to the number you would like to display. The other settings should be self explanatory or you can visit the original code's website by following the link in the custom.js for the Twitter Script.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. 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.

Jonathan Atkinson

Go To Table of Contents