Drupal 7 - AutoX Theme Guide for Developers

Overview

Starting with a new theme, it's sometimes takes a lot of time for first time users to really understand how it works. You may want to know how to customize layouts, typography, block styles and make it look the way you want.

In most cases you won't need to know PHP or database queries, but basic knowledge would be very helpful to get great results.

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, find this guide in handy. This guide will give you the detailed step by step installation guide to help you start building the content for Autox to look exactly like the demo site.

1. Autox Package

Included content:

Autox theme: autox-7.x-1.0.zip
Demo Profile for Autox: autox-profile-7.x-1.0.zip

2. System Configuration

Database

MySQL 5.0.15 or higher with PDO
PostgreSQL 8.3 or higher with PDO
SQLite 3.3.7 or higher

PHP

PHP 5.2.5 or higher (5.3 recommended)
PHP5 GD library installed
Disabled error_reporting flag on production server
Enabled mod_rewrite in Apache for clean URLs
Memory limit set up at least 128MB

If you are new to Drupal, please take a reference to System requirements on drupal.org.

3. Screenshots

Let's glance through the theme's design & some features:

Homepage

About Us Page

Services page

Vehicles page

Vehicles Grid page

Vehicles List page

Product detail page

Dealers page

News page

News Grid page

News List page

FAQ page

Contact

Multi colors

4. Module requirements

Core Modules

Blog
PHP filter
Update manager

Third-party Modules

Required libraries by the modules

Autopager
Colorbox
Flexslider
Fontawesome
Infobubble
Jcarousel
Jquery Cycle
Jquery Jcarousel
Superfish

Download Drupal core files, and extend your site with modules at here.

Installation

Quick Installation Demo Profile

We created an installation profile with demo content for each of our theme, so that you can quickly download and reproduce the whole site content as presented on our live demo. This way you will get a quicker overview of the features. If it's convenient you may also use the given demo content as a starting point to build your custom sites.

1. Autox package included

Autox theme: autox-7.x-1.0.zip
Demo Profile for Autox: autox-profile-7.x-1.0.zip

The below steps will give you the installation guide so that you can build your website to look exactly like the AutoX Full Demo.

autox-profile-7.x-1.0.zip

2. Extract autox-profile-7.x-1.0.zip above and copy it into your host, and rename the directory

3. Access your MySQL database and create a new DB (e.g. autox) and user account. Don't forget to add correct permissions to new user to access the database

4. In the demo directory profiles/weebpal/ you can find database dump named sample_data.sql. Import this file into new BD

5. Now, you need to modify sites/default/default.settings.php file. Clone default.settings.php file, then rename it "settings.php"

6. Open settings.php, then locate the $database array and set proper credentials.

                     $databases['default']['default'] = array(
                      'driver' => 'mysql',
                      'database' => 'databasename',
                      'username' => 'username',
                      'password' => 'password',
                      'host' => 'localhost',
                      'prefix' => '',
                    );

When using this installation, you are installing everything from our preview server. So don't forget to set proper values to access to your database: db name, db admin username, db admin password, host, etc.

7. Open the browser and visit your website with the prepopulated content & layout exactly like our Autox Demo

Now, you can visit administrator site with the admin account admin/admin to delete the unnecessary contents and add the new ones.

Installation Autox Theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of Autox Theme, find this guide in handy.

1. Install Drupal

Go to Drupal download page and download the latest version of Drupal 7.
Extract and copy Drupal folder to your host and rename the directory.
Follow this tutorial to install Drupal with the standard profile.

2. Install Autox Theme

Extract Autox theme .ZIP file:
- autox-7.x-1.0.zip
Move this theme into your Drupal folder: sites/all/themes
Navigate to Appearance > Choose Enable and set default Autox theme

3. Install Required Modules

Now that you've enabled Autox theme, you will install and enable the required modules (listed in the Module Requirements section) to customize and use them.

If you don't know how to install the contributed modules, this tutorial is an essential guide.

Cheat to install modules & theme:

Extract autox-7.x-1.0.zip
Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
Paste them to your host, folder sites/all

Note: See this guide to get more details about installation

Taxonomy configuration

Quick Information

Taxonomy: Taxonomy can be simply understood as category management using organizational keywords known in other systems as categories, tags or metadata. It allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.
Vocabulary: for example product category, tag, provider name, ...
Term: the items in each vocabulary. For example: vocabulary product category has some terms: laptop, pc, mobile, tablet, camera, headphone, ...
For more information about taxonomy, please see: Organizing content with taxonomies

1. Navigate to Structure > Taxonomy to create vocabularies as the following:

Then, add terms for each vocabulary

2 . Terms of Brands:

3. Terms of: Categories

4. Terms of: Colors

5. Terms of: Features

6. Terms of: Gender

7. Terms of: interior design

8. Terms of: Models

9. Terms of: Positions

10. Terms of: Safety

11. Terms of: Transmission Types

12. Navigate to Structure > Taxonomy > Brands > Manage Fields click link and add following field:

13. Set properties for Images field

14 . Go to List tab. Click Edit link and set following properties for each term of Brands:

15. Navigate to Structure > Taxonomy > Categories > Manage Fields click link and add following field:

16. Set properties for Images field

17. Go to Manage Display tab and set following fields:

18. Go to List tab. Click Edit link and set following properties for each term of Categories:

Note: See this guide to get more details about taxonomy configuration

Media configuration

Image Style Configuration

Image styles are the presets of image settings. Image styles are used to define how the images are shown.

Navigate to Configuration, In MEDIA area, click Image styles, then create image styles as the following:

Content type configuration

Configuration People

1.Navigate to Configuration > People > Account settings > Manage Field link and add following field:

2. Set properties for Full Name field

3. Set properties for Gender field

4. Set properties for Position field

5. Go to Manage Display link and set following fields:

6. Click Save button

Modify Blog entry type

1. Navigate to Structure > Content Type > Blog entry . In Blog entry , go to Manage fields tab, add following fields:

2. Set properties for Images field

3. Click Save button

Modify Article type

1. Navigate to Structure > Content Type > Article . In Article , go to Manage display tab > Default tab, set following properties:

2. Modify Teaser tab, set following properties:

3. Click Save button

Create Dealers type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Dealers

2.Go to Manage Fields and add following fields:

3.Set properties for Image fields:

4.Set properties for Gallery fields:

5.Set properties for Address fields:

6. Click Save button

Create FAQ type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type FAQ

2.Go to Manage Fields and set following fields:

3. Click Save button

Create Product type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Product

2. Go to Manage Fields and add following fields:

3. Set properties for Image fields:

4. Set properties for Gallery fields:

5. Set properties for Brands fields:

6. Set properties for Models fields:

7. Set properties for Categories fields:

8. Set properties for Release date fields:

9. Set properties for price fields:

10. Set properties for Color fields:

11. Set properties for Slideshow fields:

12. Set properties for Transmission Types fields:

13. Set properties for Features fields:

14. Set properties for Interior design fields:

15. Set properties for Safety fields:

16. Go to Manage Display tab > Default, add and set following fields:

17. Go to Manage Display tab > Teaser, add and set following fields:

18. Click Save button

Create Services type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Services

2. Go to Manage Fields and add following fields:

3. Set properties for Image fields:

4. Set properties for Gallery fields:

5. Go to Manage Display tab > Default, add and set following fields:

6. Go to Manage Display tab > Teaser, add and set following fields:

7. Click Save button

Create Statistics type

1. Navigate to Structure > Content Tpe. Click Add Content Type link to create content type Statistics

2. Go to Manage Fields and add following fields:

3. Set properties for Counter fields:

4. Click Save button

Create Testimonials type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Testimonials

2. Click Save button

Create Homepage

Headline menu block

Front end Display

1. Create and add link Social Menu menu

1. Navigate to Structure > Menu, click Add menu link, Create Social Menu link with following properties:

2. Click Add link link and add link following: Facebook, Twitter, Gplus, Pinterest

3. Set properties Facebook link

4. Set properties Twitter link

5. Set properties Gplus link

6. Set properties Pinterest link

7. Click Save button

2. Configure Social Menu block

1. Navigate to Structure > Blocks, find Social Menu , click configure and set with following properties:

2. Click Save button

3. Add link User Menu menu

1. Navigate to Structure > Menu, find User Menu , click list link and add link menu

2. Set properties Login link following:

3. Set properties Register link following:

4. Click Save button

4. Configure User Menu block

1. Navigate to Structure > Blocks, find User Menu block, click configure link and set with following properties:

2. Click Save button

Main menu

Front end Display

1. Navigate to Structure > Blocks, find TB Mega Menu: Main menu block, click configure link and set the following properties:

2. Click Save button

Search form

Front end Display

1. Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:

2. Click Save button

Slideshow block

Front end Display

Create Slideshow view

1. Navigate to Structure > Views, click Add views link, Create Slideshow view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click Settings:

4. At FIELDS area, click Add button to add fields: Content: Slideshow, Global: Fieldset, Content: Body, Content: Link .

5. Set properties for Content: Slideshow

6. Set properties for Global: Fieldset

7. Set properties for Content: Body

8. Set properties for Content: Link

9. At FIELDS area, click Rearrange button and set following arrange

10. At FILTER CRITERIA area, click Add button to add fields: Content: Slideshow:fid and set following properties:

11. Click Save button

Configure View: Slideshow

1. Navigate to Structure > Blocks, find View: Slideshow block, click configure link and set the following properties:

2. Click Save button

Services block

Front end Display

Create Services view

1. Navigate to Structure > Views, click Add views link, Create Services view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click Settings:

4. At PAGER > Use pager area, click link

5. At FIELDS area, click Add button to add fields: Field: Image, Content: Body .

6. Set properties for Field: Image

7. Set properties for Content: Body

8. At FIELDS area, click Rearrange button and set following arrange

9. At Advanced > OTHER area, add CSS class

10. Click Save button

Configure View: Services

1. Navigate to Structure > Blocks, find View: Services block, click configure link and set the following properties:

2. Click Save button

Categories block

Front end Display

Create Categories view

1. Navigate to Structure > Views, click Add views link, Create Categories view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click Settings:

4. At HEADER area, click Add button field Global: Text area and set following properties:

5. At FIELDS area, click Add button to add fields: Field: Image .

6. Set properties for Field: Image

7. At FILTER CRITERIA area, click Add button add field Taxonomy term: Vocabulary and set following properties:

8. At Advanced > OTHER area, add CSS class

9. Click Save button

Configure View: Categories

1. Navigate to Structure > Blocks, find View: Categories block, click configure link and set the following properties:

2. Click Save button

Our Member block

Front end Display

Create Our Member view

1. Navigate to Structure > Views, click Add views link, Create Our Member view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FIELDS area, click Add button to add fields: User: Picture, User: Full Name, User: Position, Field: Description .

4. Set properties for User: Picture

5. Set properties for User: Full Name

6. Set properties for User: Position

7. Set properties for Field: Description

8. At FIELDS area, click Rearrange button and set following arrange

9. At FILTER CRITERIA area, click Add button add field User: Roles , User: Picture

10. Set properties for User: Roles

11. Set properties for User: Picture

12. At Advanced > OTHER area, add CSS class

13. Click Save button

Configure View: Our Member

1. Navigate to Structure > Blocks, find View: Our Member block, click configure link and set the following properties:

2. Click Save button

Statistics block

Front end Display

Create Statistics view

1. Navigate to Structure > Views, click Add views link, Create Statistics view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FIELDS area, click Add button to add fields: Content: Counter.

4. Set properties for Content: Counter

5. At FIELDS area, click Rearrange button and set following arrange

6. At FORMAT > Fomat area, click Setting:

7. At HEADER > User Pager area, click link:

8. At Advanced > OTHER area, add CSS class

9. Click Save button

Configure View: Statistics

1. Navigate to Structure > Blocks, find View: Statistics block, click configure link and set the following properties:

2. Click Save button

Testimonials block

Front end Display

Create Testimonials view

1. Navigate to Structure > Views, click Add views link, Create Testimonials view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At Advanced > RELATIONSHIP area, add Content: Author

4. At FIELDS area, click Add button to add fields: User: Picture, Global: Fieldset, Content: Body, User: Name .

5. Set properties for User: Picture

6. Set properties for Global: Fieldset

7. Set properties for Content: Body

8. Set properties for User: Name

9. At FIELDS area, click Rearrange button and set following arrange

10. At FILTER CRITERIA area, click Add button and add file User: Picture

11. At Advanced > OTHER area, add CSS class

12. Click Save button

Configure View: Testimonials

1. Navigate to Structure > Blocks, find View: Testimonials block, click configure link and set the following properties:

2. Click Save button

Brands block

Front end Display

Create Brands view

1. Navigate to Structure > Views, click Add views link, Create Brands view with following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click Settings:

4. At HEADER > User Pager area, click link:

5. At FIELDS area, click Add button to add fields: Field: Link, Field: Image .

6. Set properties for Field: Link

7. Set properties for Field: Image

8. At FIELDS area, click Rearrange button and set following arrange

9. At Advanced > OTHER area, add CSS class

10. Click Save button

Configure View: Brands

1. Navigate to Structure > Blocks, find View: Brands block, click configure link and set the following properties:

2. Click Save button

Address block

Front end Display

1. Navigate to Structure > Blocks, click Add Block link, Create Address block with following properties:

Refer to following HTML code:

                            <address>
                                <p>Street No. 123, main road, City name, country</p>
                                <p>Phone: 555 666 777</p>
                                <p>Email: [email protected]</p>
                            </address>

2. Click Save button

Categories Footer block

Front end Display

1. Create Categories Footer block view

1. Navigate to Structure > Views, find Categories view, then click Add > Block button, set properties for following fields:

2. At FORMAT > Fomat area, click Settings:

3. At FIELDS area, click Rearrange button and click Remove link of Taxonomy term: Name and set following properties

4. Click Save to save view

2. Configure Categories Footer block

1. Navigate to Structure > Blocks Find View: Categories click configure link, set following properties

2. Click Save block button.

Essential Links Menu

Front end Display

1. Create Essential Links Menu

1. Navigate to Structure > Menu, click Add menu, then create Essential Links Menu and add following field:

2. Click Save button

2. Configure Essential Links Menu

1. Navigate to Structure > Blocks, find Essential Links Menu block, click configure link and set the following properties:

2. Click Save button

Tags in Tags: Custom block

Configure Tags in Tags block

1. Navigate to Structure > Blocks, Find Tags in Tags link, click configure block with following properties:

2. Click Save block button.

Find us on and Subscribe block

Front end Display

1.Create and configure Find us on block

1. Navigate to Structure > Blocks, click Add block link, Create Find us on block with following properties:

2. Click Save block button.

Refer to following HTML code:

                            <div class="find-us">
                            <span>Find us on: </span>
                            <ul class="socials">
                                <li>
                                    <a class="fa fa-facebook" href="#" title="Facebook"></a>
                                </li>
                                <li>
                                    <a class="fa fa-twitter" href="#" title="Twitter"></a>
                                </li>
                                <li>
                                    <a class="fa fa-linkedin" href="#" title="linkedIn"></a>
                                </li>
                                <li>
                                    <a class="fa fa-google-plus" href="#" title="Google Plus"></a>
                                </li>
                            </ul>
                            </div>

2.Configure Newsletter: Subscribe : Custom block

1. Navigate to Structure > Blocks, find Newsletter: Subscribe block, click configure link with following properties:

2. Click Save block button.

Copyright block

Front end Display

Create & configure Copyright block

1. Navigate to Structure > Blocks, click Add block link, Create Copyright block with following properties:

2. Click Save block button.

Refer to following HTML code:

                            Copyright © 2014 Autox. All rights reserved. Designed by <a href="http://www.weebpal.com" title="weebpal" target="_blank">WeebPal</a>. Powered by <a href="http://www.drupal.org" title="drupal" target="_blank">Drupal</a>.

Footer menu

Front end Display

1. Create Footer menu

1. Navigate to Structure > Menu, click Add menu, then create Footer menu and add following fields:

2. Click Save button

2. Configure Footer menu

1. Navigate to Structure > Blocks, find Footer menu block, click configure link and set the following properties:

2. Click Save button

Configure Powered by Drupal block

1. Navigate to Structure > Blocks, find Powered by Drupal block, click configure link and set the following properties:

2. Click Save button

Frontpage view

Front end Display

Edit Frontpage page view

1. Navigate to Structure > View ,find Frontpage view, click Enable button. Then click Edit button , find and click Page button and set following properties:

2. At FORMAT area, find Format click link and set following properties:

3. At FORMAT area, find Show click link and set following properties:

4. At FOOTER area, click Add button to add field:

5. At FIELDS area, click Add button to add fields: Field: Image, Content: Link, Global: Fieldset, Content: Title, Global: Fieldset, Content: CO2 emissions (g/100km), Content: Fuel consumption combined (l/100km), Content: Top speed ( km/h) field:

6. Set properties for Field: Image

7. Set properties for Content: Link

8. Set properties for Global: Fieldset

9. Set properties for Content: Title

10. Set properties for Global: Fieldset

11. Set properties for Content: CO2 emissions (g/100km)

12. Set properties for Content: Fuel consumption combined (l/100km)

13. Set properties for Content: Top speed ( km/h)

14. At FIELDS area, click Rearrange button and set following arrange

15. At FILTER CRITERIA area, click Add button to add fields: Content: Type, Field: Image:fid field:

16. Set properties for Content: Type

17. Set properties for Field: Image:fid

18. At Advanced > OTHER area, add CSS class:

19. Click Save to save view

Create Subpages

Block Types: List Block

1. Navigate to Structure > Block Types > Add block type link and create List Block block type:

2. Go to Manage Field link and add following field:

3. Set properties Simple Field field

4. Set properties Image field

5. Set properties Link field

6. Go to Manage Display tab and set following field:

7. Click Save button

Configure Field Collection

To configure this future, you must install Field Collection module

1. Navigate to Structure > Field Collection find field_simple_field click manage fields link, add following fields:

2. Set properties for Title field

3. Modify Manage Display tab, set following properties:

4. Click Save button

Note You can read this article to understand more about Field Collection.

Sidebar First: About Author

Front end Display

1. Navigate to Structure > Blocks click Add block, create About Author block and block with following properties:

2. Click Save button

Refer to following PHP code:

                        <img src="<?php print base_path(); ?><?php print path_to_theme()?>/images/author.png" alt="author" />
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida libero at lacus cursus ornare. Mauris placerat risus nibh, eleifend mattis ligula porta vitae. Nam ultrices euismod pretium. Duis ultrices purus a consectetur convallis. Nulla facilisi. Morbi imperdiet dui a eleifend auctor.</p>

Sidebar first : Video

Front end Display

1. Navigate to Structure > Blocks click Add block, create Video block and block with following properties:

2. Click Save button

Refer to following HTML code:

                            <iframe src="//www.youtube.com/embed/2VZ1hw-1_oU" frameborder="0" allowfullscreen></iframe>

Sidebar first: Categories

Front end Display

Add block view

1. Navigate to Structure > View ,find Categories view. Click Add > Block button and set following properties:

2. At FIELDS area, click Rearrange button. Click removelink Field: Image and set following arrange

3. At HEADR area, click Rearrange button. Click removelink Global: Text area and set following arrange

4. At Advanced > OTHER area, add CSS class:

5. Click Save to save view

Configure View: Categories : Block 2

1. Navigate to Structure > Blocks, find View: Categories: Block 2 block, click configure link and set the following properties:

2. Click Save button

Sidebar first: New Comments

Front end Display

Create New Comments view

1. Navigate to Structure > View ,click Add new view link, then create New Comments view and set following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At Advanced > RELATIONSHIP area, click Add button to add fields:

4. At FIELDS area, click Add button to add fields: User: Picture, Comment: Updated date field

5. Set properties for User: Picture

6. Set properties for Comment: Updated date

7. At FIELDS area, click Rearrange button and set following arrange

8. At FILTER CRITERIA area, click Add button to add fields: User: Picture and set following properties:

9. At Advanced > OTHER area, add CSS class:

10. Click Save to save view

Configure View: New comments

1. Navigate to Structure > Blocks, find View: New comments block, click configure link and set the following properties:

2. Click Save button

About us Page

1. About us Banner

Front end Display

1. Navigate to Structure > Blocks click Add block, create About us Banner block and block with following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="banner-inner">
                                <h3>AutoX</h3>
                                <p>A brand that began life in a local context but then went on to become a major international player, with representation in 61 countries. In this section, you can relive Maserati’s enthralling history and get to know the people, achievements and cars which have made the brand famous.</p>
                                </div>

2. Content About us

Front end Display

1. Navigate to Content > Add content > Basic page click link , create About uscontent and with following properties:

2. Click Save button

Refer to following PHP code:

                                <h3 class="who-we-are">Who we are</h3>
                                <p>Quisque at diam sed velit consequat adipiscing et at dolor? Praesent sollicitudin consequat porttitor. Sed at semper tellus, in dapibus tellus. Maecenas sodales nulla faucibus, accumsan elit ac, pharetra metus. Praesent hendrerit purus a neque iaculis commodo. Nullam consequat eros porttitor velit placerat rutrum. Cras vulputate in dolor at dapibus. Phasellus non ornare leo. Maecenas id facilisis justo, id lobortis dui. Duis suscipit; justo in venenatis rhoncus, lacus lectus suscipit est, a sagittis justo tellus ut dui. Curabitur eget felis id eros commodo placerat ut in neque.</p>

                                <p>Praesent pellentesque tellus dui; id iaculis sem venenatis ac. Vestibulum ipsum ante, bibendum vel nunc a, malesuada faucibus tortor. Curabitur eu sem a enim faucibus euismod. Phasellus adipiscing orci erat; eu vehicula quam mattis quis. Donec pulvinar scelerisque eros in pulvinar. Proin eu urna elementum; sodales lacus non, aliquet magna. Curabitur sed lacinia elit, in aliquet magna! Proin rhoncus ante vitae faucibus iaculis. Curabitur adipiscing quam vitae ante ultricies, sit amet ultricies nulla pulvinar. Vestibulum varius orci eget lorem porta, in viverra neque posuere? Donec et scelerisque massa? Sed id.</p>

                                <img class="img-about" alt="image about" src="<?php print base_path();?><?php print path_to_theme();?>/images/about-us.png"/>

3. What we do block

Front end Display

1. Navigate to Structure > View ,find Service block view. Click Add > Block button and set following properties:

2. Att TITLE area, click Title link add set name title

3. At Advanced > OTHER area, add CSS class:

4. Click Save to save view

4. What make we a Professional Brands block

Front end Display

1. Navigate to Content > Blocks , click Add block link. Create What make we a Professional Brands block and set following properties:

2. Click Save button

5. Careers block

Front end Display

1. Navigate to Content > Blocks , click Add block link. Create Careers block and set following properties:

2. Click Savebutton

6. Configure Context

1. Navigate to Structure > Context link, click Add link. Create about-us context and set following properties:

2. Find Content click +Add and set following blocks

3. Click Save button

Services Page

1. Services Banner

Front end Display

1. Navigate to Structure > Blocks click Add block, create Services Banner block and block with following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="banner-inner">
                                <h3>We offer great vehicle services
                                <strong>for our customers round the clock.</strong> </h3>
                                </div>

2. Services page view

1. Navigate to Structure > View find Service view, then click Add > Page button and set following properties:

2. At FORMAT > Fomat area, click link and set following properties:

3. At PAGER SETTINGS area, find Path click link and set following properties:

4. At PAGER SETTINGS area, find Menu click link and set following properties:

5. At PAGER > Use pager area, click link

6. At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Gallery .

7. Set properties for Global: Fieldset

8. Set properties for Content: Gallery

9. Set properties for Content: Body

10. At FIELDS area, click Rearrange button and set following arrange

11. At Advanced > OTHER area, add CSS class

12. Click Save to view button

3. Services Footer

Front end Display

1. Navigate to Structure > Blocks click Add block, create Services Footer block and block with following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="banner-inner">
                                <h2>Ready to have a new car?</h2>
                                <a title="Contact us" href="contact">Contact us now</a> </div>

Vehicles Page

1. Vehicles Banner

Front end Display

1. Navigate to Structure > Blocks click Add block, create Vehicles Banner block and block with following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="banner-inner">
                                <h1>let's make your dream come true</h1>
                                </div>

2. Vehicles page view

1. Navigate to Structure > View click Add new view link, then create Vehicles view and set following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At PAGER SETTINGS area, find Menu click link and set following properties:

4. Click Save to view button

Vehicles Grid page

1. Navigate to Structure > View find Vehicles view, then click Add > Page button and set following properties:

2. At FORMAT > Fomat area, click link and set following properties:

3. At FORMAT > Show area, click link and set following properties:

4. At PAGER SETTINGS area, find Path click link and set following properties:

5. At PAGER SETTINGS area, find Menu click link and set following properties:

6. At FIELDS area, click Add button to add fields: Field: Image, Content: Link, Global: Fieldset, Content: Title, Global: Fieldset, Content: Fuel consumption combined (l/100km), Content: CO2 emissions (g/100km), Content: Top speed ( km/h) .

7. Set properties for Field: Image

8. Set properties for Content: Link

9. Set properties for Global: Fieldset

10. Set properties for Content: Title

11. Set properties for Global: Fieldset

12. Set properties for Content: Fuel consumption combined (l/100km)

13. Set properties for Content: CO2 emissions (g/100km)

14. Set properties for Content: Top speed ( km/h)

15. At FIELDS area, click Rearrange button and set following arrange

16. At FILTER CRITERIA area, click Add button to add fields: Content: Models, Content: Brands

17. Set properties for Content: Models

18. Set properties for Content: Brands

19. At Advanced > EXPOSED FROM area, set following properties field Exposed form in block, Exposed form style

20. Set properties for Exposed form in block

21. Set properties for Exposed form style

22. At Advanced > OTHER area, add CSS class

23. Click Save to view button

Vehicles List page

1. Navigate to Structure > View find Viehicles view, then find Page second button. Click Clone page buton and set following properties:

2. At FORMAT > Fomat area, click link and set following properties:

3. At PAGER SETTINGS area, find Path click link and set following properties:

4. At PAGER SETTINGS area, find Menu click link and set following properties:

5. At FIELDS area, click Add button to add fields: Content: Body, Global: Fieldset, Content: price.

6. Set properties for Content: Body

7. Set properties for Global: Fieldset

8. Set properties for Content: price

9. At FIELDS area, click Rearrange button and set following arrange

10. At FILTER CRITERIA area,click Rearrange button and click Remove link Content: Models, Content: Brands

11. At Advanced > EXPOSED FROM area, set following properties field Exposed form in block, Exposed form style

12. Set properties for Exposed form in block

13. Set properties for Exposed form style

14. At Advanced > OTHER area, add CSS class

15. Click Save to view button

Dealers page

1. Create Dealers Page view

1. Navigate to Structure > View click Add new view link, then create Dealers view and set following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click link and set following properties:

4. At PAGER SETTINGS area, find Menu click link and set following properties:

5. At FIELDS area, click Add button to add fields: Field: Image, Field: Address, Field: Public Email, Content: Latitude, Content: Longitude, Content: Phone, Field: Link.

6. Set properties for Field: Image

7. Set properties for Field: Address

8. Set properties for Field: Public Email

9. Set properties for Content: Latitude

10. Set properties for Content: Longitude

11. Set properties for Content: Phone

12. Set properties for Field: Link

13. At FIELDS area, click Rearrange button and set following arrange

14. Click Save to view button

2. Configure GMap

1. Navigate to Configuration > Web services find GMap link, then click and set following properties:

2. Click Save button.

News page

1. Navigate to Structure > View click Add new view link, then create News view and set following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At PAGER SETTINGS area, find Menu click link and set following properties:

4. Click Save button

News Grid page

1. Navigate to Structure > View find News view, then click Add Page button and set following properties:

2. At FORMAT > Format area, click link and set following properties:

3. At FORMAT > Show area, click link and set following properties:

4. At PAGER SETTINGS area, find Path click link and set following properties:

5. At PAGER SETTINGS area, find Menu click link and set following properties:

6. At FIELDS area, click Add button to add fields: Content: Post Date, Field: Image, Content: Body, Content: Link.

7. Set properties for Content: Post Date

8. Set properties for Field: Image

9. Set properties for Content: Body

10. Set properties for Content: Link

11. At Advanced > OTHER area, add CSS class:

12. Click Save to view button

News List page

1. Navigate to Structure > View find News view, then find and click Page second view. Click Clone Page and set following properties:

2. At FORMAT > Fomat area, click link and set following properties:

3. At PAGER SETTINGS area, find Path click link and set following properties:

4. At PAGER SETTINGS area, find Menu click link and set following properties:

5. At FIELDS area, find Content: Body click link and set following properties:

6. At FIELDS area, click Rearrange button and set following arrange

7. At Advanced > OTHER area, add CSS class:

8. Click Save to view button

FAQ Page

1. Navigate to Structure > View click Add new view link, then create FAQ view and set following properties:

2. Click Continue and edit button. Next to steps below to set properties for following fields:

3. At FORMAT > Fomat area, click Settings link and set following properties:

4. At PAGER SETTINGS area, find Menu click link and set following properties:

5. At FIELDS area, click Add button to add fields: Content: Body and set following properties:

6. Click Save button

Contact page

1. Add and configure content Contact webform

1. Navigate to Content > Add Content click Webform, add Contact webform and configure with following properties:

2. Click Menu settings link, set the following properties:

3. Click Comment settings link, set the following properties:

4. Click Publishing options link, set the following properties:

5. Click Save button.

2. Add fields Webform tab

1. Navigate to Webform tab and Add fields:

2. Set properties for Group 1

3. Set properties for Salutation

4. Set properties for Group 2

5. Set properties for Country

6. Set properties for Request type

7. Set properties for Confirm

8. Click Save button

3. Contact Banner

Front end Display

1. Navigate to Structure > Blocks click Add Block link, then create Contact Banner block and set the following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="banner-inner social-wrap">
                                    <h2>contact information</h2>
                                    <address>
                                        <p>
                                            <i class="fa fa-map-marker"></i>Street No. 123, main road, City name, country
                                        </p>
                                        <p>
                                            <i class="fa fa-phone-square"></i>454564568548
                                        </p>
                                        <p>
                                            <i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
                                        </p>
                                    </address>
                                    <span class="find-us">find us on: </span>
                                    <ul>
                                        <li><a class="fa fa-facebook"></a></li>
                                        <li ><a class="fa fa-twitter"></a></li>
                                        <li><a class="fa fa-google-plus"></a></li>
                                    </ul>
                                </div>

4. Map

Front end Display

1. Navigate to Structure > Blocks click Add Block link, then create Map block and set the following properties:

2. Click Save button

Refer to following HTML code:

                                <div class="map">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d6209.716707673596!2d-77.0322996777231!3d38.90435434249726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1svi!2s!4v1407837048648" width="100%" height="400" frameborder="0" style="border:0"></iframe>
                                </div>

Send CV

1. Add and configure content Contact webform

1. Navigate to Content > Add Content click Webform, add Send CV webform and configure with following properties:

2. Click Save button.

2. Add fields Webform tab

1. Navigate to Webform tab and Add fields:

2. Set properties for Attach File

3. Click Save button

More Configurations

Site Information

1. Log in to Administration site page by administrator account

2. Navigate to the Site Information page Configuration > System: Site information

3. Change site details from the view:

Site name
Slogan
E-mail address
Set Default Front page

4. Click on Save configuration to finish editing.

Appearance Settings

1. Create a new color.

1. Navigate to the directory: autox/sites/all/themes/autox, you can find file marketplace.info, open this file.

2. Locate the skins[ ] arrays and add new code row:

3. Save file.

4. Navigate to the directory: autox/sites/all/themes/autox/css/colors, clone a folder, then rename it "new_color"

5. new_color folder includes images folder and style.css file.

Now, you can style new color for theme by modifying style.css file.

2. Create a new background.

1. Navigate to the directory: autox/sites/all/themes/autox, you can find file, open file marketplace.info

2. Locate the backgrounds[ ] arrays and add new code row:

3. Save file.

4. Move your background image into the directory: autox/sites/all/themes/autox/images

5. Navigate to the directory: autox/sites/all/themes/autox/css, open file base.css, and add new code row:

6. Save file.

3. Configuration

1. Log into website by administrator account.

2. Go to Appearance find marketplace 7.34, click on Settings

3. At CONFIGS area, select one of options for Layout, Skin, Background to set default, (e.g: New Color), and at TOGGLE DISPLAY area, check Show Skins Menu option if you want to display Skins menu on front-end pages.

Language Configuration

This section guides you how to have multiple languages for your site. New Shopping Theme supports both Left to Right and Right to Left languages.

1. Navigate to Configuration > Regional and Language > Languages then add new language.

2. Check to enable and set default language

3. Go to Detection and selection tab

4. Save configuration