Thank you for purchasing Elmaks HTML 5 template. If you have any questions that are beyond the scope of this help file, please send me a message to my Themeforest profile. Thanks so much! The HTML code is 100% responsive and adaptive to different devices. The code is valid and cross browser on each modern browsers. It used the HTML5 and CSS3 technics.
In this user guide you will find all required information to get your site up and running: starting from Template installation and setup, to usage of different post types, page templates and shortcodes.
In Elmaks we use mobile first approach it means CSS3 styles for mobile devices loading faster desktop devices.
All pages has preloading placeholder. All content will be shown, after total page loading.
In demo version our team use best images service Unsplash all images belong to that service we just use it for demonstration goal. We give Template with images placeholders with sizes instead of images, We respect all authors rights what it comes images.
Project separated into application and distribution sides:
Elmaks use additional technologies:
First of all you'll need to install all npm dependencies.
Note! All npm dependencies contains in package.json file.
Next thing you will need to do is install bower like package manager
npm install -g bower
Note! All bower dependencies contains in bower.json file.
For fast developing we use Gulp
To start developing process run in prompt next command
gulp in project root dir.
Gulp (gulpfile.js) has next tasks:
gulptask for starting developing process.
More information about tasks you'll find in gulpfile.js
Better way to use sources in src folder, but if you don't know all technologies you can simply edit dist files
Change some CSS styles. Open *.html which you need, for example index.html find head block, then find CSS styles comment next string like link href="stylesheet" .. etc, will be including CSS file.
You have to change
href="path/file.css" in order to include normal CSS3 file style.
href="./css/index.css" for including unminified version of CSS3 file.
Then you can open CSS file which you need for example dist/css/index.css and modify it.
Note! Elmaks project includes normal and minified CSS3 versions of files Like dist/css/index.min.css and dist/css/index.css You can switch if you need it. For what it is required? Minified version of files need for faster loading project, it is difficult to modify it, Normal CSS version good for modification but slower for loading
Change brand name.
Open *.html which you need, for example index.html find header block with class="header-brand" next find link class="logo-link" and change brand image.
Just change brand text name, beacuse Elmaks project use just styling text as brand name.
Of course, you can paste a picture as a logo instead of a brand of text, but you may need to add some CSS styles to the file
Add new item to main menu. Open any *.html file.
At Elmaks project in top header we use simple/dropdown menu.
If you want edit some items of menu,
ul with id
and do what you would like.
Also you can add sub menu to yours new menu item, just add
ul tag with class
dropdown-menu with sub element items, inside your new item menu
You should look how to build sub menu in other items sub menu
All texts and icons you can change in .html files.
Elmaks project in general use widgets approach, it means any of widgets you can paste in any place of project. Really easy to customize any widgets (just for developers, for users you can send me a message to my Themeforest profile. for customization any widgets). In order to edit any widget you will need:
Gulp server,open prompt, go to the root project and type
Important! Template not include images which you see in demo! SuperBcode team respect all rights about images/icons.
You have got Elmaks HTML 5 Template with images placeholders with sizes instead of images, we respect image rights. Just change images to yours.
List of all Bower packages you'll find at bower.json all of it located in bower_components folder.
Note! bower_components folder appear after installation
bower as package manager.
List of all NPM packages you'll find at package.json all of it located in node_modules folder.
Note! node_modules folder appear after installation
npmjs as package manager.
Also, our team will gladly answer all your questions that you could not find in this documentation. Just send message to Themeforest profile. Thank you for purchasing our product.
Deep theme customization (beyond theme options) can be done in CSS. If you are familiar with it, you can use FireBug (FireFox plugin for web-developers) or Chrome web developers tools to define which style should be changed and where.
Once again, thank you so much for purchasing our theme.