Royal Cars

Html Template

• Created: 2018-06-03
• latest Update: 2018-06-03
• By: jThemes Studio
• Email: jakjim@gmail.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us.

Files Structure

            - assets/css     (Template CSS) 
            - assets/images     (All Images)
            - assets/js      (Template JS) 
            - assets/fonts      (Template Fonts)  
        

HTML Structure

The template is based on Bootstrap 4Framework - http://getbootstrap.com/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport.
Below 480px viewports, the columns become fluid and stack vertically.

Create a .row and add the appropriate number of .col-sm-* columns.

HTML Markup

        <div class="row">
            <div class="col-xl-12">
                Level 1 column
                <div class="row">
                    <div class="col-sm-6">Level 2</div>
                    <div class="col-sm-6">Level 2</div>
                </div>
            </div>
        </div>
        

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

        - assets
            - css
                - main.css        - (Main CSS file) 
                - ...
        

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

All the JavaScript libraries and files are included at the bottom of every HTML page like this:

The initializations and parameters (sliders, effects, etc.) are contained in assets/js/custom.js

Fonts

To change the embedded font, please take a look in the head part of html page:

  
            < link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" >


        

To change the font, first go to http://www.google.com/webfonts choose a font and add the generated code to the top of html page.

Then edit font-family in

            body {
              font-size: 1rem;
              font-weight: normal;
              line-height: 1.5;
              color: #292b2c;
              background-color: #fff;
            }
        

and

            h1, h2, h3, h4, h5, h6 {
                font-weight: normal;
                color: #141f23;
            }
        

and

            .btn-primary {
              padding: 15px 30px;
              display: inline-block;
              background: #ffcd00;
              color: #ffffff;
              border: none;
              cursor: pointer;
              -webkit-transition: all 0.2s linear;
              -moz-transition: all 0.2s linear;
              -ms-transition: all 0.2s linear;
              transition: all 0.2s linear; 
            }
        

Icons

Font Awesome is a @font-face iconset that you can change size and color of the icons usingCSS.

If you need more information, please visit this site: http://fortawesome.github.com/Font-Awesome/

HTML Markup:

        <i class="fa-edit"></i>
        <i class="fa-search"></i>
        ...
        

Logo

Open index.html and find this part of code

HTML Markup:

and past path to your logo image:

Sliders

Owl Carousel

Owl Carousel is the slider you'll find in the content.

It's an easy to use lightweight carousel with some decent features.

You can find more documentation here http://www.owlcarousel.owlgraphic.com/

Google Map

Open assets/js/theme.js and find function initGoogleMap and set your coordinates for map and marker.

in line: center: new google.maps.LatLng(40.9807648, 28.9866516) past your coordinates for map example: center: new google.maps.LatLng(your coordinates goes here)

in line: position: new google.maps.LatLng(41.0096559,28.9755535), past your coordinates for marker example: position: new google.maps.LatLng(your coordinates goes here)

https://support.google.com/maps/answer/18539?hl=en

If you wont change icon for marker replace 'icon-google-map.png' by your icon in 'assets/img/' folder

            // Google map
            initGoogleMap: function() {
                var map;
                var marker;
                var image = 'assets/img/icon-google-map.png'; // marker icon
                function initialize() {
                    var mapOptions = {
                        scrollwheel: false,
                        zoom: 12,
                        center: new google.maps.LatLng(40.9807648, 28.9866516) // map coordinates
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'),
                        mapOptions);
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(41.0096559,28.9755535), // marker coordinates
                        map: map,
                        icon: image,
                        title: 'Hello World!'
                    });
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            }
        

Social Media - Icons

We are using FontAwesome for social media icons in this template. Insert icons like this:

Here's the complete list of available icons from FontAwesome docs:

Source & Credits

Fonts:
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:
jQuery - http://www.jquery.com/
Bootstrap Framework - http://getbootstrap.com/
Bootstrap-select - http://silviomoreto.github.io/bootstrap-select/
Font Awesome - http://fontawesome.io/
Owl Carousel 2 - http://www.owlcarousel.owlgraphic.com/

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Images:
http://#/

jThemes Studio