DREAM CAR Documentation

Premium Car Dealers Drupal Theme

Introduction

DreamCar is a professional Drupal responsive theme for car dealers. based on Zen Grids, DreamCar comes with 5 colors, animated SlideShow, search filter, Parallax and other features.

Setup and implementation

DreamCar is created over an installation profile, so you don't need to do much to get it working. Following steps will guide you through the installation process.

1. Extract the zip file on your web server. It includes all you need to get it working, so don't worry about any other files handle.
The location of your installation depends on the kind of server you're using. I mention some examples here you may be:

  • In case you're using a local XAMP on Windows, the server root folder is C:\xampp\htdocs\
  • In case you're using a local AppServ on Windows, the server root folder is C:\Appserv\www\
  • In case you're using a local MAMP on OSX, the server root folder is Aplications/MAMP/htdocs/
  • In case you're using a remote/local WebServer on Linux, the server root folder usually is /home/user/public_html/

Once you extract it, you can change the name of the folder.

2. Using a web browser, navigate to your folder/domain/subdomain where the extracted DreamCar's folder was created..
I'll use as example the name "dreamcar" due to the default folder. It would be on
"http://localhost/dreamcar" in case you installed it locally or
"http://yourdomain.com/ dreamcar" in a remote installation.

3. Select DreamCar as your installation profile on the "Select an installation profile" page and then click "Save and Continue".

4. Select your language on the "Choose language" page and then click "Save and Continue" by default, the theme is English based.

5. Setup your database info on the "Database configuration" page and then click "Save and Continue". If you haven't created it yet, do it via phpMyAdmin or any other MySQL configuration app. Once you continue, the installation process will begin.

Please, be a little bit patient.

6. Configure your site basic info on the "Configure Site" page and then click "Save and Continue". Wait a little bit, until all DreamCar's features are configured.

7. DreamCar instalation was a Success!

For security purposes, it's recommended that you delete profiles/dream_car_profile/dream_car_base.sql, or move the dream_car_profile profile folder out of your webroot.

Now you can visit your new site.

Customize appearance

To customize your website, you should visit the theme configuration page: admin/appearance/settings/dream_car

Change Site Logo

This is one of the first things you'll want to do when you have DreamCar installed. Here I show you how:

1. Browse to admin/appearance/settings/dream_car
Scroll down to the section named "Logo image settings".

2. Browse for your logo file locally. Once you find it, select it, and click “Save Configuration” at the bottom of the page. It will be uploaded to your webserver and will replace the default one.

It's done.

Change theme style

Dream car comes with 5 colors, 2 layouts and 10 background patterns. To define your preference:

1. Browse to admin/appearance/settings/dream_car
2. Scroll down to the section named "Theme style settings".

3. Define your preference and save.

Change theme appearance

If you want change the appearance of your website, you can use the file located in /sites/all/themes/dream_car/css/custom.css to add your custom css code.

Add a google font to your theme

You can add any of google fonts to your website, you just need to:
1. Browse to admin/appearance/fontyourface/browse/google_fonts_api

2. Search for your font and enable it.
3. Brows to admin/appearance/fontyourface, you will find your font ... click on edit.

4. Add your CSS selectors.

Managing Content

Drupal is a powerful cms, so Managing content must be very easy:

Add a new Brand/Model

DreamCar use Brand/Model as taxonomies, to add/edit/delete a brand or model:
1. Brows to admin/structure/taxonomy/brand_model
2. add/edit/delete a brand or model
3. Make sure that a model is a child of an brand

Add a new car

Before adding a new car make sure that the Brand/Model exist, then:
1. Brows to node/add/car
2. Fill in the form by the car information
3. When you choose the barand, be patient until the related models is charged
4. Add 4 images to be used as slideshow in car page
5. If you want to add the car in the home page slideshow, select "yes" in "Add to slideshow" section and add an image in "Slideshow image" section

Edit other pages

- Brows to node/46/edit to edit "About Us" page.
- Brows to admin/content and filter the content by "service" as type, to edit Services information.

Customize Blocks

Slide Show

The SlideShow is a view block, to edit it:
1. Brows to admin/structure/views/view/slideshow/edit
2. You can change the number of content in Slide (default:5)
3. You can choose the transition effect by clicking on Format > Settings




4. You can change field animation by editing this file: sites/all/libraries/slideshow_animate/slideshow_animate.js
you will find this lines:

price_animation= "fadeInLeft animated";
link_animation= "fadeInLeft animated";
title_animation= "fadeInLeft animated";
quality_animation= "zoomIn animated";
year_animation= "zoomIn animated";
horsepower_animation= "zoomIn animated";
mileage_animation= "zoomIn animated";
transmission_animation= "zoomIn animated";

you can change the animation by replacing "fadeInLeft" in the first line for example, by "fadeInRight"
For more animation option, please visit this link http://daneden.github.io/animate.css/

Why us?

"Why us?" is a view block, to edit it:
1. Brows to admin/structure/views/view/whu_us_/edit
2. You can change the animation by clicking on Format > Settings
3. Change the class "fadeInUp" in "Row class" by "fadeInRight" for example, don't remove "wow" from "Row class"
For more animation option, please visit this link http://daneden.github.io/animate.css/

About US

"About US" is a view block, to edit it:
1. Brows to admin/structure/views/view/about_us/edit
2. You can change the animation by clicking on Fields > field
3. Change the class "fadeInUp" in " Style settings > CSS class " by "fadeInRight" for example, don't remove "wow" from "CSS class"
For more animation option, please visit this link http://daneden.github.io/animate.css/
4. You can find the parallax image and replace it here : sites/all/themes/dream_car/images/about_us_bg.jpg





New Inventory

"New Inventory" is a view block, to edit it:
1. Brows to admin/structure/views/view/inventory/edit/block_1
2. You can change the animation by clicking on Format > Settings
3. Change the class "fadeInRight" in "Row class" by "fadeInUp" for example, don't remove "wow" from "Row class"
For more animation option, please visit this link http://daneden.github.io/animate.css/

Brands

"Brands" is a view block, to edit it:
1. Brows to admin/structure/views/view/brands/edit
2. You can change the animation by clicking on Format > Settings
3. Change the class "fadeInUp" in "Wrapper class " by "fadeInRight" for example, don't remove "item-list wow" from "Row class"
For more animation option, please visit this link http://daneden.github.io/animate.css/
4. You can find the parallax image and replace it here : sites/all/themes/dream_car/images/brands_bg.jpg

Enquire Now

"Enquire Now" is a block generated by custom module, to configurat it:
1. Brows to admin/config/system/enquire_car
2. Set the "Recipient of email" / "Email subject" / "Greeting message"
3. Save your modification

This module sent an email to "Recipient of email" with the information given by the visitor and a link to the car page visited.

Contact Map

The map in contact page is displayed by a view, to edit it browse to admin/structure/views/view/company_location/edit

To define your own location, browse to node/67/edit and select your location.

You can also add other locations by creating a new contents of type location, to do it browse to node/add/location

Best Photo Dimensions

The website will automatically try to resize specific images for you, however it’s always good to have the image the way you want it before uploading

Slideshow: 1920px X 960px
Car images: 960px X 580px