1. Start
  2. Installation - full version
  3. Installation - theme only
  4. Install & Enable theme
  5. Enabling dependent modules
  6. Configuring Regions & Blocks
  7. Change theme colors
  8. Change logo & Shortcut icon
  9. Fullscreen background Slider
  10. Fullscreen background Video
  11. OnePage Portfolio
  12.  -Portfolio items
  13.  -Portfolio Categories
  14. OnePage About Us
  15.  -About us items
  16. OnePage Our Services
  17.  -Our Services items
  18. OnePage Features
  19.  -Faqs
  20.  -Flicker (block)
  21. OnePage Contact Us
  22.  -Contact info
  23.  -Social Icons (block)
  24.  -Clients (block)
  25. Blog
  26. Website Main Menu
  27. Add language / Import language
  28. Drupal Temporary Directory
  29. Sources and Credits

Surreal

Surreal - One Page Parallax Drupal Theme (Drupal 7)

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation file, please feel free to email us at http://support.inspiro-media.com

INSPIRO MEDIA
http://www.inspiro-media.com

Installation - full version

Open folder For fresh new Drupal Installation (recomended) (easy installation: all required modules are included on the package) and copy or upload all files to your web server or localhost server directory. Example in folder Surreal.

If you use web server then copy all the files into root. For install locally, you need download localhost software first. You can install xampp or wamp then copy all the files to C:\xampp\htdocs\Surreal or C:\wamp\html\Surreal

Using a Web Browser, navigate to your folder. It would be on "http://localhost/Surreal" in case you installed it locally or "http://yourdomain.com/Surreal" in a remote installation.

You will see Drupal installation page. Select Surreal Profile then click Save & Continue


install

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

install

 

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.

install

install

Configure your site basic info on the "Configure Site" page and then click "Save and Continue".

install

Done! Your site is ready to use!

install

Installation - theme only (for existing drupal installation)

Notice: before you start you should have experience on drupal for standalone version (for existing drupal installation)

If you are new to Drupal, Please click here for Community Documentation.

Go to http://drupal.org/download and download drupal 7.x version

Extract drupal-7.x.zip file into any folder, then upload all files to your web server or localhost.

Once you extract it, rename to Surreal (or your site name) it will be located on a folder called "Surreal" or (or your site name)

Extract Surreal files.
When you first get the theme, it will appear in a compressed file format such as 'tar.gz' or 'zip'. On Windows, use a program like 7-Zip to extract it. On the Mac, you can use Stuffit Expander. Open follder For existing drupal installation and copy inside files into your existing drupal in sites/all/.

If you use web server then copy all the files into root. For install locally, you need download localhost software first. You can install xampp or wamp then copy all the files to C:\xampp\htdocs\Surreal or C:\wamp\html\Surreal

Using a Web Browser, navigate to your folder. It would be on "http://localhost/Surreal" (http://localhost/yoursitename) in case you installed it locally or "http://yourdomain.com/Surreal" (http://yourdomain.com/yoursitename) in a remote installation.

You will see Drupal installation page. Select Standard Profile then click Save & Continue

Install & Enable theme


  1. Enable theme
    Go to the Appearance page at admin/appearance (Drupal 7) and click on 'Enabled and set default' to the Surreal theme.

  2. Click the 'Save Configuration' button at the bottom.

Enabling dependent modules


1. From Administration Menu go to Modules and enable these modules below:

Inspiro & Contributed Modules


Drupal Core Modules:

 

Modules should be enabled same in this figure below

Configuring Regions & Blocks

Regions

The Surreal theme has 9 regions :

regions[region1] = Portfolio #1
regions[region2] = About Us #2
regions[region3] = Our Services #3
regions[region4] = Features #4
regions[region5] = Contact Us #5
regions[footer] = Footer
regions[copyright] = Copyright
regions[content] = Content
regions[sidebar] = Sidebar

This page provides a drag-and-drop interface for assigning a block to a region, and for controlling the order of blocks within regions. Blocks are positioned on a per-theme basis. Remember that your changes will not be saved until you click the Save blocks button at the bottom of the page. Click the configure link next to each block to configure its specific title and visibility settings.


Assignment of blocks to a related region of Surreal theme. Please use these instruction below to set proper regions on theme.

Change theme colors

 

Theme Colors

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

  1. Go to the Website Colors tab
  2. In the drop-down list select your preferred color.
  3. Click Save Configuration to save settings.

Fullscreen background Slider

The Supersized Slider is a fully-responsive, fullscreen slider. This is where you can manage fullscreen slider & fullscreen video.

1. Select Slideshow type →Image

2. Click on the Upload a new slide, select an image from your computer and click on the save configuration button.  

3. Add Slide title

4. Select the option published

5. Click Save Configuration to save settings.

 

Parameters

  1. Title
    This is the big title that appears on slider
  2. Wight
    With this option you can order slides, which will be shown first, second, etc. Slides with lower weight will float to the top of lists.
  3. Published
    Slide without this flag won't show on website.
  4. Delete
    Check this flag and then click on the "Save configuration" button to delete the slide.

 

Fullscreen background Video

The Supersized Slider is a fully-responsive, fullscreen slider. This is where you can manage fullscreen slider & fullscreen video.

1. Select Slideshow type →Video

2. Add your video

3. Click Save Configuration to save settings.

 

 

OnePage Portfolio

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the One Page Settings and select Portfolio (region #1)

  1. Add or change page title of Portfolio region.
  2. Add page description (with or without html, you can find all html template codes inside Template folder for each page)
  3. Add parallax description (with or without html, you can find all html template codes inside Template folder for each page)
  4. Upload your desired parallax image for portfolio page or region #1
  5. Click Save Configuration to save settings.

Portfolio items

Create portfolio items

On the Administration Menu that runs across the top of the page, click Add content and then click Portfolio

  1. Type the title for new portfolio item in the Title field.
  2. Type the description
  3. In the Image field select your preferred image file. This field is required so you have to add your image. The image will be resize in the propper size.
  4. If you want this item to be with video add your full link video, (see description on video field).
  5. Select category
  6. Click the Save button to save

Portfolio Categories

Create or modify portfolio categories

On the Administration Menu that runs across the top of the page, click Structure → taxonomy and then in Portfolio categories click list items or add terms


 

 

OnePage About Us

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the One Page Settings and select About Us (region #2)

  1. Add or change page title of About us region.
  2. Add page description (with or without html, you can find all html template codes inside Template folder for each page)
  3. Add parallax description (with or without html, you can find all html template codes inside Template folder for each page)
  4. Upload your desired parallax image for about us page or region #2
  5. Click Save Configuration to save settings.

About us items

Create about us items

On the Administration Menu that runs across the top of the page, click Add content and then click About us

  1. Select order view
  2. Type the title in the Title field
  3. Type person name
  4. In the Image field select person image file. The image will be resize in the propper size.
  5. Type Job Position
  6. Add social icons (with or without html, you can find all html template codes inside Template folder for each page)
  7. Type About person text
  8. Add skills (with or without html, you can find all html template codes inside Template folder for each page)
  9. Click the Save button to save

OnePage Our Services

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the One Page Settings and select Our Services (region #3)

  1. Add or change page title of Our Services region.
  2. Add page description (with or without html, you can find all html template codes inside Template folder for each page)
  3. Add parallax description (with or without html, you can find all html template codes inside Template folder for each page)
  4. Upload your desired parallax image for our services page or region #3
  5. Click Save Configuration to save settings.

Click Save Configuration to save settings.

Our Services items

Create portfolio items

On the Administration Menu that runs across the top of the page, click Add content and then click Our Services

  1. Type the title for new portfolio item in the Title field.
  2. Type the description
  3. In the Image field select your preferred image file. This field is required so you have to add your image. The image will be resize in the propper size.
  4. Add your desired icon. Please use the list in field description with all icon codes.
  5. Select order number
  6. Click the Save button to save

OnePage Features

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the One Page Settings and select Features (region #4)

  1. Add or change page title of Features region.
  2. Add page description (with or without html, you can find all html template codes inside Template folder for each page)
  3. Add parallax description (with or without html, you can find all html template codes inside Template folder for each page)
  4. Upload your desired parallax image for features page or region #4
  5. Click Save Configuration to save settings.

Faqs

Create faqs items

On the Administration Menu that runs across the top of the page, click Add content and then click Faqs

  1. Type the title in the Title field.
  2. Type the Body description
  3. Click the Save button to save

Flicker (block)

Configuring Flicker Account

On the Administration Menu that runs across the top of the page, click Structure → block and then in Flicker block click configure


 

 

OnePage Contact Us

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the One Page Settings and select Contact Us (region #5)

  1. Add or change page title of Contact Us region.
  2. Add page description (with or without html, you can find all html template codes inside Template folder for each page)
  3. Add parallax description (with or without html, you can find all html template codes inside Template folder for each page)
  4. Upload your desired parallax image for contact us page or region #5
  5. Click Save Configuration to save settings.

Configure contact info

On the Administration Menu that runs across the top of the page, select Appearance →Settings → Surreal

Go to the Contact Page tab and add your contact info.

  1. Add your office address, example New york, USA (this will automatically generate embed code on contact page)
  2. Enter phone number, email, skype id and working days text.
  3. Once you done then click Save.

 

Social Icons (block)

Configuring Social icons

On the Administration Menu that runs across the top of the page, click Structure → block and then in Social Icons block click configure.


Clients

Create faqs items

On the Administration Menu that runs across the top of the page, click Add content and then click Clients

  1. Type the title in the Title field.
  2. Upload Client Logo
  3. Type the website link of client website. Example: http://www.inspiro-media.com
  4. Select order
  5. Click the Save


Blog

Create blog entry

Blog support three type of content:

  1. On the Administration Menu that runs across the top of the page, click Add content and then click Blog
  2. Type the title for new blog in the Title Field.
  3. In the Body field enter your new blog content.
  4. In the picture field select your preferred images. This field is required so you have to add your image. The image will be resize in the propper size.
  5. In the Video field add your Vimeo or YouTube code. Example: Df8ofF1mbdA
  6. Select Tags
  7. Click the Save button to save your new page.

 

Website Main Menu

Website menu can be managed by going Administration >> Structure >> Menus >> Main menu

 

Add or modify your desired menu link.

The one page template is builded with smooth scrolling effect to navigate the regions in page. Each of menu items can link to the anchor elements by using the following URL structure: "<front>#r1"

  1. List of regions on your page:
  1. Type menu title
  2. Type menu path. Example: <front>#r2
    if the menu path should be external link, add your full link without <front> code.
  3. Click Save to save settings.

 

Add language / Import language

Add predefined language

  1. Go to the language configuration page: Administer > Site Configuration then click Languages

  2. Click on Add language and select the language you are going to install from the list of Predefined languages.




  3. Once the language is added, you will see the a confirmation message.

  4. On the same page (Configuration-> Languages) check the option next to the new language in the “Default” column if you are going to make this language default.

  5. Click Save Configuration button.

 

Import language from drupal.org



  1. Download your desired language form from Drupal.org : http://localize.drupal.org/translate/languages and save on your computer.
  2. Go to the Configuration top menu and click Translate interface under the Regional and language section.
  3. On the next page, click the Import tab.
  4. On the Translate Interface page, click Browse under Import Translation -> Language file and navigate to the translation file downloaded from http://localize.drupal.org.

  5. Make sure that the same language is selected in the Import into drop-down box, Built-in interface is checked under Text group and Existing strings and the plural format are kept, only new strings are added is selected under Mode. Then click Import.
  6. Once the importing process is over, and you have selected your new language as default in point 8 of this article, your Drupal interface language will be changed to the language you installed.
  7. In case, some of your text is still not translated after that, you can do that manually. Click Translate under Configuration > Translate interface and look for the parts that still need to be translated.
  8. Click Save Configuration button.

Define interface text language detection.

  1. Enable detection methods by going to: Administration > Configuration, click Regional and languages then Languages.
  2. Klick on tab Detection and selection and enable URL, SESSION, USER, BROWSER methods. see figure below


  3. Click Save Configuration button.


Translate a page or single text

Go to: Administration > Configuration, click Regional and languages then Translate interface and select Translate tab.

  1. Type word example "Contact" at field string container,
  2. Selec from language drop-down list your desired language.
  3. Click button Filter.
    Important: If you don't find what you're looking for (example "contact" string), try visiting a page where it appears so the system has a chance to discover the text. Then start from begining.
  4. Click on edit link.



  5. Type translated string in to your desired language.
  6. Click Save Configuration button.

Drupal Temporary Directory

Please go to Configuration > Media> File system and change Temporary directory to /tmp or leave empty and save configuration.

Sources and Credits

Photo & Icon Credits

Shutterstock

icomoon.io/app/

 

Code Credits

Skeleton Framework

Isotope Filtering

FlexSlider

Modernizr

jQuery

Twitter Bootstrap

Pretty Photo

Prefixfree

Supersized

Parallax

Retina