“Unicore - Responsive Multipurpose landing page”

Created: Jun 01, 2016
By: ElectricBlaze
Email: http://electricblaze.com/

HTML Structure
CSS Files and Structure
JavaScript
Tutorial
Sources and Credits

A) HTML Structure - top

This theme is a Responsive layout with four column. Based on Bootstrap Framework. All of the information within the main content area is nested within a div with an id of "container". The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

For header

header {
		background-color: #hexcode; //---for background change---//
		color: #hexcode; //---for font color change---//
}

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.

B) CSS Files and Structure - top

I'm using Five CSS files in this theme. The first one is the main source file for bootstrap framework

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


/* 1. GLOBAL STYLES */
css codes

/* 2. HEADER */
css codes
	
/* 3. INTRO STYLES */
css codes
	
/* 4. TERMS / POPUP */
css codes

/* 5. SERVICES */
css codes

/* 6. FEATURES */
css codes

/* 7. INFO BOXES */
css codes

/* 8. INFO BOXES / DUAL */
css codes

/* 9. SCREENSHOTS  */
css codes

etc....

The third file contains all of the specific stylings for the Prettyphoto Lightbox.

The fourth file contains all of the specific stylings for Slick Carousel.

The fifth file contains all of the specific stylings for Font-Awesome Icons.

Dont change anything in first(bootstrap.css) file.

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 Thirteen Javascript files.

jQuery

Details

jquery.js - To enable jQuery
bootstrap.min.js - Bootstrap js file
slick.min.js - Slick Carousel
jquery.placeholder.js - Jquery placeholder
jquery.easing.min.js - Jquery easing plugin
jquery.ketchup.all.min.js - Mailchimp plugin
jquery.animateNumber.js - Animate Number Plugin
jquery.appear.js - Onview Animate Plugin
jquery.inview.js - Onview Animate Plugin
isotope.pkgd.js - Isotope Plugin
jquery.prettyphoto.js - Lightbox Plugin
contact.js - Contact form Support PLugin
main.js - Custom theme support file

D) Tutorial - top

Follow the steps below to change the demo contents with your own contents.

1. LOGO SECTION

To replace the logo name, find this code

	Unicore

replace "Unicore" with your website name Or logo image url/source

2. NAVMENU

Open index.html file and find this code.

	
						Pricing
						
							Pages
							
								About
								Faq
								404 Page

Replace "Pricing", "About" with the menu name and "#" with the page link or anchor link.

3. INTRO CONTENT

Intro Content

Find this code

Meet the Unicore
Landing page toolkit

Nam tellus turpis blandit et ligula vel lacinia massa sit amet minus fugit in ipsum semper euismod massa auctor magna eget nunc iaculis nunc.

WatchVideo

Purchase Now Learn More

replace the text between "<h3>" "</h3>" and "<p>" "</p>" with the intro title and description.

replace "Purchase Now" and "Learn More" with the button name.

replace "#" with the button links.

Same for all intro pages

Intro Newsletter (mailchimp)

Open "subscribe.php" file from "PHP" folder and find this.

$apiKey = 'YOUR_API_KEY';

Replace "YOUR_API_KEY" with your mailchimp API key - How to get API key?

$listId = 'YOUR_LIST_ID';

Replace "YOUR_LIST_ID" with your mailchimp newsletter list id - How to get List ID?

$submit_url = "http://us3.api.mailchimp.com/1.3/?method=listSubscribe";

Replace "us3" with your actual data center (You can find the data center on the API key)

4. SERVICES SECTION

Find this code.

					
						
						
							Responsive Design
							Nam tellus turpis blandit et ligula sit amet mattis congue semper euismod massa auctor magna eget nunc iaculis nunc.

To replace the icon, go to this link and choose your icon and replace "icon2-laptop-phone" with your icon name. or go to "css/icons" folder and open each folder and open .html file in browser and choose your icon

Replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the service title and description.
This will be the same for all service columns.

5. TESTIMONIALS

Find this code

						
							
							Unicore is hands down the most flexible and enjoyable HTML template. It was built with the awesome bootstrap framework and with multiple layouts and more.
							Mark Dave - Web Design

replace the text between "<p>" "</p>" with the quote info.

replace the text between "<div class="author">" "</div>" with the quote author info.

6. PRICING TABLE

Find this code

					
					
						
							Startup
							Perfect for small less than 10 team
							$19/ month
							
								1 GB of space
								Support at $25/hour
								Small social media

replace "Startup" with the plan name.
replace the text between "<div class="pricing__price">" "</div>".
replace the text between "<li>" "</li>" with the plan features.
replace the "#" in "<a href="#">" with the link to the plan page or checkout page.

Do the same for all four.

7. GOOGLEMAP

Open "contact.html" and find this.

40.6700, -73.9400

Go to this link and in the search bar update your location or address and press go.
Scroll down the page to see the lattitude and longitude of your location. Update those here in both places and save.

8. CONTACT FORM

Open "contact.php" file from "PHP" folder and find this code.


define( "RECIPIENT_NAME", "YOUR_NAME_HERE" );
define( "RECIPIENT_EMAIL", "YOUR_EMAIL_HERE" );

Replace "YOUR_NAME_HERE" with your name
Replace "YOUR_EMAIL_HERE" with your email, where you want to receive the mails.

9. COPYRIGHT

Replace the Copyright contents with yours.

10. VIDEO POPUP

Find this

Replace "https://www.youtube.com/watch?v=ir1xdtIb-g0" with your video url. Youtube, vimeo or whatever.

CHANGE SKIN

Open the HTML file in Notepad++ or any HTML editor and find this

Now open CSS > SKIN folder and choose a color and replace default.css with it.
For example, for red use this

BOXED VERSION

Open html file and find this

	id="page-top"

change it to

	id="page-top" class="boxed"

Thats it. You are done. Now your website is ready to launch.

E) Sources and Credits - top

I've used the following images, icons, plugins, fonts or other files as listed.

Google WebFont used - Poppins
Google WebFont used - Lato
Fonticons by - fontawesome
Demo images from - Pixeden.com
Demo images from - Photodune
Demo images from - Pixabay
Demo images from - shutterstock
Demo images from - Invisionapp Free Mobile UI

All images, Icons, Logos, Fonts used in this template are free for commercial use.

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. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Author Name

Go To Table of Contents

Unicore - Documentation

“Unicore - Responsive Multipurpose landing page”

Table of Contents

A) HTML Structure - top

B) CSS Files and Structure - top

C) JavaScript - top

D) Tutorial - top

Meet the UnicoreLanding page toolkit

Responsive Design

Startup

Thats it. You are done. Now your website is ready to launch.

E) Sources and Credits - top

Meet the Unicore
Landing page toolkit