All pages are designed in sections and are fully commented which allows you to easily build your own designs from the theme.
Example:
<title>Astonish - Multipurpose HTML5 Theme</title> <!-- ================================== --> <!-- ========== CSS INCLUDES ========== --> <!-- ================================== --> <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/buttons.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/icomoon.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/parallax-slider.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/prettyPhoto.css" media="screen" rel="stylesheet" type="text/css"> <link id="header-switch" href="css/headers/dark.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/animate.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/astonish.css" media="screen" rel="stylesheet" type="text/css"> <link id="style-switch" href="css/color-schemes/color1.css" media="screen" rel="stylesheet" type="text/css"> </head> <body data-offset="62" data-spy="scroll" data-target=".navbar" onload="initialize()"> <!-- ============================================= --> <!-- ============ START TOP STICKY MENU ========== --> <!-- ============================================= --> <nav class="navbar navbar-default navbar-fixed-top nav-fadein" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display -->
As you can see it is very easy to find what you are looking for within our HTML documents.
This makes customizing the theme extremely simple.
All CSS Files are fully commented and cleanly designed to allow you to easily find and edit what you are looking for.
CSS Files Included:
1. bootstrap.min.css - Core Bootstrap 3 Styles
(Recommendation - Do not edit this file but rather copy the classes you wish to change and paste them into astonish.css)
2. font-awesome.css - FontAwesome Icons
3. icomoon.css - IcoMoon Icons
4. prettyPhoto.css - PrettyPhoto Gallery Styles
5. slider-settings.css - Revolution Slider Styles
6. buttons.css - Button Styles
7. animate.css - Includes all Keyframe Animations for Animation-Engine.js
8. parallax-slider.css - Parallax Slider Styles
9. astonish.css - All Custom ASTONISH Theme Styles
Special CSS Files:
10. color-schemes/ - Includes 11 pre-made color schemes + the original scheme = 12 color schemes
Feel free to copy one of the color scheme files and replace the hex codes to whatever colors you want.
Then edit this line on your pages to include your custom color scheme:
<link id="style-switch" href="css/color-schemes/color1.css" media="screen" rel="stylesheet" type="text/css">
11. headers/ - Includes 2 pre-made header files.
dark.css - The default dark header
light.css - Optional light header
Just edit this line on your pages to include the header of your preference:
<link id="header-switch" href="css/headers/dark.css" media="screen" rel="stylesheet" type="text/css">
Example of Organize CSS:
/* ================================ */ /* ======== TABLE OF CONTENTS ========= */ /* ================================ */ /* 1. GOOGLE FONTS 2. BASIC STYLES 3. HELPER CLASSES 4. HEADING STYLES 5. IMAGE STYLES 6. BLOG STYLES 7. SIDEBAR STYLES AND WIDGETS 8. SCROLL TO TOP BUTTON 9. TESTIMONIALS STYLES 10. IMAGE OVERLAYS 11. PRICING TABLE STYLES 12. ICON FEATURE BOXES 13. CONTACT PAGE MAP STYLES 14. FORM STYLES 15. TEAM MEMBERS 16. SOCIAL ICONS 17. COUNTER STYLES 18. ACCORDION AND TABS 19. STYLE SWITCHER 20. OWL CAROUSEL 21. PORTFOLIO STYLES 22. ISOTOPE FILTERING SCRIPT 23. BREADCRUMBS STYLES 24. PAGINATION STYLES 25. PROGRESS BAR STYLES 26. TABLE STYLES 27. FOOTER STYLES */
All Javascript files are also cleanly written and commented for easy editing and organization.
JS Files Included:
1. bootstrap.js / bootstrap.min.js - Core Bootstrap 3
Documentation: http://www.getbootstrap.com
2. animation-engine.js - Custom Animation Script created by us, CreativelyCoded
Documentation: Details for use are included below.
3. astonish.js - Core Astonish Theme Javascripts
Documentation: Details for use are included below.
4. counter.js - Countdown counter script created by us, CreativelyCoded
Documentation: Details for use are included below.
5. jquery.easing.1.3.js - Easing animations used in combination with the scroll to function
Documentation: http://gsgd.co.uk/sandbox/jquery/easing/
6. jquery.isotope.min.js - Filtering and Sorting Script
Documentation: http://isotope.metafizzy.co/
7. jquery.nicescroll.min.js / jquery.nicescroll.plus.js - Custom Scrollbar Styling
Documentation: http://areaaperta.com/nicescroll/
8. jquery.prettyPhoto.js - Photo Gallery Script
Documentation: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
9. jquery.superslides.js - Full Screen Slider used for Parallax Slider Effect
Documentation: http://nicinabox.com/superslides/
10. jquery.themepunch.revolution.min - The Incredible Slider Revolution
Documentation: Full Documentation is included in the Assets Folder
11. owl.carousel.js - Item Slider Script
Documentation: http://owlgraphic.com/owlcarousel/
12. stellar.js - Parallax Backgrounds Script
Documentation: http://markdalgleish.com/projects/stellar.js/
13. style-switcher.js - Custom Style Switcher Script created by us, CreativelyCoded
Documentation: Details for use are included below.
14. validation.js - Form Validation Script
Documentation: Details for use are included below.
We have included over 800+ Font Icons provided by FontAwesome and Icomoon.
http://fortawesome.github.io/Font-Awesome/
http://icomoon.io/
Icons can easily be added by using the "i" tag.
Example: To add FontAwesome Icons
<i class="fa-iconName"></i>
Replace "iconName" with the actual icon name you wish to display.
Icon names for Font Awesome can be found here: http://fortawesome.github.io/Font-Awesome/icons/
Example: To add Icomoon Icons
<i class="im-iconName"></i>
Replace "iconName" with the actual icon name you wish to display.
Icon names for IcoMoon can be found here: http://icomoon.io/app/
Select the icons you want and push the "Font" button which will display the icon names.
To edit the Google Map style and location marker please open "google.map-settings.js" in your favorite text editor.
Location Marker:
To edit the location marker you must enter in your Latitude and Longitude coordinates.
You can find your Lat and Lng by using this resource:
http://www.latlong.net/convert-address-to-lat-long.html
// ========== START GOOGLE MAP ========== // var map; var myLatLng = new google.maps.LatLng(43.26081,-79.933149);
Map Options:
Map options can be change or set on the following lines.
var mapOptions = { zoom: 14, center: myLatLng, disableDefaultUI: true, scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas'] } };
We have included a form handler script, contact-form.php
To setup the contact-form.php, open the file in a text editor.
There are only 2 lines that need to be edited:
// ADD YOUR INFOMATION HERE $recipient = "YourEmail@Domain.com"; $successPage = "index.html";
$recipient is the email address that you would like the form information sent to.
$successPage is the html page that the user will see after the form has been submitted.
The Animation Engine is a new Javascript specifically written for the Astonish Theme.
It makes use of animate.css which you can see here http://daneden.github.io/animate.css/
We've added some of our own animations as well.
To add an animation to an element you must include the "ae" class on the element.
If you only include this, the Animation Engine will use default settings and automatically fadeIn the element as it scrolls into view.
Default Settings are as follows:
Animation: fadeIn
Offset: 90% (meaning when the element comes into view and is 90% away from the top of the viewport it will activate the animation)
Speed: 1000ms or 1 second
Delay: 0
You can also set a disable point. The default disable point is set to screensizes less than 1024px in width.
This is to improve performance on tablets and mobiles. You can change this disable point if you wish.
How to Set up an Element to Animate:
The Animation Engine uses data attributes to load the animation and various options.
You have the option of adding the following data attributes to the element.
1. Always add the "ae" class to the element first.
2. data-animation="animationName" is the type of animation you want to take place
3. data-speed="animationSpeed" in milliseconds
4. data-delay="animationDelay" in milliseconds this is useful for having multiple items on the same line animate in at different times.
5. data-offset="animationOffset" in percent. An offset value of 100% means the animation will fire as the top of the element hits the bottom of the viewport. An offset value of "50%" means the animation will fire as the top of the element reaches the center of the viewport.
That's it, happy animating.
We support our themes 100%.
Please contact us at support@creativelycoded.com
We will be happy to help you with our themes.
Please also report and bugs or concerns so we can address them.
Thanks