Camaro - Documentation
Version 1.0Cross Browser, High Quality and Responsive Multipurpose HTML Template.
Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.
Don’t forget to rate this template, it helps us improve our products.
We invite you to view our portfolio.
Thanks so much!
Getting Started
Requirements
For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.
- PHP 5.2+;
- PHP Mail support;
- Enabling JavaScript in the web browser.
Installation
Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.
In this archive will not images, that you can see in demo pages, every images were replaced by placehold.it service.
Preloader
Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.
css/style.css2141 : #status { background-image: url(../images/preloader.gif); }
If you don’t need the preloader, you can delete div with id preloader and comment/remove some lines in js/custom.js file.
<div id="preloader"> <div id="status"> </div> </div>
$win.load(function(){ // $('#status').fadeOut(defaults.speedAnimation); // $('#preloader').delay(defaults.speedAnimation) // .fadeOut(defaults.speedAnimation/2, function() { … // some js code goes there // });
Favicon
To change the favicon of your site, you need to load a new image in a site root or to point out a new address of the image.
7 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Color themes
There have already been created a few special classes for the body
tag, which stylize a color scheme.
- skin-red - a default red color scheme;
- skin-green - a default green color scheme;
- skin-yellow - a yellow color scheme;
- skin-aqua - an aqua color scheme;
- skin-blue - a blue color scheme;
- skin-orange - an orange color scheme;
- skin-sand - a sand color scheme;
- skin-brown - a brown color scheme;
- skin-gray - a grey color scheme.
<body class="skin-yellow"> … </body>
The class skin-red does not point out, it set by default. Also you have to include css/themes.css
file into the head
tag.
The chosen theme changes the background of buttons, the background of marked blocks, icons, the background of a marked point in the portfolio, the color of marked phrases, the color of links and some other elements. In the css/themes.css
file there are settings for each color scheme. You can change current schemes or create your own scheme by analogy.
Modular grid
The Template is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content in created modules.
Twitter Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. All features and opportuntes you can use in this project. If you need create new table or add accordeon or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.
Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, bars, chars, pricing table and so on.
Highlight
To highlight one of the columns with another color it’s necessary to add class some of classes:
- .highlight
- .asphalt
- .highlight.night
- .highlight.darker
- .bg-sand
- bg-violet
- bg-beach
- bg-warning
- bg-info
- bg-success
- bg-danger
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
To look at the Pricing page you can notice a color border. You can add it adjusting a border-top or border-top-color or border-bottom and border class to the column.
…
You can change the thickness, color and style of the separator.
css/style.css1915 : .border-top-color { border-top:4px solid #e7543d; } 1919 : .border-top { border-top: 1px dotted #EAEAEA; } 1927 : .border-bottom { border-bottom: 1px dotted #EAEAEA; }
You can add a padding as a separator between two vertical blocks. To do it you need to add an empty div
block with a separator class:
Some text bla-bla…
Some text bla-bla…
By default it has transparent background color and it adds only padding, but you can stylize it.
css/style.css549 : .separator { height: 1px; background-color: #2D2D2D; }
Paddings and Margins
If it’s necessary to add a padding on the top or bottom or both, it’s enough to add one of the classes that will set up padding:
- .padding-top-0
- .padding-top-big
- .padding-top
- .padding-top-medium
- .padding-medium
- .padding-bottom
- .padding-bottom-big
- .padding-bottom-huge
- .margin-top
- .margin-top-big
…
You can change the size of paddings in the css/style.css file or you can add a new class in which you set up user’s paddings.
css/style.css463 : .padding-top { padding-top:90px!important; } 471 : .padding-medium { padding-top: 90px !important; padding-bottom: 90px !important; }
Alignment
To adjust the content inside a structural element it’s necessary to add the classes text-left,text-center or text-right to the parent tag. To adjust vertically use the class vmiddle.
Class equal sets up the same height to all inserted blocks, thanks to which you can adjust the content inside blocks vertically. Example you may see in Pricing page.
Susana Jacobs
Header
A header
tag with the class header creates a header which is on top of the template. It has a 12-column structure like all the sections on the site. The structure of header is not ease, but has many variants and can be added or remove not used pieces of code.
Header can not contain header
and footer
tags. There are 4 types of header: right, left, centered and simple. In the demo you can choose appropriate for you.
Header contains contact info, logotype, slogan, mega dropdown mainmenu, search field, sidebar menu, basket and login button. All of this interactive and may modified. All of this blocks separate by 2 rows: htop
and hbottom
.
Header Color Theme
Header may be 2 color variations:
- Dark;
- Light.
By default you will have light theme, but if you want to change it, add class dark
to hbottom
div block:
………
Header Layout
Header may be:
- Right version;
- Left version;
- Center version;
- Simple.
In the demo pages you can see all of this examples and choose right for you, removing unused blocks.
By default you will have right version, if you want to change on left just change right-pos
to left-pos
class for hbottom
div block:
…
To change on simple version add header-simple
class for header
tag:
…
To change on center version add centered
class for header
tag:
…
Mainmenu
The menu has many links with dropdown lists and a few types, likes table menu or shop menu or sidebar menu.There are many links and columns you can use there. To open the page in a new tab, use target="_blank"
.
Contact Info
You may write actual phone number and your email address.
+5 489 956 128 info@camaro.com
Product Cart
In the top of header is product cart with dropdown list of items. You may add new products, customize styles.
4 items - $164,50
Koppel 417 Crhonograph1 x $67,50
Footer
The footer of the site is created with the help of a footer
tag with the class footer. It also contains a 12-column structure and can contain various blocks. The footer of the site can’t contain header
and footer
tags in itself.
Footer Color Theme
Footer may be 2 color variations:
- Dark;
- Light.
By default you will have dark theme, but if you want to change it, add class flight
to footer
tag:
Footer Layout
Footer may be:
- Extended version;
- Standart 1 - without the second row;
- Standart 2 - without the first row;
- Simple - light version, with only last row.
In the demo pages you can see all of this examples and choose right for you, removing unused blocks.
Sections
On every page has a 'banner' block with text (icon) or button, maybe video background. All of this features you can see on sections pages.
Section sizes
By default, sections may have 5 height sizes with appropriate classes:
- .full-size = windows height;
- .huge-size = 660px;
- .large-size = 480px;
- .medium-size = 310px;
- .small-size = 200px;
This first content section should has home
class. Look at an example:
About Company
Background Parallax
To add background image in home section with parallax effect you have to add one div
with obligatory class bg
and additional class with css property background-image
. At last, add data-stellar-background-ratio
attrubite, with value from 0 to 1. An example:
css/style.css...
1805 : .bg-about { background-image:url(../images/bg/bg-about.jpg); }
Patterns
As you have watched, parent home
block has additional class pattern
. Thanks to him, you can change the a half-transparent background. To set up a pattern it’s necessary to add the pattern class to the block.
By default there have been created a few classes with different alpha-transparent patterns. These classes are overlay, overlay.grey-bg and overlay.color-bg. You can change the color and transparency in the css/style.css
file or add a new class setting up user’s settings.
403 : .overlay:before { opacity: .3; background-color: #191919; } 415 : .overlay.grey-bg:after { opacity: .9; background-color: #323232; } 420 : .overlay.color-bg:after { opacity: 1; background-color: #282828; }
Video
To set up a video as a background of the section, you need to add one more ytvideo class to the block and also you need to add an obligatory data-property
attribute to it. In this attribute you need to point out the Youtube video address and also the second it starts playing. If the video doesn’t play, it’s recommended to add class with static image. In this case there will appear a static image instead of the video.
For a separate image an additional unique class is required. It points out the path to the file. By default there have been created several standard classes. In the css/style.css
file you can create your own classes or change the current ones
1753 : .bg-faq { background-image:url(../images/bg/bg-faq.jpg); } 1757 : .bg-pricing { background-image:url(../images/bg/bg-pricing.jpg); } 1761 : .bg-testimonials { background-image:url(../images/bg/bg-testimonials.jpg); } 1765 : .bg-sitemap { background-image:url(../images/bg/bg-sitemap.jpg); } 1769 : .bg-contact { background-image:url(../images/bg/bg-contact.jpg); }
While testing take into account that the video won’t play on the local disk on your computer and your mobile devices. We don’t recommend to add a great number of sections with video-backgrounds as all video files and the template start loading at the same time.
To enable video sound you have to toggle one parameter js/custom.js file:
1343: $this.mb_YTPlayer({ mute: false, });
Section Slider
Also instead of static image or background video or only one slide you have a great opportunity to add full width slider in home section. It's really easy and uses standart markup, lets look an example:
Add li
tags with inner markup, every li
means one slide. Parent block should have class .oneslider. Additional block with class .slidebar need to add pagination arrows and pagination dots. More about sliders you can see in appropriate section of documentation.
Shortcodes
Over a dozen reusable components built to provide dropdowns, boxes, dividers, forms, headings, lists, tabs and much more.
Accordions
Like bootstrap collapse plugin you can create accordion. An example has shown on faq
pages. Other examples look at this page http://getbootstrap.com/javascript/#collapse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit?
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero aceverus dona venenatis faucibus. Mellentesque habitant morbi tristique et malesuada famesac turpis egestas.
Blockquotes
It uses for quoting blocks of content from another source within your document. Wrap blockquote
around any HTML as the quote.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Boxes
Inline boxes for text and some simple info. There are few background class, which were described an appropriate section you can use. An example code:
Buttons
Twitter Bootstrap has many classes for customize links and buttons, all of this class you may use in your projects, but they are have new style.
Columns
In the shortcode_columns.html
you can see various of columns and alignments. All this stuff do it with help of bootstrap class, like col-md-6
or col-sm-3
and so on.
Dividers
To customize header of any section or add button into it or some other decoration line, you have to use this structure:
Medium
For more details look at shortcode_dividers.html
page.
Dropcaps
Sometimes you need to highlight first letter of the text. You can use class first-letter
:
A liquam commodo gravida magna eget tincidunt. Fusce nisi augue, malesuada in commodo quis, euismod quis orci. Integer vitae nisl non augue ullamcorper blandit.
Marked Text
For highlighting a run of text due to its relevance in another context, use the mark
tag with different classes:
- .label-default
- .label-warning
- .label-info
- .label-success
- .label-inverse
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.
Tabs
Under this project you have a few variants of tabs. In shortcode_tabs.html
page all of this variants have shown. Also in bootstrap page you can see more other examples.
Lists
It's not a secret that you can use usual marked and unmarked lists using ol
and ul
tags appropriately. But, if you want to add icons before every item of unmarked list, you have to add class icon-list
and add markup for every icon. As you know icons may be 3 varians, see icons section.
- Copy
- Comments
Elements
There are many differents elements you may use in your projects, lets view all of them.
Breadcrumbs
At start in every content page goes breadcrumbs with previous and actual links. Markup of this:
Classes .breadcrumbs for container block and .breadcrumb for numerical list is obligatory. Another classes and markup may changing.
Call To Action
Tiny and simple code block, with one sentence and purchase button you can use for any purposes. Almost in every page you can see mark up this block.
Icons
In this project you can use 3 types of icons:
- default images, which are located in the sprite
images/icons.png
. This icons can not change sizes or colors. You should add obligatory class .custom-icon and second additional class with needed icon. Many examples you can see inelements_icon_combinations.html
file. - Official Camaro Icons. All icons you can see in
elements_camaro_icons.html
file. To use it: - Font Awesome Icons. This template has included Font Awesome icons. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. A very large variety of icons, which you can use on your site. Look icons and choose what you need. After that, write tag
i
with needed class. You can paste icons in any needed place on your website. Icons inherit all styles from parent block and from block, which are nested.
The second and the third type of icons can change size, color. By default there are 4 classes to change size of it:
- .icon-big or .fa-big
- .icon-norm or .fa-norm
- .icon-small or .fa-small
- .icon-extra-small or .fa-extra-small
Counter
Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser area. There can be several counters. To add a counter to the site, use the following structure:
<div class="num"> <ins data-num="850.57" data-increment="10.55" data-fractional="2">0</ins><sup>$</sup> </div>
Create the div
block with the class num and set an ins
tag in it, after add obligatory attributes to it:
- data-num - the final meaning to the size of which the counter will increase;
- data-increment - how necessary it is to increase a counter during every iteration;
- data-fractional - the number of important figures after a comma. If the number is integral, this attribute can be omitted or you can point out 0.
3450 : .num { font-size: 55px; line-height: 1; color: #acacac; font-weight: 100; }
Also you have an opportunity to create numeric lines, which shows you process of increasing meaning with filling lines. Some examples you can see in elements_horizontal_bars.html
page. General structure of this type:
Java Script
0%
Charts
Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. May be 2 variants:
- Pie Chart Icons;
- Pie Chart Text.
Java Script
Java Script
The first block has icon instead of text, the second - percentage text. It does not matter how many charts you use into one page, all are them will work. data-percent
attribute sets percents.
Vertical Bars
jqBarGraph is easy-to-use jQuery plugin for displaying your data as bar graphs. This project has 4 different charts. All of them you may see in elements_vertical_bars.html
file.
Web Design
Audio
To use audio player, you have to point src
attribute:
Timeline
If you need to show historical events by chronology you have to add history
class to parent block and creates events by adding new blocks with classes row
and vline
. Inside it write any code, which you need. For more details look at the elements_timeline.html
or history.html
pages. Have a look an example:
1976December, 28
News Begins Publication
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero ace venenatis faucibus.
Plans for a Cable Network
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero ace venenatis faucibus.
1982April, 3
For the first event you should add class firstrow
and for the last event you do not need to use vline
class.
Sliders
Sliders allow you to save space, animate and decorate your site. In the template there can be several sliders with different settings, which not depends on bootstrap settings.
The slider occupies the whole section by adding a special class slider or oneslider (for one-image gallery) to the parent block and some additional markup in it. In each of them there can be 12-column system with various elements. For every sliders we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.
One-image Gallery
A responsive one-image gallery has a markup:
- We add class oneslider into a div block;
- you can add/change 2 data-attribute parameters in this div:
data-fx
- the slider flip effect, crossfade or slide;data-auto
- autoscroll, true or false.
- create a familiar Section structure;
ul
– an unmarked list with slides;- Sliders
li
elements can contain align classes; - There is a content with a 12-column markup and a random set of elements in the slider;
- Also the div
.slidebar
can contain two links – switching slides back and slider pagination with the same class.pagination
.
Cursors and solid circles are not obligatory. If the true definition is set up in the data-auto
attribute, it means that slides will switch in a specified period of time without these elements. This period of time and the speed of switching can be changed.
6 : sliderInterval: 6000, 7 : sliderSpeed: 600,
Ribbon carousel
Restricting the number of visible items to a minimum and maximum amount. You should just add obligatory class ribbon
to use this type of slider. Markup and an an example you can see in elements_photo_gallery.html
file on the top.
Slider in general
To create some slider on the webpage, which will be responsive and will scrolling images, like ribbon, you should add obligatory class .slider
for parent div and into it add unmarked ul
list with li
items. Example you can see on many project page, for example elements_photo_gallery.html
file.
Blog
Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 18 pages for blog were html-coded and represented for using. A few variants for left or right sidebar for single page, also were considered 8 types of posts, standart blog and interactive animated list of articles, using excellent Masonry plugin.
- Single Post Photo;
- Single Post Text;
- Single Post Audio;
- Single Post Gallery;
- Single Post Link;
- Single Post Quote;
- Single Post Vimeo;
- Single Post YouTube.
Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.
Ecommerce
About 13 pages marked up specifically for the ecommerce catalog. For catalog were created 6 variants:
- Catalog Grid;
- Catalog Grid Sidebar Right;
- Catalog Grid Sidebar Left;
- Catalog List;
- Catalog List Sidebar Right;
- Catalog List Sidebar Left.
All of this pages contain maincontent with products and 4 pages has filtering sidebar with additional settings. Also project has product.html
page with more detail fully information about single product with rating, comments, description, tables and gallery. When you choose needed product you should order him. For this purposes were created additional 5 pages:
- Cart;
- Cart Empty;
- Checkout;
- Confirmation;
- and Compare page;
Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.
Modal
Modal Init
Modal windows allow you to show additional information atop the whole content of the page. their selection happens due to adding a random link with a data-popup
attribute in which you need point out an id
of a necessary modal window.
Login
In the template you can use 3 different types of modal windows:
- login;
- a profile modal window;
- a popup media gallery.
Of course, you may use bootstrap markup to create typical modal windows. Use documentation.
Popup Media Gallery
Here we use brilliant plugin Magnific Popup. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. You may put any HTML content in each gallery item and mix content types.
The easiest way to create popup media gallery, is add class magnific-wrap
for parent block and add class magnific
to every link, which you need to show. Attribute href
has url to big image. Have a look an example:
There are many examples in this project you may find inside some pages, like gallery or sliders or blog pages. Popup may contain not only static images, but also youtube or vimeo video, or gallery inside another gallery, have a look:
Video Link ... Gallery
As you can see for create single gallery for every independent link you have to use data-gallery
attribute, where you write array of images, separate by commas. Great and more informative example you can find in works_grid_#.html
page.
Google Maps
In HTML file you should write only single line, with unique id
attribute.
To set Google map you need to edit the js/custom.js
file. To get the longitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the js/custom.js
file.
1353 : var cmyLatlng = new google.maps.LatLng(51.5134476, -0.1159143); 1355 : zoom : 13
But, if you want to add more markers on the map, you should write another and a little bit more code. In file js/custom.js file, find function contactMap and change all code:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myLatlng2 = new google.maps.LatLng(-22.33882,126.044922); var mapOptions = { zoom: 5, center: myLatlng }; var map = new google.maps.Map(document.getElementById('contact-map'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); var marker2 = new google.maps.Marker({ position: myLatlng2, map: map, title: 'Hello World!' }); // add more markers …
Portfolio
You can organize your work according to the preset filters. At first, you create works navigation with category:
Items of this list have obligatory class filter and data-filter
attribute. Data-filter
helps you divide works on needed category. After navigation create container with class mix-list.
... ...
Each of mix block should has filtering class: branding, drawing and etc. Some words about your work. When you click one of the description, full gallery or new page or modal window will open.
Countdown
You can add countdown block on your page. Example you can see on coming_soon.html
page.
<div id="countdown"></div>
Countdown settings
You can set the date in the js/custom.js
for the countdown.
8: countdownTo: '2015/03/28', // Change this in the format: 'YYYY/MM/DD'
Visualization settings
To customize words days, hours, minutes and seconds, you have to edit css/style.css
.
4334 : #countdown span { font-size: 135px; color:#fff; } 4357 : #countdown ins { font-size: 14px; color:#666; }
Error Pages
For special pages, like 404 or 505 or under construction use a few another markup. At first, you should add class page404
for HTML tag. This pages do not contain header and footer like in another pages. For more details information look at 404.html, 505.html and under_construction.html. By analogy of this pages you may create suitable and needed for your purposes pages.
Forms
Feedback
The feedback can contain the following blocks:
<input type="text">
- a one line standard text area;<input type="email">
- a text area for an e-mail address;<textarea>
- a more than one line area for a message;<input type="submit">
- a sending form button;<h4 class="succs-msg">
- delivery report.
Let’s have a look at the example of creating the countdown on the site.
Contact Form
All the areas must be in the form
tag. The tag must have obligatory attributes:
- action - it shows the path to the php-file which deals with processing the form, it remains the same by default;
- method - post remains the same by default;
- id - a unique identifier, send-form remains the same.
Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.
The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.
If form areas are filled in the right way, after pressing the button there will appear a message with the class succs-msg. This block can be in any place of the page. You can set up an external view in the css/style.css
file and it takes styles according to what element the succs-msg class is added to, in our case – to the h4
heading. If areas are filled in the incorrect way or aren’t filled at all, the class invalid is added to the area that hasn’t been validated. The invalid area style can be changed.
3632 : input:invalid, input.invalid, textarea:invalid, textarea.invalid{ color:#e7543d; box-shadow: none; } 3670 : .succs-msg { margin-left: 3.5rem; line-height:46px; }
In the php/email.php
file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.
define('EMAIL_ADMIN_SENT_TO', 'admin@gmail.com');
- an e-mail address to which a letter will be sent for the administrator template;define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Camaro');
- the topic of a letter for the administrator template;define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Camaro');
- the topic of a letter for the sender;- line 32
$letterToAdmin = …
- the template of a letter for the administrator; - line 44
$letterToClient = …
- the template of a letter for the sender; - an e-mail on behalf of whom a letter is sent to the sender: line 13:
$headers .= "From: feedback@Camaro.local\r\n";
. \r\n obligatory to save at the end of the line.
MailChimp Subscription Form
Newsletter settings
You need to change the Mailchimp's List URL in your html file for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.
To change the validation messages, you will have to edit js/custom.js
.
9 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.', // text after successful subscribing 10 : errorText: 'Please, enter a valid email' // text, if email is invalid
Visualization form settings
To change the background color and color of subscription form, you will have to edit css/style.css
.
7877: .footer input[type=text], .footer input[type=email] { background-color: #333333; color:#cccccc; }
Input Mask
For every input field you may opportunity to create mask. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
Default masking definitions
- 9 : numeric
- a : alphabetical
- * : alphanumeric
Inside this project you may find phone-codes.json file which suited in js/phone-codes.json
. Into it there are many phones mask for every country, find needed and use it.
Show/Hide Password
Sometimes you want to see yours password when typing. You can add this opprotunity into your form with input[type=password]
:
Only you have to add login-password
class. That's all! By default for show/hide password uses FontAwesome icons, you may change it in js/custom.js
file:
700: $(this).hideShowPassword(false, true, { toggle: { element: '<a href="">', className: 'fa form-control-feedback toggle-password' }, states: { shown: { toggle: { className: 'fa-eye-slash', content: '' } }, hidden: { toggle: { className: 'fa-eye', content: '' } } } });
Scrolltop Button
To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. Its code is:
To change its external view you need to edit the css/style.css
file. You can also change the external view of a cursor by replacing a standard image or creating a path to the new one.
2156 : .scrolltop { border-radius: .5rem; width: 60px; height: 60px; left: 65px; bottom: 65px; } 932 : .scrolltop:before { background-color: #808080; opacity: .1; border-radius: 3px; }
Font Settings
To change the font-family you will have to edit the file css/style.css
. If the font is a standard one, built the system by default, you can just write it here.
6 : html { font-family: 'Arial', sans-serif; } // or whatever you want (e.g. "Helvetica")
Also you can use Google Font and connect it to your website.
- Go to http://www.google.com/fonts.
- Choose the appropriate font.
- Click the Quick-use button (
).
- Choose the styles that you want;
- Choose the character sets that you want.
- Below that click on the @import tab and copy this line.
- Paste this line to that
css/typography.css
file on 3d line instead of the default (e.g.):3 : @import url(http://fonts.googleapis.com/css?family=Open+Sans);
- At last, copy font-family name from Google Fonts website and paste on
css/style.css
:html { font-family: 'Open Sans', sans-serif; }