Studio Francesca

Responsive HTML Theme

Created: June, 2013
By: WowThemes.net
Email: wowthemesnet@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 me. Thank you!

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.

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

In order to change the color skin, 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:

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:

Stylesheet Guide
-------------------------
 Global Reset & Standards
 
 Table of Contents

:: Alerts
:: Labels
:: Tooltips
:: Panels
:: Accordion
:: Side Nav
:: Sub Nav
:: Pagination
:: Breadcrumbs
:: Lists
:: Link Lists
:: Keystroke Chars
:: Image Thumbnails
:: Video
:: Tables
:: Microformats
:: Progress Bars
:: Menu Superfish
:: Portofolio
:: Content

Optional stylesheets:

homepage.css - home page stylesheet
blog.css - blog stylesheet
nivoslider.css - nivo slider stylesheet
prettyphoto.css - gallery stylesheet

I have separated these stylsheets because they are not necessary in all documents, but if you modify your layout/design and you see something wrong, one of these stylesheets may be missing in your case, so it's best to add them, (in the same place with the stylsheet for skin above) as in the following example:





 -> always keep the stylesheet for skin color the last one

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.nivo.slider.pack.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
jquery.tweet.js
twitterusername.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:

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. It uses the nivoslider.css stylesheet and the jquery.nivo.slider.pack.js javascript file. (make sure it is called if you are using it outside these page.)

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

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

Carousel

In our theme the carousel plugin is used in home pages, for clients' logo display, but you may use it of course in any way you like.
Javascript: jquery.carouFredSel-6.0.5-packed.js (make sure it is called if you are using it outside these pages)
Stylesheet: homepage.css

To add images in carousel, follow the structure:


	
		
		
		
		
		
	
		
	prev
	next

Replace lines 3, 4, 5, 6 & 7 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)


	
		
		
		
			Show all
			Nature
			Trains
			Castles
		
		
	


 
	
	  
		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)

  
  
	
		
		
		
			Show all
			Nature
			Trains
			Castles
		
		
	



	
		
		
			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)

 
 
	
		
		
		
			Show all
			Nature
			Trains
			Castles
		
		
	



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

Twitter Feeds

Change the username associated with your twitter account by opening twitterusername.js from javascripts folder. The default account in my theme is twitter, but change this line

username: "twitter"

with your own. Example:

username: "wowthemesnet"

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.

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.

WowThemes.net