Thank you very much for purchasing our site template. 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.
Login and Register
|
1 2 3 4 5 6 7 8 9 10 |
<div class="acc-mask"> <div class="acc-wrap"> <div class="acc-inner"> <a class="acc-close" href="#">Close</a> {LOGIN CONTENT} {REGISTER CONTENT} </div><!-- .acc-innter --> </div><!-- .acc-wrap --> </div><!-- .acc-mask --> |
Main Menu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="cd-nav" id="cd-nav"> <div class="cd-navigation-wrapper"> <div class="cd-half-block"> <nav class="menu-main-menu-container"> {MAIN MENU CONTENT} </nav><!-- .menu-main-menu-container --> </div><!-- .cd-half-block --> <div class="cd-half-block"> {SLIDE CONTENT} </div><!-- .cd-half-block --> </div><!-- .cd-navigation-wrapper --> </div><!-- #cd-nav --> <a class="cd-nav-trigger" href="#cd-nav">Menu <span class="cd-nav-icon"></span> </a><!-- .cd-nav-trigger --> |
Main Section
|
1 2 3 4 5 |
<div id="content" class="site-content"> <main id="main" class="site-main"> {SLIDE CONTENT} </main><!-- .site-content --> </div><!-- #content --> |
Footer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<footer class="site-footer"> <div class="left-footer"> <div class="site-branding"> {LOGO} </div><!-- .site-branding --> <div class="bottom-info"> {SLIDE CONTENT} </div><!-- .bottom-info --> </div><!-- .left-footer --> <div class="right-footer"> {SLIDE CONTENT} </div><!-- .right-footer --> <div class="more-inner-footer"> <div class="tab"> {TAB CONTROLS} </div> {TAB CONTENT} </div><!-- .more-inner-footer --> </footer><!-- .site-footer --> |
This theme uses style.css file as main CSS file and other additional css files located at css folder.
style.css
Main CSS files in this theme is style.css that contains all of specific stylings for the theme.The file is separated into sections using labels as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
/* 1. Import files ========================================================================== */ {SOME CODES} /* 2. Reset ========================================================================== */ {SOME CODES} /* 3. Typography ========================================================================== */ {SOME CODES} /* 4. Icons Font ========================================================================== */ {SOME CODES} /* 5. Elements ========================================================================== */ {SOME CODES} /* 6. Forms ========================================================================== */ {SOME CODES} /* 7. Grid System ========================================================================== */ {SOME CODES} /* 8. Main Menu ========================================================================== */ {SOME CODES} /* 9. Content ========================================================================== */ {SOME CODES} /* 10. About page ========================================================================== */ {SOME CODES} /* 11. Contact page ========================================================================== */ {SOME CODES} /* 12. Blog Layout ========================================================================== */ {SOME CODES} /* 13. Single Blog ========================================================================== */ {SOME CODES} /* 14. Widget style ========================================================================== */ {SOME CODES} /* 15. Shop ========================================================================== */ {SOME CODES} /* 16. Shop Sidebar ========================================================================== */ {SOME CODES} /* 17. Shop - Home version 3 ========================================================================== */ {SOME CODES} /* 18. Single Product ========================================================================== */ {SOME CODES} /* 19. Shop - Single product relate ========================================================================== */ {SOME CODES} /* 20. Shop - Shop category page ========================================================================== */ {SOME CODES} /* 21. Shop - Cart page ========================================================================== */ {SOME CODES} /* 22. Shop - Wishlist page ========================================================================== */ {SOME CODES} /* 23. Shop - Checkout page ========================================================================== */ {SOME CODES} /* 24. 404 Page ========================================================================== */ {SOME CODES} /* 25. Offline Page ========================================================================== */ {SOME CODES} /* 26. Footer ========================================================================== */ {SOME CODES} /* 27. Login and Register ========================================================================== */ {SOME 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.
responsive.css
responsive.css contains styling for media queries that allows us to tailor to different resolutions and devices without changing the content. The file is separated into sections as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@media only screen and (max-width: 1366px) { {SOME CODES} } @media screen and (max-width: 1170px) { {SOME CODES} } @media screen and (max-width: 1024px) { {SOME CODES} } @media only screen and (max-width: 960px) { {SOME CODES} } @media only screen and (max-width: 768px), (max-device-width: 1024px) { {SOME CODES} } @media only screen and (max-width: 768px) { {SOME CODES} } @media screen and (max-width: 540px) { {SOME CODES} } @media only screen and (max-width: 480px), (max-device-width: 480px) { {SOME CODES} } |
If you would like to edit styling of the specific device width, simply find the appropriate label in the responsive.css file, and then scroll down until you find the appropriate style that needs to be edited.
Additional css files at css folder
This theme imports following Javascript files.
Except functions.js, all of the plugins are packed, so you don’t need to manually edit anything in these files. The only necessary thing to know is how to call the method. You can refer to the website of the plugin author I listed in the “Sources and Credits” section to learn more about them.
Main.js contains custom scripts and scripts to call method for above plugin. The file is separated in to sections with appropriate label.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/* [ Detecting Mobile Devices ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ prettyPhoto ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Tabs ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Accordion ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Sidebar scroll ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Add animation main menu ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Click show/hide sub menu ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Tabs right footer ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Set height main content ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Set height childrent post item ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Advance filter shop page ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Set height childrent post item ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Put featured product up the first ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Pagination slider ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Product related responsive ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Login and register popup ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} /* [ Product slider vertical ] - - - - - - - - - - - - - - - - - - - - */ {SOME CODES} |
I’ve used the following images, icons or other files as listed.