1. Start
  2. HTML Structure
  3. CSS Files & Skin Options
  4. JavaScript
  5. Elastic Slideshow
  6. Nivo Slider
  7. Carousel
  8. Testimonials
  9. Portofolio & Gallery
  10. Contact Forms
  11. Sources and Credits
  12. Earn Money with Us

Studio Francesca

Responsive HTML Theme

.
Thank you for downloading our free theme.
Looking for more free themes and templates? Click here.
The WordPress version is available here.

HTML Structure

The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

What you need to know is that columns don't have a fixed width. They can vary based on the resolution of the screen, or the size of the window.

The main structure of our theme is:

Each column block is sized based on how many of the 12 columns it takes up. Example of main content + sidebar layout:


	

		Main content here
	

	

		Sidebar here

Our document "columns.html" is useful if you want to see more of these 12 columns variations.

 

CSS Files and Structure

I'm using three main CSS files in this theme. 

  1. style.css - main css files (included reset styles);
  2. teal.css - the default skin for this theme.

    3. In order to change the accent color of the template, replace teal.css in all of our html documents with the skin color of your choice from stylesheets/skins/.

    Example,if you choose the green skin, replace:

    with

  3. responsive.css - stylesheet for responsive layout.

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

JavaScript

 

This theme imports several Javascript files, treated separately in our documentation according to the function they're serving. 

foundation.min.js
jquery.easing.1.3.js
elasticslideshow.js
jquery.carouFredSel-6.0.5-packed.js
jquery.cycle.js"
app.js
modernizr.foundation.js
slidepanel.js
scrolltotop.js
hoverIntent.js
superfish.js
responsivemenu.js
formvalidation.js

Elastic Slideshow

It is the main slider of this theme, placed in index.html document. It uses the homepage.css stylesheet and the javascript files: jquery.easing.1.3.js and elasticslideshow.js. (make sure it is called if you are using it outside the home pages)

Structure of this slideshow: two lists, one for the main slider and one for the thumbnail navigation beneath the large image. The large slider list contains the image and a title with an h2 and h3 element. The list for the thumbnail contains absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail).

So for each image you want to add, follow this structure: 

    
    
        
  • 
             
            
    
                
    Responsive
    
                
    Design
    
            
    
        
    • 
        
  • ...
    •

Replace lines 4 & 16 with your own image path. In my theme I have used placeholders.

Nivo Slider

It is the boxed slider of this theme, placed in index2.html and portofoliodetail.html documents.

Extremly easy to manage, all you have to do is follow the structure:

Replace lines 2, 3 & 4 with your own image paths.

Testimonials

In our theme, testimonials are displayed in homepages and services.html.
Javascript: jquery.cycle.js (make sure it is called if you are using it outside these pages)

To add a testimonial, or any other content you like, follow the structure:


	

		
 Content here –By author

	

	
	

		
	Another content here –By someonelse

Portofolio & Gallery

The default style.css includes the stylesheet for portofolio, while the gallery has an extra stylesheet prettyphoto.css. So if you want to use these plugins outside their main documents (portofolios), make sure you include the right stylesheet and javascripts.

Javascripts:

jquery.isotope.min.js for filterable portofolio
jquery.prettyPhoto.js for gallery. The gallery link is displayed on hover (portofolio images)
custom.js for both

2 COLUMNS PORTOFOLIO STRUCTURE: (see explanation after code)


	

		
		

		
		

	




 

	
	  

		
Project Name 1

		
Description

			

				

					
					

						
						 Gallery
						
					

					
					

						+ Project Details

STEP A.
Notice "nature", "trains", "castle" from lines 7,8,9. These are categories. Replace them with your own and add some more if needed.

STEP B.
Line 17, after "category", include the category(or categories) in which you want this image displayed. Example:"six columns category trains nature". So, I have just included two cateories:trains and nature.

STEP C.
Line 24, replace images/yourimage1.jpg with your own image path.

STEP D.
Line 30, replace portofoliodetail.html with the path (link) to the detailed project document.

STEP E.
Line 34, repeat the third step, so replace images/yourimage1.jpg with your own image path.

3 COLUMNS PORTOFOLIO STRUCTURE: (see explanation after code)

  
  

	

		
		

		
		

	






	

		
		

			
Project Title

			
Short Description

			

				

				
					

						
						 Gallery
					

					
					

						+ Project Details

STEP A.
Notice "nature", "trains", "castle" from lines 7,8,9. These are categories. Replace them with your own and add some more if needed.

STEP B.
Line 18, after "category", include the category(or categories) in which you want this image displayed. Example:"six columns category trains nature". So, I have just included two cateories:trains and nature.

STEP C.
Line 25, replace images/yourimage1.jpg with your own image path.

STEP D.
Line 30, replace portofoliodetail.html with the path (link) to the detailed project document.

STEP E.
Line 34, repeat the third step, so replace images/yourimage1.jpg with your own image path.

4 COLUMNS PORTOFOLIO STRUCTURE: (see explanation after code)

 
 

	

		
		

		
		

	






	

		
		

			
Project Title

			
Short Description

			

				

				
					

						 Gallery
					

					
					

						+ Project Details

STEP A.
Notice "nature", "trains", "castle" from lines 7,8,9. These are categories. Replace them with your own and add some more if needed.

STEP B.
Line 18, after "category", include the category(or categories) in which you want this image displayed. Example:"six columns category trains nature". So, I have just included two cateories:trains and nature.

STEP C.
Line 25, replace images/yourimage1.jpg with your own image path.

STEP D.
Line 29, replace portofoliodetail.html with the path (link) to the detailed project document.

STEP E.
Line 33, repeat the third step, so replace images/yourimage1.jpg with your own image path.

Pay attention to image and thumbs path locations, in my themes I have used placeholders.

Contact Forms

I've used the same contact form twice in 2 different pages: contact.html and services.html. Just find the following line in contact.php file (23 if you're using Notepad++ editor) and replace the existing e-mail address with your own. 
$to = 'wowthemesnet@gmail.com';

Sources and Credits

I've used the following images, icons or other files as listed. I do not own any credits for it.

Join our Community

Once again thank you for downloading our theme.
If you like our premium themes from Wow Themes Shop , recommend us and earn 30% of each sale you generate.
Click here to join the affiliates community.