“Sommerce HTML” Documentation by “Your Inspiration Web” v1.0

“Sommerce HTML”

Created: 07/06/2012
By: Your Inspiration Web
Email: support@yourinspirationweb.com

Thank you for purchasing our 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 Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Change the logo
  5. Change the special font
  6. The sliders
  7. Contact PHP script configuration
  8. PSD Files
  9. Sources and Credits

A) HTML Structure - top

Navigation

The navigation is in located on header (#header) and have the ID "#nav". Here the structure:

HTML Navigation

Content

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of "content". The sidebar's (column #2) content is within a div with an id of "sidebar". The general template structure is the same throughout the template. Here is the general structure.

HTML Content

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 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.

	 #content a {
		color: #someColor !important;
	}

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.

Each page can be easily changed in its layout, replacing a class, that define the layout of the page:

You need to define this class in the ".inner" div, inside the main content wrapper. Here an example: 

	 <div class="inner sidebar-right">
		content and sidebar
         </div>

B) CSS Files and Structure - top

We're using one main CSS file in this theme, located in the root of the theme and called "style.css". It contains the general reset and all style of the theme.

The stylesheet is organizzed and compact, to easily find the roles. Each section of this file is delimited by some comments line. Here an example: 

	/* === HEADER === */
	some code
	/* === END HEADER === */

	/* === CONTENT === */
	some code         
	/* === END CONTENT === */
	
	/* === SIDEBAR === */
	some code      
	/* === END SIDEBAR === */
	
	/* === FOOTER === */
	some code         
	/* === END FOOTER === */
	
	etc, etc.

Another CSS file, located in the main folder, is "home.css" and it is for repeated style in similar pages like the main home.

Other CSS files are located in the "css" folder and they are for specif jQuery library.

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.

C) JavaScript - top

This theme imports a lot of Javascript files:

  1. jQuery: is a Javascript library that greatly reduces the amount of code that you must write.
  2. Custom scripts: Most of the animation in this site is carried out from the customs scripts.
  3. jQuery Cycle: used for some cycle animations and for the "Elegant Slider" (that you can find in the Home and Home Version 2 (elegant) ).
  4. jQuery Easing: used for particular effects of the Cycle Slider (that you can find in the Home Version 6 and Home Version 7).
  5. jQuery Nivo Slider: for the nivo slider (that you can find in the Home Version 5 (corporate) ), that you can put inside the content of a page.
  6. jQuery prettyPhoto: used for the lightbox of the images.
  7. jQuery tipsy: used for the effect on social icons.
  8. jQuery Flexslider: used for some responsive sliders.
  9. jQuery tweetable: used to show the last tweets of a twitter account.
  10. jQuery hrzAccordion: used for accordion slider in the staff page.
  11. jQuery Slides: used for the "Cycle Slider" (that you can find in the Home Version 6 and Home Version 7).
  12. jQuery Aw-Showcase: used for the "Thumbnails Slider" (that you can find in the Home Version 3 (creative) ).
  13. swfObject: used for the render some videos.
  14. cufon: used for the special font.

To change the logo image url, you must edit header of each HTML file:

Logo

E) Change the special font - top

The special font is provided by Google Fonts

Font

Then set the specific font, by google fonts, you need to edit style.css file:

Font

You can also set a font, choose one of the fonts saved in "Fonts" folder.

F) Sliders - top

There are four sliders available in this theme:

You can copy the code in one of these pages.

G) Contact PHP script configuration - top

This theme have a contact form already working, by the file called sendmail.html. The script is written with PHP language and work both in client-side, that server-side. The ajax request and real-time validation is on js/contact.js file.

In the file sendmail.html, there is some configuration, for the sending of the contact form.
With this, you can configure to send emails from, and where to send the name that will appear in the email client:

// email
define('TO_EMAIL', 'your@email.com'); 
define('FROM_EMAIL', 'info@test.it');  
define('FROM_NAME', 'Your Name');

Then, the contact form is already dynamic and works with infinity combination of inputs on contact form. That is, you can add also more input fields, without change the script of sendmail.html file.
Also, you can configure the body of the email and add inside the information added by the user in the contact form. You can configure the body with this constant, that you find on top of the file:

define( 'BODY', '%message%<br /><br /><small>email inviata da %name%, email %email%.</small>' );

The string between the percentual symbol (%), is the name of the field. For example, if I add this field in the contact page:

<input type="text" name="name" id="name-form" class="required" value="" />

by the string %name% (that is the same of name="name") I can replace it with the name added by the user in the contact form.

In addition, you can configure the real time validation, by adding some classes on the input fields. For example:

<input type="text" name="email" id="email-form" class="required email-validate" value="" />

with the classes "required" and "email-validate", you can say respectively that this field is required and must be a valid email.

H) PSD Files - top

We've included the psd of the home.

If you'd like to change the main image in the header, open "home.psd", make the necessary adjustments, and then save the file with the right image name and replace the existing file. Do the same for other part of the theme.

I) Sources and Credits - top

Fonts

Icons

I’ve used “Basic icon set” pack, you can find it here:
http://pixel-mixer.com/basic_set/
and another icons with shadow effect:
http://www.dezinerfolio.com/freebie/30-free-vector-icons
Social network icons are taken here:
http://www.nouveller.com/general/free-social-media-bookmark-icon-pack-the-ever-growing-icon-set/
and some free stock

Once again, thank you so much for purchasing this theme. As I said at the beginning, We'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 our forum.

Your Inspiration Web

Go To Table of Contents