Documentation

This documentation will guide you through the customization possibilities of BEAUTYSPOT HTML5 template.

If you are a HTML beginner, I recommend to install some advanced HTML editor before you dive into customizing this template. Notepad++ is great if you are Windows user and I've heard that Brackets editor is pretty good too if you are on Mac.

CSS Customization

• Changing the color skin

  BEAUTYSPOT offers several skins to choose from. In order to change the default one, you need to search for "default.css" inside HEAD tag. By default, whole line looks like this:

  <link rel="stylesheet" type="text/css" href="library/css/skin/default.css">

  You can find all skins in "library/css/skin" directory. Change the "default" in above code to name of the existing skin, for example: "sunrise", "orient" or "mavericks". For example, if you want to use the "mavericks" skin, you need to change the code to this:

  <link rel="stylesheet" type="text/css" href="library/css/skin/mavericks.css">

  Please note, that you will need to do this for all HTML files, but you can use something like "mass replace in files" function of your text editor ("Search / Find in Files..." if you are using Notepad++) to make it quick.

• Adding your own CSS definitions

  If you want to add your own CSS definitions or override existing ones, use the "library/css/custom.css" file for that. This file is already linked to all HTML templates, just save your changes and it is done.

• Custom color scheme with SASS

  If you are not familiar with the SASS language, check sass-lang.com first.

  The easiest way to create a custom color scheme (skin) is to make copy of the existing one in "library/skin" directory and change some SASS variables.

  You will find two file types for each theme, one with ".css" extension and other with the ".scss" extension. Make copy of the ".scss" one (for example "default.scss") and rename it to, let's say, "mytheme.scss".

  Open this new file in the editor. You will find all variables at the top of the document, most important ones are "$color-1", "$color-2" and "$color-3". You can change just those three colors to create a brand new skin, but of course, you can play with values of all other variables to fine-tune your scheme.

  After you have made your changes, save the file. Now you need to convert "mytheme.scss" to "mytheme.css" (note the different extension). First create an empty file named "mytheme.css" in "library/css/skin". Then use any online SASS to CSS converter (for example sassmeister.com). After the successful conversion, copy the converted CSS code to "mytheme.css" file. Now you just need to link this new skin to your templates following the instructions in "Changing the color skin" section.

Twitter, MailChimp & Disqus

• Twitter feed

  In order to make Twitter Feed work, you need to create your own Twitter App. Go to dev.twitter.com and log in with your Twitter account.

  When you are logged in, go to your applications and click on Create a new application.

  Give it some meaningful name, for example "yourUsername Twitter Feed" and fill all other required fields.

  After submiting the form, you will be redirected to next screen, where you need to click on Create my access token button (at the bottom).

  Now you should see the screen with all of your app's information (refresh the page as the access token may not be visible yet). Copy the Consumer key, Consumer secret, Access token and Access token secret to the corresponding places in "library/twitter/index.php" file.

  You can also follow this tutorial on how to create Twitter App.

  After you have inserted your credentials, search for element with "footer-twitter" class in "index.html" template and change its "data-id" attribute to your Twitter username. You will need to do this change for all HTML templates.

• MailChimp subscribe form

  You need to have a Mailchimp account in order to make subscribe form work.

  Log in to Mailchimp and go to desired subscribers List which you want to connect with this template. Click on Signup forms and build some basic signup form. If you want to use this template's subscribe form as it is, you will need just an email field (field tag EMAIL).

  When you done building the form, go back to Signup forms and click on Embedded forms. You should see the code of your form in Copy/paste onto your site section. Copy it into your text editor, but you need just form's action URL. Search for "<form action=" and copy the whole URL. It should look similar to this: http://volovar.us8.list-manage.com/subscribe/post?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d.

  You need to edit it a little bit though. Replace "post?" with "post-json?" and add "&c=?" at the end. You should get something similar to this: http://lsvr.us14.list-manage.com/subscribe/post-json?u=8291218baaf54ddfd7dbc6016&id=f3e5d696dc&c=?.

  You can also replace "&" with "&amp;" for HTML to be valid. So the final link should look like this: http://volovar.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&amp;id=49e892f53d&amp;c=?.

  Now, search the "index.html" template for element with "subscribe-form" id and change its "action" attribute to this URL. You will need to make this change for all HTML templates.

• Disqus comments

  You can find an example of the Disqus comments in blog-image-disqus.html template. Search for first occurence of "disqus_shortname" and change its value to your Disqus shortname, it should look like this:

  var disqus_shortname = 'my_shortname';

  Copy the whole block (starting with "<!-- DISQUS CODE : begin -->" and ending with "<!-- DISQUS CODE : end -->") to any place, where you want to display your Disqus comments.

Contact & Reservation Forms

• Contact form

  Please note, that you will need to host your site on the PHP hosting for contact form to work.

  To set up the contact form, you just need to open the "ajax/contact-form.php" file and change all its variables to suit your needs. Most important variable is the first one - "email_to". This specifies the email address where all contact form messages will be sent.

• Reservation form

  Everything which was said for contact form, applies also to reservation form. This form works on the same principle, but it uses "ajax/reservation-form.php" file for sending messages.

  You can change reservation form HTML template in "ajax/reservation-form.html".

Other

Icons

BEAUTYSPOT uses Font Awesome iconic font.

To add an icon, use <i class="fa fa-heart"></i> code and replace the "fa-heart" with any class from Font Awesome icon set. For example: <i class="fa fa-flag"></i>, <i class="fa fa-folder"></i>, etc.

Header Animation

Header background animation is enabled by default. To disable it, remove the class "m-animated" from <header id="header"> element. You will need to do this change for all HTML templates.