“Libra HTML” Documentation by “YIThemes” v1.0

“Libra HTML”

Created: 16/12/2012
By: YIThemes
Email: support@yithemes.com

Thank you for choosing our theme. If you have any questions that are beyond the scope of this help file, please visit our support platform. 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. Sources and Credits

A) HTML Structure - top


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

HTML Navigation


You can change the body class to view the page stretched or boxed. Here the structure:



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.


	 #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:

Also inside the body class you can easily add or remove "responsive" if you want or not want that the page is responsive.

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

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. 

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.
  4. jQuery Easing: used for particular effects.
  5. jQuery prettyPhoto and jQuery Colorbox: used for the lightbox of the images.
  6. jQuery tipsy: used for the effect on social icons.
  7. jQuery Flexslider: used for the "Elegant Slider" (that you can find in the Home IV and Home VII).
  8. jQuery tweetable: used to show the last tweets of a twitter account.
  9. jQuery Aw-Showcase: used for the "Thumbnails Slider" (that you can find in the Home V and Home X).
  10. jQuery Layerslider: used for the "Layers Slider" (that you can find in the HomePage and Home VII).
  11. jQuery Eislideshow: used for the "Elastic Slider" (that you can find in the Home III and Home VI).
  12. jQuery Anythingslider: used for the "Cycle Slider" (that you can find in the Home II and Home IX).
  13. jQuery Quicksand: used to make image filterable gallery (that you can find in the Gallery and Portfolio (Filterable) ).
  14. jQuery Mobilemenu: used for the nav animation.
  15. jQuery Cookie and Buttons: used to make work the graphics of portfolio "View the project" buttons.
  16. Shortcodes: used to make work some Shortcodes.
  17. Comment-Reply: used to make answerable the blogs.
  18. Contact: used to make work the contact auto correction module in contact page.

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


E) Change the special font - top

The special font is provided by Google Fonts


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


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) Sources and Credits - top



I’ve used “Basic icon set” pack, you can find it here:
and another icons with shadow effect:
Social network icons are taken here:
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 YIThemes, you might consider visiting our support platform.


Go To Table of Contents