Thanks for your purchasing arshia HTML Template.Although this template is very easy to customize, We provide you a simple but useful documentation for your problems with customization.
In this template we put comment for all sections in HTML files, All sections styles in CSS files and all sections JQuery in arshia JS file.
How to have DARK THEME as default?
We provide Dark theme with only a class in body tag. For having dark theme as default you need just add 'Dark-theme' class to "body" tag.
How to have NEO skin as default?
This template have 2 different Skins (FLAT & NEO). There is a class named 'flat-demo' in "body" tag. If you delete it your theme default will be Neomorphism.
How to change BACKGROUND IMAGES?
We have putted background images in "main.css" file. if you search 'url' word on "main.css" file you will find all background images that we used on this template. They have defined with "https://placehold.co/1920x1280". You need replace your image with "../img/yourImageName" address instead of "https://placehold.co/1920x1280".
How to change COLOR?
We have pre built 9 different colors that you see in "color" folder. We called them like below codes in "head" tag :
If you want one of 9 pre built colors just call it instead of "blue-color.css" in top codes on your HTML file. If You want to have your individual color, just copy one of pre build color.css files and replace your color name, hex or rgb instead of colors on that file and rename it with your color name.
In HTML files we used bootstrap container and container-fluid classes. when we need use all screen width we use container-fluid class and if we need have a box little than our screen width we use container class in our sections.
We have two example below. Red boxes are container and container-fluid classes.
We have different Demos, U can choose one of them base on your requirement.
for better understanding you can see 'Hero Section'code below.
UI/UX Designer & Web Developer
Birthday : 1 April 1990
Website : www.arshia.com
Phone : +123 456 7890
City : New York, USA
Age : 30
Degree: Master
Mail : sample@arshia.com
Freelance : Available
For another sections that have Repetitious grid method you can use top example. In Services, Portfolio, Testimonials and Blog section you can see these Repetitious method and can add or remove them.
Portfolio
In arshia HTML template files we have different sections.
In portfolio section, Images are in different categories.
To know how to do this, watch codes below and the description after that.
In "a" tags we have "data-filter" property, The value of this filters use for items that we want to be in a category. for example ".webdesign" use for portfolio Items that are in web design category. You can use multiple values in one item. "*" value select all items.
Fonts
Here We have two types of fonts. First is Google Fonts and The other is Font Icons
We pick our fonts from Google Fonts . In this website you can learn how to pick your favorite font and use that in your website template.
Our Font Icons are from LineIcons and
Font Awesome. In this website you can learn how to pick your favorite font icon and use that in your website template. But if you want customize your social icons or another Icons you can see the codes below
In "Social Icons" you can see "i" tags. In their class you see "fa fa-facebook " and others. In Font Awesome wbesite you can pick your icon name and put it to class of "i" tag. We copy them below to show better.
Images
Images makes templates more beautiful and useful. In arshia HTML templates we have Slider, Background, Banner, Portfolio, Blog and ... Images.
Images comes with "img" tag in HTML files. You can put your image URL in this tag and see that on your website.
You can see some sample "img tags" in "Portfolio Section" below
.
.
.
.
.
.
.
.
.
.
.
.
"alt" In "img" tag is the name of image for search engines and browsers. When a browser can't show image, user see the name in "alt" and know what image was in this section.
We put "/" in "alt" in "img" tags because of this is only a demo template. But you must put your images name because of SEO and your users.
Images URL in portfolio section items are in two tags, first is "img" tags and other is "a" tags. We described "img" tags in top, But what is "a" tags here and what is their usage?
In fact these tags are for Magnific Popup JQuery. When In Portfolio section click on "Plus Icon" in images hover you can see images bigger and better. This is from URL of images in "a" tag in Magnific Popup JQuery.
You can see "a" tags code and these action in an image below.
.
.
.
.
.
.
.
.
.
.
.
.
CSS Structure
HTML is the structure of a template and CSS is the design. In CSS we paint and make codes beautiful.
In arshia HTML template CSS files, we use some libraries and make them powerful and more beautiful in Style CSS file.
"Table of contents" In Style CSS file help you to find each section styles and you can change or customize them there.
Main CSS
"General Styles" are important styles that we want use them in all template design in "Style CSS" file. But there are some styles that we don't want use general styles them. Because of this reason we use "General Styles" in top of all styles in "Style CSS" file. browsers read styles line by line and if you have to class with same styles but variation data browsers read second class.
you can see an image of "General Styles" below
Top image is from "style.css" file
Fonts in css
Fonts are very important for making template and text more and more beautiful. Then we should use them in CSS files. After picking one or more fonts from Google Fonts, that website show you how to use them in your template or website. We bring an example for you from "General Styles" of "style.css"
After all font families put a Backup font because sometimes some browsers can't support your font and try to read backup font at last if browser cant't read none of fonts will read "sans-serif" font.
Images in css
Images in CSS are different from HTML. We often use CSS for background images and define their width, height, position and ... .
We bring background images styles from "style.css" for you below.
When we want bring an image for background in "Style CSS" we use "background-image: url(sample/img/image.jpg)". But when we want to use another properties after images URL we must change "background-image" to "background".
Media Screens
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. But sometimes text, images or ... don't work good in some screens. Because of this web designers and developers use "Media Screens" in CSS files to solve this problem. In arshia template CSS we use some media screens to make our theme fully responsive for all screens.
You can see an example from "style.css" of arshia template below.
After finishing template structure (HTML) and give that a beautiful design (CSS) we should give our template Mobility. We do this Important factor with "Java Script" and that awesome library "JQuery".
arshia HTML template use beautiful and useful Java scripts like Particle, Owl Carousel (for sliders), Isotop JS and ... for users and customers.
using and customize this template scripts are very easy and we describe important thing and options.
arshia JS File
"arshia.js" is arshia HTML Template main JavaScript file that all libraries are customize and ready for run there.
Magnific Popup Js :
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Owl Carousel is a neat little carousel with all the perks you could possibly need.
Isotope js is a JavaScript library that makes it easy to sort, filter, and add Masonry layouts to items on a webpage. ... In short, isotope adds interactivity to your layouts without requiring assistance from a server.
CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way. Despite its name, CountUp can count in either direction, depending on the start and end values that you pass.
Download the latest version from github and include it to your page using script tag
/*-------------------------
Count up
-------------------------*/
function countup() {
"use strict";
$('.timer').countTo();
$('.count-number').removeClass('timer');
}
Dark Js :
arshia Demo has this option that you can switch light mode to dark mode with one click.
If you want to add this property in your demo , add the code below .
For customize each library JS file options in "arshia.js" you can go to their website in documentation tab or page find and customize your js files.
PHP
Although in Html templates you can't see any php files, But some templates use php files in contact form as a feature or option for their customers. arshia use an awesome ajax form for customers in contact form and here you can learn how use it.
Contact Form
Contact forms are the easiest way to let your website visitors get in touch with you.
In arshia HTML template we have contact form you can see code below
Contact form setup
To set up a contact form you will need a working e-mail address. After build an email or choose one go to "sendEmail.php" file and on 8th line replace it with "sample@arshia.com" email address.
2 $data = [];
3 if ($_POST) {
4 $name = "";
5 $email = "";
6 $subject = "";
7 $comments = "";
8 $recipient="sample@arshia.com"; // Your email comes here
If you want change Success, Warning or Error notifications go to "sendEmail.php" file and do it in lines 31 to 46.
We make all contact fields required with notification. For change text of those notifications go to "arshia.js" file and do it in 'Ajax Contact Form' section. You can see them below.
if(!name){
$('#message').toast('show').addClass('bg-danger').removeClass('bg-success');
$('.toast-body').html('Name is required');
} else if(!email){
$('#message').toast('show').addClass('bg-danger').removeClass('bg-success');
$('.toast-body').html('Email is required');
} else if(!validateEmail(email)){
$('#message').toast('show').addClass('bg-danger').removeClass('bg-success');
$('.toast-body').html('Email is not valid');
} else if(!subject){
$('#message').toast('show').addClass('bg-danger').removeClass('bg-success');
$('.toast-body').html('Subject is required');
}else if(!comments){
$('#message').toast('show').addClass('bg-danger').removeClass('bg-success');
$('.toast-body').html('Comments is required');
}
Ultimately if you want change status of required fields go to js file and remove 'else if' of that field. you can see them top.
If You have any question Contact Us with sending mail and we will answer Instantly.
.
.
.
.
.
.
.
.
