Search
Close this search box.

Eiefy – Documentation

Eiefy – Documentation SyntaxHighlighter.defaults[‘toolbar’] = false; SyntaxHighlighter.all(); document.createElement(‘section’); var duration = 500, easing = ‘swing’; html{background-color:#f9f7f5;color:#383838;} ::-moz-selection{background:#fcd355;} ::selection{background:#fcd355;} #documenter_sidebar #documenter_logo{margin: 40px;} a{color:#3021ec;} hr{border-top:1px solid #e3e3e3;border-bottom:1px solid #FFFFFF;} #documenter_sidebar, #documenter_sidebar ol a{background:#25292D;color:#888;} #documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #B9F2EF;-moz-text-shadow:0px 1px 0px #C8E9EC;text-shadow:0px 1px 0px #C8E9EC;} #documenter_sidebar ol a{background:#ebebeb; border-bottom:1px solid #81a9ac;border-top:1px solid #b6dcdf;color:#122b31;} #documenter_sidebar ol a:hover{background:#3021ec;color:#FBFFE4;border-top:1px solid #81a9ac;border-bottom:1px solid #81a9ac;} #documenter_sidebar ol a.current{background:#3021ec;color:#FBFFE4;border-top:1px solid #81a9ac;border-bottom:1px solid #81a9ac;} #documenter_copyright{display:block !important;visibility:visible !important;}

  1. Start
  2. Folder Structure
  3. How to Edit Template
  4. HTML Structure
  5. CSS Files
  6. LESS and Structure
  7. JavaScript
  8. PSD Files
  9. Sources and Credits

Copyright Cruzyayo 2013
made with the Documenter v1.3 Eiefy

Premium HTML 5 website

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!

Eiefy is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 10. It’s powered by jQuery and you’ll find nice and discreet interactivity. Also. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript

Folder Structure

When you unpack downloaded archive from ThemeForest.net you’ll get folder containing 3 folders.

Here they are, sorted alphabetically:

  1. Documentation – Documentation for Eiefy site template
  2. HTML – Main folder for template

How to Edit Template

This is HTML template. It doesn’t include backend features. To edit template page you should edit source code.

To edit source code you should be familiar with HTML, CSS, JavaScript and LESS languages.

You can use your favorite text editor. For example Notepad++ – https://notepad-plus-plus.org/

You should use LESS compiler to compile CSS files from LESS source files. For example WinLess – http://winless.org/

Below you will find files structure.

HTML Structure

Body part of the Html file is divided in three main sections and each of these sections is further divided into smaller parts:

  1. HEADER
    • header – logo and navigation
  2. CONTENT

    18 pages:

    • index.html – Home page
    • about_us.html – About us page
    • browse.html – Browse page
    • cart.html – Cart page
    • case_study.html – Case study page
    • contact_support.html – Contact and support page
    • downloads.html – Downloads page
    • knowledge_base.html – Knowledge base page
    • knowledge_base_browse_topic.html – Knowledge base browse topic page
    • knowledge_base_single_topic.html – Knowledge base single topic page
    • login.html – Login page
    • order_service.html – Order service page
    • pricing.html – Pricing page
    • services.html – Services page
    • signup.html – SignUp page
    • single_item.html – Single item page
    • single_item_themeforest_affiliate.html – Single item for Themeforest page
    • works.html – Works page
  3. FOOTER © 2016 azyrusthemes

HTML code includes comments which makes it easyreading and self-explanatory.

To edit LOGO.

  1. Open HTML file
  2. Find logo section. You can search for “logo” keyword. Or find comments with particular description.
  3. Find logo image tag. logo
  4. Edit ‘src’ attribute to change logo.
Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html> <html lang=”en-US”> … </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class=”row”> <div class=”col-lg-4″>…</div> <div class=”col-lg-8″>…</div></div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

<div class=”row”> <div class=”col-lg-4″>…</div> <div class=”col-lg-4 col-lg-offset-2″>…</div> </div>

CSS Files

CSS theme file was compiled from LESS source files. It’s not recommended to edit CSS file. Edit LESS file and compile CSS

  1. css/style.css – Theme CSS (compiled from less source files)
  2. fonts/font_awesome/font-awesome.css – Font Awesome
  3. external/bootstrap/bootstrap.min.css – Bootstrap

LESS Files

LESS files are structured and dived by pages and sections.

Use any less compiler to compile source files in CSS. I use WinLess compiler (http://winless.org/)

  1. less/_mixin.less – File for less mixins
  2. less/_general.less – File for less variables
  3. less/_properties.less – File for properties and modifiers
  4. less/_blocks.less – File for less blocks
  5. less/_footer.less – Footer styles
  6. less/_header.less – Header styles
  7. less/_main.less – Main styles
  8. less/style.less – The resulting file

JavaScript

JavaScript files:

  1. Theme JS – js/app.js
  2. jQuery – external/jquery/jquery.js
  3. Bootstrap – external/bootstrap/bootstrap.min.js

PSD Files

  • Photoshop files are not included in this Theme, you can purchase the PSD format files on Themeforest

    • Sources and Credits

    I've used the following scripts, icons or other files as listed.

    WARNING!!! Demo images are not included into template source files. You should purchase images separatly. Demo images are used from photodune.net

    Download preview generators here

    Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the Eiefys and asking your question in the "Item Discussion" section.

    If you are satisfied with "Eiefy – site template" please go to your downloads section on ThemeForest.net and rate Eiefy with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you 🙂

    Hope that you will enjoy in Eiefy as much as I’ve enjoyed designing this template.

    Kind Regards,
    azyrusmax

    Youtube Facebook-f Linkedin-in Instagram
    CATEGORIES

    Sign Up for Our Newsletter

    a pacific & lord company