1. START
  2. Overview
  3. html
  4. css
  5. fonts
  6. Icon fonts
  7. javaScript
  8. Common styles
  9. HTML5 Local video
  10. explaining every sections
    1. Navigation
    2. Homepage Variants
    3. Portfolio Section
    4. Portfolio Ajax
    5. Subscription section
    6. Contact section
  11. credits
  12. thanks!

Cedia :: Multipurpose HTML5 Template

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 via my user page contact form abmathasuriya on ThemeForest OR You can send me mail at my email address. Thanks so much!

Overview

The Cedia Theme build using Bootstrap v3 a powerful mobile first front-end framework for faster and easier web development.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of more folders for diferent types of theme assets:

  1. images - folder contain all images for the theme design
  2. js - folder contain all jquery plugin
  3. icons - Folder contain icon files used in theme
  4. css - folder contain all CSS files for the theme.
  5. projects - Folder contains individual project detail page that is load via ajax call

Installation

This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.

HTML

The general template structure is the same throughout the template. Here is the general structure.

Below are the general HTML structure of all pages.

HTML general Structure

Each section further described in below.

CSS

The theme comes with CSS (stylesheet) files grouped in the css folder:

1. bootstrap.min.css

2. animate.css

3. slick.css used in all slider

4. magnific-popup.css For Lightbox gallery

5. padding-margin.css- Horizontal and vertical CSS i.e. padding and margin

6. style.css is the main CSS file containg the layout styling of the pages.

7. responsive.css is the main CSS file containg the Responsive layout styling of the pages.

The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.

Fonts

This theme uses Poppins google fonts

Icon Fonts

This theme uses icon fonts like capicon, devicons-master and evericons. Each icon files contains in Icons folder.

JavaScript

This template is loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:

Some of the jQuery plugins are heavily customized and chages in their files are not recommended.

All JS functions related to the theme content management are placed in script.js. The script.js file is responsible for the main functions. Other js file loads individual in respective demo pages where it is used.

Explaining common styles

This section explains some common style used in theme.

Text alignment

You can set text alignment by using common class like
.text-center{text-align:center !important;}
.text-right{text-align:right !important;}
.text-left{text-align:left !important;}

Text italic

You can set text italic and underline by using common class like
.text-italic{font-style:italic}.text-underline{text-decoration:underline;}

Font case

You can set Font case i.e. uppercase/lowercase/none by using common class like
.lowercase{text-transform: lowercase;}
.uppercase{text-transform: uppercase;}
.nocase{text-transform:none;}

Font weight

You can set font weight (i.e. font-weight:100 TO 900) by using common class like
.fw100{font-weight:100 !important;}
.fw200{font-weight:200 !important;}....fw900

position

You can set any component position i.e. left and right by using common class like
.float-left{float:left !important;}
.float-right{float:right !important;}

You can used position(relative/fixed/absolute/static) by using common class like
.relative{position:relative !important;}
.static{position:static !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}

You can used display(block/table/table-cell/vertical-align) by using common class like
.display-block {display: block;}
.display-table {display: table !important;}
.display-none {display: none;}
.display-table-cell {display: table-cell !important;}
.vertical-align-top {vertical-align: top;}
.vertical-align-bottom {vertical-align: bottom;}
.vertical-align-middle {vertical-align: middle;}

Background color

You can set any component background color to white,gray,black or any other color by using common class like
.bg-light-gray {background: #f7f7f9;}
.bg-white {background: #fff;}
.bg-gray { background: #f2f2f2;}
.bg-black {background: #212121;}
.bg-color {background: rgb(231, 30, 20);}

Text font color

You can set any text font color to white,gray,black or any other color by using common class like
.text-white {color: #fff !important;}
.text-gray {color: #f2f2f2 !important;}
.text-black {color: #212121 !important;}
.text-color {color: rgb(231, 30, 20) !important;}

% width and % height

You can set any block with width or height in percentage by using common class like
.width-10 {width: 10%;} to width-100{width:100%}
.height-10 {height: 10%;} to .height-100 {height: 100%;}

Background Overlay

You can set any relative block with overlay to white or black or any color by using common class like
.overlay-light-10:before{background: rgba(255, 255, 255, 0.1);} to .overlay-light-90:before{background: rgba(255, 255, 255, 0.9);}
.overlay-dark-10:before{background: rgba(21, 21, 21, 0.1);} to .overlay-dark-90:before{background: rgba(21, 21, 21, 0.9);}
.overlay-color-10:before{background: rgba(231, 30, 20, 0.1);} to .overlay-color-90:before{background: rgba(231, 30, 20, 0.9);}

Button Style

You can set any button with background color or text color or button with border by using common class like
.btn.btn-white
.btn.btn-black
.btn.btn-color
for background of button and
.btn.btn-text-black
.btn.btn-text-white
.btn.btn-text-color
for button text color and
.btn.btn-border-black
.btn.btn-border-white
.btn.btn-border-color
for button border color style. The hover effect is automatically set according to class name assign in btn class.

Horizontal and vertical CSS i.e. padding and margin

padding-margin.css file contains responsive Horizontal and vertical padding and margin.
margin-top : mt-0 TO mt-140
margin-bottom: mb-0 TO mb-140
margin-left : ml-0 TO ml-140
margin-right: mr-0 TO mr-140

@media only screen and (max-width:1200px)
margin-top : mt-lg-0 TO mt-lg-140
margin-bottom: mb-lg-0 TO mb-lg-140
margin-left : ml-lg-0 TO ml-lg-140
margin-right: mr-lg-0 TO mr-lg-140

@media only screen and (max-width:1024px)
margin-top : mt-md-0 TO mt-md-140
margin-bottom: mb-md-0 TO mb-md-140
margin-left : ml-md-0 TO ml-md-140
margin-right: mr-md-0 TO mr-md-140

@media only screen and (max-width:768px)
margin-top : mt-sm-0 TO mt-sm-140
margin-bottom: mb-sm-0 TO mb-sm-140
margin-left : ml-sm-0 TO ml-sm-140
margin-right: mr-sm-0 TO mr-sm-140

@media only screen and (max-width:767px)
margin-top : mt-xs-0 TO mt-xs-140
margin-bottom: mb-xs-0 TO mb-xs-140
margin-left : ml-xs-0 TO ml-xs-140
margin-right: mr-xs-0 TO mr-xs-140

@media only screen and (max-width:480px)
margin-top : mt-xxs-0 TO mt-xxs-140
margin-bottom: mb-xxs-0 TO mb-xxs-140
margin-left : ml-xxs-0 TO ml-xxs-140
margin-right: mr-xxs-0 TO mr-xxs-140

SAME FOR PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT AND PADDING-RIGHT. YOu can use like following way.
class="mt-120 mt-sm-80" - So initial in dasktop screen its margin-top with 120px and in small devices its margin-top with 80px.

Center content

You can set any component center of the screen or center of the main wrapper by using commno class like
.valign { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
And you can also set content in center position by using alternet class like
.table-content {position: relative;display: table;height: 100%;text-align: center;width: 100%;}
.table-center-text {display: table-cell;height: 100%;vertical-align: middle;}

Navigation

Header tag containing class "header" contains main navigation. Navigation contains logo, social icon links, individual section links and mobile navigation icon to open navigation in fullscreen mode in small devices

Main navigation has two different layout i.e. visible menu and initial hidden menu and you can alter it by just adding or removing class "header-visible" in header tag.

Below are the general HTML structure for Header Navigation.

home

All Navigation style contains in style.css file.

Home page variants

Cedia theme have 8 different home page variants like

Each home page variants contains heading and sub-heading text, scroll bottom icon and background animation. All slider init script contains in "script.js" file.

Below are the general HTML structure for Home variants.

home

All Navigation style contains in style.css file.

Portfolio Section

All html in this section is nested within a section with a id of "projects". You can choose grid layout or masonry layout types.

Each layout has 4 different styles of loading project detail page like project detail page open in seperate page or project detail load via ajax on popup or you can open lightbox to view project gallery or you can set to both option i.e. gallery view and link.

Unordered list item with id "work-grid" contians 3 column project grid with individual items.

Each list item with anchor link points to individual project detail page. For ajax load anchor link contain attribute "data-url" that point to actually project detail file containing in "projects" folder. If you want to open seperate page for project detail than there is no need to attribute "data-url" but in case of ajax load it must.

Below are the general HTML structure for Portfolio section.

process-block

All style contains in style.css file

Portfolio ajax popup

All html in this section is nested within a div with a class of "popup is-popup-work".

Div containing class "popup is-popup-work" contains popup background grid, popup close button, popup content area and project navigation Below are the general HTML structure for client section.

Below are the general HTML structure for Portfolio popup layout.

process

Below are the script for loading portfolio detail via ajax call.

process process

On click of the individual project item with anchor link, ajax call initiated and load project detail page mention in "data-url" into popup with div containing class "project-detail" and popup is visible. please note that ajax load only work via http page path. so you have to open home page from server.

All styles for this section contains in style.css file

Subscribe/Newsletter section

All html in this section is nested within a section with a class of "page-section".

Div containing class "newsletter-block" contains validated mailchimp form. You have to just replace action attribute of form tag to your mailchimp subscribe form link. on click of the "newsletter-submit" button, ajax call to mailchimp url and get back response and display in div containing class "subscribe-result".

Below are the general HTML structure for Subscribe/Newsletter section and script to call ajax.

Work page Work page

All styles for this section contains in style.css file

Contact Popup

All html in this section is nested within a div with a class of "popup is-popup-contact".

Div containing class "popup is-popup-contact" contains popup background grid, popup close button, popup content area Below are the general HTML structure for contact section.

gallery

All style contains in style.css style

 

Credits

Thanks!

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

please feel free to send me a message here: abmathasuriya on ThemeForest. Or mail at abmathasuriya@gmail.com