Unorium

Responsive Single One Page - Multipurpose HTML5 Template

Thank you very much for purchasing our theme!

If you have any issue or question that this document does not cover, feel free to contact us here.. Thank you.

About

Unorium is a clean and professional One Page site template, perfect for all types of companies and personal web sites. Built on the Advanced foundation framework with HTML5 / CSS3. Its responsive too - Will fit great on all devices. More features like 4 Homepages, 2 Portfolio pages, About page, Services page, Blog, Contact, and much more gives you more space to work with and also with a few lines of code.

Clean coded and Easy updation are the key features. Go ahead to know more.

HTML Structure

This theme is a Responsive layout with four columns. The general template structure is the same throughout the template. Here is the general structure.


	

			.....
			.....
			.....

CSS files and structure

I have used Nine CSS files in this theme.

  1. style.css - Contains all of the specific stylings for the page.
  2. reset.css - Generic reset file.
  3. foundation.css - Contains all of the specific stylings for the responsive layout.
  4. ie8.css - Contains all of the specific stylings for ie8.
  5. camera.css - Contains all of the specific stylings for the Responsive slider
  6. isotope.css - Contains all of the specific stylings for Isotope portfolio
  7. ico.css - Contains all of the specific stylings for Fontawesome icons
  8. prettyphoto.css - Contains all of the specific stylings for Lightbox plugin
Style.css file contains all of the specific stylings for the page. The file is separated into sections using: 
    /*-----------------------------------------------------------------------------------*/  
    /* GLOBAL STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* TOP WRAP STYLES
    /*-----------------------------------------------------------------------------------*/
     css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* HEADER STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* ABOUT STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* SERVICES STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* PORTFOLIO STYLES
    /*-----------------------------------------------------------------------------------*/
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* BLOG STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* CONTACT STYLES
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /*  FOOTER STYLES
    /*-----------------------------------------------------------------------------------*/  
    css codes
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. Dont change anything in foundation.css file. It may affect the whole theme.

Javascript

This theme imports sixteen Javascript files.

  1. jquery-1.8.3.min.js - To Enable jQuery.
  2. camera.min.js - Plugin for Camera slider.
  3. jquery.easing.1.3.js - Plugin for Easing.
  4. jquery.gmap.js - Plugin for google map.
  5. jquery.isotope.min.js - Plugin for Masonry portfolio.
  6. jquery.localscroll-1.2.7-min.js - Plugin for Smooth scroll.
  7. jquery.mobile.customized.min.js - Support plugin for camera slider.
  8. jquery.mobilemenu.js - Plugin for Responsive Menu.
  9. jquery.nav.js - Plugin for Highlight menu.
  10. jquery.parallax-1.1.3.js - Plugin for parallax.
  11. jquery.prettyphoto.js - Plugin for Lightbox.
  12. jquery.scrollTo.js - Plugin for Smooth Scroll.
  13. jquery.sticky.js - Plugin for Stick header.
  14. jquery.placeholder.min.js - Forms placeholder plugin.
  15. mchimp.js - Mailchimp js script
  16. custom.js - Custom theme support file.

Tutorial

Lets start updating the template. Open index.html file and follow the steps.

Top wrap
  1. replace the text between "<h4>" "</h4>" with the wrap title.

Responsive slider
  1. replace "demo/inner/1.jpg" with the slider image. Same for all. Unlimited slides can be added.

Header
  1. Replace "unorium" with website title.
  2. Replace the menu title which starts with capital (Eg. About, Services, etc..).

About content - Feature section

			

				

					
				

				
Ideas

				

				
Nulla porttitor, velit ac tincidunt ornare, nulla dui eleifend sapien, in rutrum augue erat sed justo. Vestibulum libero
This is the basic structure. Same as for all.
  1. Replace "icon-lightbulb" with icons you want there. Check this link for list of icons available.
  2. replace the text between "<h4>" "</h4>" with the feature title.
  3. replace the text between "<p>" "</p>" with the feature description.

About content - Info wrap

				

					

						
					

					

						
Whats App?

						
Allamco laboris nisi ut aliquip ex ea commodo consequat.

						
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.

						Read More
This is the basic structure. Same as for all.
  1. Replace "demo/about/1.jpg" with some image for that content.
  2. replace the text between "<h5>" "</h5>" with the content title.
  3. replace the text between "<h6>" "</h6>" with the content sub-title.
  4. replace the text between "<p>" "</p>" with the content description.

About content - Team wrap

			

				

					
					
Chris MathewsChief Executive Officer

					

					
Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat.
This is the basic structure. Same as for all.
  1. Replace "demo/about/team/1.jpg" with the staff image.
  2. replace the text between "<h4>" "</h4>" with the Staf name & profession.
  3. replace the text between "<p>" "</p>" with someinfo about the client.
  4. replace the "#" tags of the social links, as per the name.

Services content - Skills

The services info is same as the features-content in the about section. So lets move to the skills section. 
				
  • 
					
    Mobile
    
					
    
						
    
							
    80%
    
						
    
					
    
				
    •
    This is the basic structure. Same as for all.
    1. Replace "Mobile" with the skill name.
    2. Replace "80%(in both places) with the skill percentage.

    Services content - Pricing

    				
    
					
    
						
    
							
    Cloud Storage100GB Free
    
							
    
							
    Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat.
    
							
    $10/moGet This Rolling
    This is the basic structure. Same as for all.
    1. replace the text between "<div="plan-title">" "</div>" with the Plan title and price.
    2. replace the icons as same as for the features content section.
    3. replace the text between "<p">" "</p>" with the plan description.
    4. replace the "$10" with the plan price and hash tag with the link for the plan.

    Portfolio wrap

    				
  • All
    • 
				
  • Web Design
    • 
				
  • Development
    • 
				
  • Video Making
    • 
				
  • Support
    • 
				
  • Optimization
    • 
				
  • Photography
    •
    Replace the filter name with a "." before it. Update the portfolio project content as follows. 
    				
    
					
    
						
    
							
								
									
      
										
      • 
										
									
    		
									
    
									
								    
							    
						
    
						
    
							
    Image title
    
							
    
							
    Nulla porttitor, velit ac tincidunt orna.
    1. Replace "THUMB URL HERE" with the project thumb image.
    2. Replace "LIGHTBOX IMAGE URL HERE" with the project lightbox image. You can add video & gallery also.
    3. replace the "#" tags of the social links, as per the name.
    4. replace the text between "<h4>" "</h4>" with the project title.
    5. replace the text between "<p>" "</p>" with project description.

    Clients wrap

    		
    
			
      
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      • 
				
      •
    replace "demo/clients/1.png" with the client image. Same for all.

    Contact-info

    			
      
				
    • 777 San Jose, Suite# 101, CA, 95035
      • 
				
    • 888-777-9999
      • 
				
    • 888-777-0000
      • 
				
    • info@designmonstr.com
      •

    Footer copyright

    First lets update the filter part. Find this code

    	
    
		
    © 2013 designmonstr.com. All rights reserved.
    1. replace the text between "<p>" "</p>" with copyright info.


    Thats it. YOu template is now ready for launch.


    Sources and Credits

    We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.

    Fonts
    jQuery Plugins
    Images Images in live preview are not included to the template.





    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. We I'll do our best to assist.

    Thanks

    Authorname