Created: 1 Dec.2012
Last Update: 30 Jun.2015
By: BlueOwlCreative
contact@blueowlcreative.com
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 here. Thank you!
AquaTheme - HTML Template is a Responsive, HTML5/CSS3 theme that features a clean and slick design that is suitable for a wide variety of websites. It includes a Theme Styler tool that helps you customize the theme anyway you like: unlimited colors, 3 menu presets, the best of Google Fonts + 2 Layout modes. It utilizes Skeleton CSS Framework and is 100% tablet/phone friendly. AquaTheme - HTML Template also includes Sequence slider, FlexSlider, jCarousel, Google Web fonts and more to contribute to an enjoyable, intuitive and functionally exhaustive user experience. The theme includes plenty of reusable elements: Sliders, Tabs, Accordions, Testimonials, Messages, Lists, Buttons, Tooltips, HighLights, several presets of Text Titles, tables and some awesome looking icons you can use for your featured text sections. AquaTheme - HTML Template is also Cross Browser compatible and has very clean code and documentation.
To preserve a certain set of styles you decide on using the "Template Styles" popup do the following: Open index_styler.html in a browser. Pick the styles you want to use (from the popup on the left). Since this is a static HTML template you will need to edit the changes within your files in order to apply them. Each of the "Template Styles" options is listed below along with the changes you need to make to your file(s) to apply its styles.
Menu Style
Edit the file you want to apply to, for example "index.html". Locate the beginning of your main navigation:<div id='menu'>. To use the dark menu add "dark_menu" class to its parent, for example: <div class="dark_menu sixteen columns"><div class="sixteen columns">Custom Menu BGR COLOR (only if using Custom Menu)
Locate "Custom Menu BGR COLOR" in the "#Template Styles" section of your style.css file. Add a "background-color" rule to the declaration containing the color hex index you want to use. For example you decided to use Custom menu and selected Orange color - "FF8C00". Enter this:.custom_menu #menu, .custom_menu #menu > ul > li > a {
background-color: #FF8C00;
}Change Menu Font with a Google font (anything other than default - OpenSans)
Say you want to go with "Arvo" from the "Template Styles" popup. First thing to do is include the font in the header of file you are going to use it in: index.html for example. Edit index.html. Locate the line where currently OpenSans font (default font it the theme) is included in the header.<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
.custom_menu #menu > ul > li > a {
font-family: Arvo;
}Change Menu Font size
Say you want to go with 18px from the "Template Styles" popup. You then need to set the font-size in your Menu navigation, locate "Menu Font Size" in the "#Template Styles" section of your style.css file. Set the new font-size and you are good to go.#menu > ul > li > a {
font-size: 18px;
}HighLight COLOR (the main accent color of the site)
Locate "HighLight Color" in the "#Template Styles" section of your style.css file. Uncomment the whole section below, note that there are quite a few rules - this is because your new highlight color needs to be applied to many elements throughout the page.a:hover, a:focus { color: hex ; }
.button:hover,a:hover.button,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,
input[type="button"]:hover, .button_hilite, a.button_hilite { color: #fff; background-color: hex ;}
.button_hilite, a.button_hilite { color: #fff; background-color: hex ;}
.button_hilite:hover, a:hover.button_hilite { color: #fff; background-color: #374045;}
.section_big_title h1 strong { color: hex ;}
.section_featured_texts h3 a:hover { color: hex ;}
.breadcrumb a:hover{ color: hex ;}
.post_meta a:hover{ color: hex ;}
.portfolio_filter div.current{ background-color: hex ;}
.next:hover,.prev:hover{ background-color: hex ;}
.pagination .links a:hover{ background-color: hex ;}
.info h2{ background-color: hex ;}
#footer a:hover { color: hex ;}
.footer_pic img:hover{ border: 3px solid hex ;}
.jcarousel-next-horizontal:hover, .jcarousel-prev-horizontal:hover { background-color: hex ;}Change Title Font with a Google font (anything other than default - OpenSans)
Say you want to go with "Arvo" from the "Template Styles" popup. First thing to do is include the font in the header of file you are going to use it in: index.html for example. Edit index.html. Locate the line where currently OpenSans font (default font it the theme) is included in the header.<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
h1, h2, h3, h4, h5, .title, .section_big_title h1, .heading, #footer h3 {
font-family: Arvo;
}Change Button Font with a Google font (anything other than default - OpenSans)
Say you want to go with "Arvo" from the "Template Styles" popup. First thing to do is include the font in the header of file you are going to use it in: index.html for example. Edit index.html. Locate the line where currently OpenSans font (default font it the theme) is included in the header.<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
.button, a.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
font-family: Arvo;
}Change Body Font (anything other than default - OpenSans)
Say you want to go with "Tahoma" from the "Template Styles" popup. You need to set the font to be used for the body text, locate "Body Font" in the "#Template Styles" section of your style.css file. Set the font-family here and you are good to go.body {
font-family: tahoma;
}Change Wrapper style
If you want to use the Full Width wrapper style simply add "full_wrapper" class to the div id="wrapper" in your html document like so:<div id="wrapper" class="full_wrapper">Change Main Background
If you want to change the current background image with one from the patterns in the dropdown simply browse through the files (they are located in "\styler\bgrs" folder), copy the file you want to use and paste it over this file: "main_bgr.png" in the theme's "images" folder.Any other updates
Feel free to make any other updates to your style.css file as you please.Use the contact.php instead of the contact.html file. It contains the PHP code to validate your form as well as send the form content to the email account you set within it. Edit the contact.php and within it find this:
$emailTo = 'YourEmail@AddressHere';Replace "YourEmail@AddressHere" with the email where you want your form sent, make sure your webserver mail server is operating and you are ready to go!
AquaTheme is compatible with all major browsers: