Diamond is a responsive, under construction / coming soon HTML template. This minimal template is being packed with a countdown timer, subscription form, mail form, gallery, social icons and beautiful effects
Please do not forget to rate Diamond template on ThemeForest. This can be done in Downloads area. Just select Diamond in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.
This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someone to assist you.
This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).
This documentation will demonstrate the custom elements used in template and help you with their customization.
index-****.html is the main template file that contains the HTML structure of the template.
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
assets/css/style.css (general styles)
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.
Template installation is pretty easy. All required files are in every version so you can delete unused.
Files are written in simple HTML/CSS/JS/PHP, so you do not need an internet connection in order to display or edit the template, you can view this template in any web browser from your computer. It's important to understand that you must have an online server in order to use this template as a real website. The server can be purchased at many different places around the internet. It's a simple thing: You need to put the files that you purchased somewhere so others can find them online.
Here are the required steps:
index-****.html to index.html
Make sure you also change the title, description and keywords meta tags with your own.
Please change the favicons. Check Favicon and Apple Icon parts in the index-****.html file. Replace the favicon.ico and apple-touch-icon.png located in the template's images folder assets/img/ with yours.
To change the logo replace the logo.png located in the template's images folder assets/img/ with yours.
Check Color Style part in the index-****.html file. You will find colors link. So if you want to use any other color just replace the color name green.css, or you can remove this line for default color active.
Available colors: amber.css,
blue.css,
brown.css,
dark-red.css,
dark-violet.css,
gold.css,
gray-blue.css,
green.css,
indigo.css,
light-blue.css,
light-green.css,
light-pink.css,
pink.css,
red.css,
red-orange.css,
sand.css,
teal.css,
violet.css,
1. To change the font, first go to https://fonts.google.com/. Choose a font and use the generated code.
2. Please take a look Fonts part in the index-****.html file.
3. Replace the generated code.
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
4. Than change you font name in font-family: in assets/css/style.css
Please do not forget to replace the links and icons on the necessary social networks.
Replace the # symbol with your link and set the necessary icons fa fa-facebook.
The list of all the icons you will find here: http://fontawesome.io/icons/
Open index-****.html template and change counter for you data (year, month, day).
1. Check Google Map part in index-****.html file, and enter your Google API kay .
More info how to get API kay - https://developers.google.com/maps/documentation/javascript/get-api-key
2. Change you latitude and longitude for your.
This method for templates: Single, Parallax, Clouds, Particles, Single-Zoom, Firefly and Snow
You can find all images used for the background within the images folder assets/img/. Replace those images with yours and if necessary change their names bg1.jpg respectively in the index-****.html file.
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-50 - Make background darker or lighter (0, 10, 20, ... 100)
You can find all images used for the background within the images folder assets/img/. Replace those images with yours and if necessary change their names bg1.jpg, bg2.jpg, bg3.jpg respectively in the index-****.html file.
For change slider delay, please found parameter delay: 6000 and change for another. Delay beetween slides in milliseconds.
For change slider animation, please found parameter transition: in the index-****.html file, and change effect blur2 for another.
Effects: fade,
fade2,
blur,
blur2,
flash,
flash2,
negative,
negative2,
burn,
burn2,
slideLeft,
slideLeft2,
slideRight,
slideRight2,
slideUp,
slideUp2,
slideDown,
slideDown2,
zoomIn,
zoomIn2,
zoomOut,
zoomOut2,
swirlLeft,
swirlLeft2,
swirlRight,
swirlRight2
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-50 - Make background darker or lighter (0, 10, 20, ... 100)
You can find all video used for the background within the video folder assets/video/. Replace those video with yours and if necessary change their names respectively in the index-****.html file.
Since the video player falls back to the poster image on mobile devices, you need to update background bg2.jpg image as well. Make the screenshot of your video and replace the default background image located in the template's images folder.
To change the background YouTube video, please edit the videoURL parameter value of the data-property attribute in the index-****.html file.
Since the video player falls back to the slider images on mobile devices, you need to update backgrounds images. Replace those images with yours and if necessary change their names bg1.jpg, bg2.jpg, bg3.jpg respectively in the jquery.mb.YTPlayer.min.js file..
This file you can find in folder assets/js/
You can find all images used for the background within the images folder assets/img/. Replace those images with yours and if necessary change their names bg1.jpg, bg2.jpg, bg3.jpg respectively in the index-****.html file.
For change slider delay, please found parameter delay: 6000 and change for another. Delay beetween slides in milliseconds.
For change Ken Burns animation, please found parameter animation: in the index-****.html file, and change effect kenburns for another
Animation: kenburns,
kenburnsLeft,
kenburnsRight,
kenburnsUp,
kenburnsUpLeft,
kenburnsUpRight,
kenburnsDown,
kenburnsDownLeft,
kenburnsDownRight
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-50 - Make background darker or lighter (0, 10, 20, ... 100)
You can find image used for the background within the images folder assets/img/ file bgrain.jpg. Your image must be named bgrain.jpg, otherwise the background will not work.
You can find image used for the background within the images folder assets/img/ file glitch-new.jpg. Your image must be named glitch-new.jpg, otherwise the background will not work.
For change Heat Distortion / Water backgrounds, please read a special Documentation...
More information here..
You can find all images used for the background within the images folder assets/img/. Replace those images with yours and if necessary change their names bg1.jpg respectively in the style.css file.
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-90 - Make background darker or lighter (0, 10, 20, ... 100)
You can find all images used for the background within the images folder assets/img/. Open glitch.js(../assets/js/glitch.js) and replace images URL for yours.
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-50 - Make background darker or lighter (0, 10, 20, ... 100)
You can find all images used for the background within the images folder assets/img/. Replace those images with yours and if necessary change their names bg1.jpg respectively in the index-****.html file.
You can make additional background design:
overlay - Background overlay
has-vignette - Vignette
opacity-80 - Make background darker or lighter (0, 10, 20, ... 100)
You can make additional gradient background:
opacity-20 - Make gradient background darker or lighter (0, 10, 20, ... 100)
Please replace the text with your in index-****.html file.
You can find all images used for the Portfolio within the images folder assets/img/. Please replace the image gallery-1.jpg with your in index-****.html file.
For video, please replace the image youtube.jpg and link for youtube/vimeo video.
Please replace the text with your in index-****.html file.
You can find all images used for the Team within the images folder assets/img/. Please replace the image team-1.jpg with your.
For Skils, please change name, percent and width-80 for your. width- may be (0, 10, 20, ... 100)
Please replace the text, phone, adress and email with your in index-****.html file.
Make sure that you change the default email address to your own in mailform.php or mailform_captcha.php (for ReCaptcha version) and subscribe.php or subscribe_captcha.php files in bat folder, to receive emails when the mail form is submitted.
1. First, we need an API key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you’ll need to be logged into a Google account. You’ll be asked to register your website, so give it a suitable name, then list domains (for example artsoundgroup.com) where this particular reCAPTCHA will be used.
2. With that done you’ll be given a site key and its partner secret key.
3. Paste this code fragment where you want to place the reCAPTCHA widget. Remove xxxx and insert your Site key.
<div class="g-recaptcha" data-sitekey="xxxx">
4. Secret key you will add in mailform_captcha.php and subscribe_captcha.php files. Remove xxxx and insert your Secret key.
ATTENTION! Google supports only one ReCaptcha on the page. If you need to install 2 ReCaptcha, please read this manual.
1. For delete google ReCaptcha, please change bat/mailform_captcha.php for bat/mailform.php or bat/subscribe_captcha.php for bat/subscribe.php in html file.
2. Delete ReCaptcha code.
3. For fix the button position, change (only for mail form):
div class="col-md-6 col-sm-6 text-right"
for
div class="col-md-12 col-sm-12 text-center"
| Name | Description | Location |
|---|---|---|
| Fontawesome | The iconic font and CSS toolkit | assets/fonts/ |
| Google fonts | Montserrat | --- |
| Name | Description | Location |
|---|---|---|
| Bootstrap | Defines main Bootstrap classes | assets/bootstrap/bootstrap.css |
| Trackpad Scroll Emulator | Styles for jQuery custom content scroller | assets/css/trackpad-scroll-emulator.css |
| Magnific Popup | Styles for Popup Windows | assets/css/magnific-popup.css |
| Vegas | Styles for jQuery Slideshow Backgrounds | assets/css/vegas.min.css |
| Mailform | Styles for Mail Forms | assets/css/mailform.css |
| Template styles | Contains all of the specific stylings for the template. | assets/css/style.css |
| Name | Description | Location |
|---|---|---|
| jQuery | Core Javascript library | assets/js/jquery-2.2.4.min.js |
| Bootstrap |
Sleek, intuitive, and powerful front-end framework for faster and easier web development |
bootstrap/js/bootstrap.min.js |
| Template scripts | Contains all of the specific scripts for the template. | assets/js/custom.js |
| Plugins | Contains all plugins for the template. | assets/js/jquery.plugin.min.js |
| Snow | Script for Snow Animation | assets/js/snow.js |
| Rain | Script for Rain Animation | assets/js/rain.js |
| Particles | Script for Particles Animation | assets/js/star.js |
| Cooking | Animated heat distortion effect | assets/js/cooking.js |
| Water | Water Animated | assets/js/water.js |
| Ripples | Water Ripples Animated | assets/js/jquery.ripples-min.js |
| Glitch | Glitch Animated | assets/js/glitch.js |
| Gradient | Animated Radial Gradient | assets/js/gradient.js |
| Gradient Overlay | Animated Gradient Overlay | assets/js/gradient-overlay.js |
| Circle Particles | Animated Circle Particles Background | assets/js/circle-particles.js |
| Universe | Animated 360 Universe Background | assets/js/universe.js |
| Firefly | Animated Flashing Firefly | assets/js/firefly.js |
| Name | Description | Location |
|---|---|---|
| Subscribe | PHP Subscribe Form | bat/subscribe.php |
| Mail Form | PHP Mail Forms | bat/mailform.php |
| Name | Description | Location |
|---|---|---|
| Images | All images from StockSnap.io | --- |
| Video | Video from Videohive.net | --- |
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.