HTML Structure - top
Beauty Spa Salon Wellness is built with the Bootstrap 4 framework - that means you have access to all the great features, css & js goodies has to offer. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
To learn more about Bootstrap's grid system, please refer to https://v4-alpha.getbootstrap.com/layout/grid/
CSS Structure - top
I'm using one main CSS file (css/styles.css), in this template which you are free to modify depending on the customization you require. There are also other additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder.
- https://fonts.google.com/ - Web font Cabin from Google Fonts
- bootstrap.min.css - This is a main stylesheet that required for basic template styling like form, input, div, list element and etc.
- font-awesome.min.css - Web font containing all the icons from the Bootstrap framework and more.
- bootstrap-datepicker.min.css - Datepicker for Bootstrap
- styles.css - The main stylesheet you are encouraged to modify.
The Styles CSS file contains all of the specific stylings for the page. The file is separated into sections using:
...
/* Defaults
--------------------------------------------*/
/* index.html
--------------------------------------------*/
/* index-v2.html
--------------------------------------------*/
/* index-v3.html
--------------------------------------------*/
/* index-v4.html
--------------------------------------------*/
/* index-v5.html
--------------------------------------------*/
/* inner page start
--------------------------------------------*/
/* .... etc .... */
/* Media query for (css/responsive.css)
--------------------------------------------*/
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.
Color Styles (Variations) - top
This theme comes with Unlimited color variations. To change the color style from the theme edit the following lines:
...
:root {
/* color purple */
--color-purple: #6A1B9A;
/* color navy blue */
--color-navy-blue: #590D88;
/* color pink */
--color-pink: #EC5598;
/* color pink 2 */
--color-pink-2: #E6377A;
/* color white */
--color-white: #FFFFFF;
/* color semi black */
--color-semi-black: #222222;
/* color light blck */
--color-semi-ash: #777777;
/* color sky blue */
--color-sky-blue: #00BCD4;
/* color light red */
--light-red: #FF4641;
/* color orange */
--color-orange: #F79700;
/* cyan color */
--color-cyan: #4DB6AC;
/* color light chocolate */
--color-chocolate: #E3BDA8;
}
Just change the color code name for example form --color-purple: #6A1B9A; to #8b1b9a.
Available main styles: styles.css root directory
Color list for Index version 1
if you change primary color just follow my instructions. First you go css :root and change color code --color-purple: #6A1B9A to #3FB1C9
if you change secondary color just follow my instructions. First you go css :root and change color code --color-pink: #EC5598; to #2F3E4E
Color list for Index version 3 and Index version 5
if you change primary color just follow my instructions. First you go css :root and change color code --color-cyan: #4DB6AC; to #00B4EF
if you change secondary color just follow my instructions. First you go css :root and change color code --color-chocolate: #E3BDA8; to #2C3E50
Brand / Logo - top
To change the logo edit the following lines:
......
The value is the header logo image path from the (img/logo-v1-1.png)
The value is the footer logo image path from the (img/footer_logo.png)
Single team - top
To add or change a team edit the following lines:
...
Jenny william
Founder
You will find all available team images in the images folder. img/
Sync Slider - top
To add or change a sync slider image edit the following lines:
...
The value is the image path from the preview img/sync-slider-preview-1.jpg
The value is the image path from the thumb img/sync-slider-thumb-4.jpg
Parallax Background - top
To add or change parallax background image open file eaxmple (filename.html)change image data-image-src="img/, find and edit code below:
...
...
Ajaxchimp Support - top
To activate ajaxchimp support open js/main.js, find and edit code below:
...
$('.mc-form').ajaxChimp({
url: 'https://facebook.us8.list-manage.com/subscribe/post?u=85f515a08b87483d03fee7755&id=66389dc38b'
});
More Details: Obtain Mailchimp link from mailchimp.com
Contact and Checkout - top
The Contact and Checkout form is based on jQuery. You don't have to know PHP. To change sample email adress, open php/c_config.php, find and edit code below:
...
// put your email address here
define('YOUR_EMAIL_ADDRESS', 'email@address.com');
define('YOUR_COMPANY_NAME', 'Enter Your Company Name');
Portfolio 3D - top
To add or change a portfolio edit the following lines:
...
To add or change a portfolio 3d following instruction: beautypress-single-photo-gallery add class beautypress-3d and add class beautypress-3d-project-card for next div
Booking form - top
Booking form is based on jQuery and PHP. To add or change a filed open js/main.js php/index.php, find and edit code below:
......
booking form newsletter - top
The Newsletter form is based on jQuery and PHP. You don't have to know advanced PHP don't worry. To change sample email adress, open php/config.php, find and edit code below:
...
// put your email address here
define('sender_email', 'email@address.com');
define('YOUR_COMPANY_NAME', 'Enter Your Company Name');
image comparison - top
To add or change image comparison photo content edit the following lines:
...
you change or edit image just following instructions img src="img/before-after-1 and img src="img/before-after-2
video section - top
To add or change video content edit the following lines:
...
you add your custom video just following instructions: got to https://www.youtube.com/ copy video url and paste it
fun fact content - top
To add or change fun fact content edit the following lines:
...0
+
you add or change fun fact just following instructions: data-value="10" and set animation duration data-animation-duration="3200"
Partners - top
To add or change partners content edit the following lines:
...
Chnage partner image and add your own image just following instructions: img src="img/brands-1 you must be use 6 image so it will be looks perfect.
JavaScript - top
This theme imports the following Javascript files.
- js/jquery-3.2.1.min.js
- js/plugins.js
- js/bootstrap.min.js
- js/js/bootstrap-datepicker.min.js
- js/isotope.pkgd.min.js
- js/jquery.ajaxchimp.min.js
- js/owl.carousel.min.js
- js/jquery.magnific-popup.min.js
- js/appear.js
- js/spectragram.min.js
- https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCy7becgYuLwns3uumNm6WdBYkBpLfy44k
- main.js
PSD Files - top
The following Photoshop file are included with the download package place in /PSD/ folder:
beautypress.psd
Credits - top
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
XpeedStudio