Technical requirements

Before start the installation, be sure, your systems should meet the following requirements.

Server Requirement

• PHP 5.6.12+
• MySQL 5.6.26
• Apache 2.4

Browser Requirements

• Firefox
• Safari
• Google Chrome
• Opera
• Internet Explorer 9+

Configuration Options

We recommend to use the following servers in your PC to develop your site.

• LAMP (Linux)
• WAMP (Windows)
• MAMP (Macintosh)
• XAMPP (Multi-platform)

Quickstart Package Installation

In All Drupal themes packages created by OrdaSoft you can find Quickstart Package. Quickstart Package allow you to install Drupal theme with demo data in few clicks. We highly recommend this method of Drupal installation

1. Uploading on server

Through FileZilla or another FTP software, upload all files from QuickStart Package folder to your website directory.

2. Run the Drupal 8 Installation Wizard

Open your web browser and go to the folder that you uploaded your QuickStart Package.

3. Database

Configure Drupal 8 with the your database. First you need create database in control panel phpMyAdmin in your hosting. Next you need to fill in all the fields according to created database.

4. Install

After the database and specify all the passwords Drupal 8 installation begins.

5. Configure site

Configure Drupal 8 for your site. Enter the site name, site, e-mail address, user name, e-mail address and password, select your country and time zone, click Save and Continue for final the installation.

Single theme installation

In All Drupal themes packages created by OrdaSoft you can find Drupal theme file. Drupal theme installation via admin area should take no more than one minute.

1. Upload File & Install

From the backend of your Drupal 8 site (administration) select Appearance -> +Install new theme. Click the Browse button and select the theme on your local machine. Install from a URL - copy the address of the theme for installation. So you can download directly to your theme directory your site/themes, and it will appear in the administrative block.

FAQ

What is the difference between Quick Start package and single theme installation? Installing Quick Start package you get the same site as at the demo version. Quick Start package contains an entire Drupal installation and already configured Drupal theme and modules which we used on the demo site. Installing Drupal theme via Extension manager doesn't include sample date. You will need by your self to install and configure all modules.

Notice

Remember! If you make any changes to that code, you will need to adhere to strict rules of syntax of programming languages. Look carefully at the sample code in the documentation and the files themselves which you edit!

Admin Panel

Customize logo, color, links, text etc., all this is possible via theme admin area.

Go to Administration > Appearance and select Settings installed theme

Color scheme

In the theme admin panel, you can select customize the color yourself if you wish to certain parts of the site:

• Header background top
• Main background
• Line background
• Footer background
• Title and slogan
• Text color
• Link color
• Main menu hover
• Elements color
• Color buttons
• Color buttons hover

Logo and Favicon

Upload your own logo and favicon in few simple steps. Press to "Select" button and in the popup window, select the logo or favicon, available settings:

• Uppload logo
• Uppload favicon

Link Settings

In your theme, you can select settings for links, these links are: (Body link, Main menu link, Top menu link, Footer link)

you can select individual settings for individual links

 $form['Mobidic_settings']['body_pattern']['layout_pattern'] = array(
    '#type' => 'select',
    '#options' => array(
      'none' => t('None'),
      'body_bg1' => t('Stone'),
      'body_bg2' => t('Lines'),
      'body_bg3' => t('Rhombus'),
      'body_bg4' => t('Noise'),
      'body_bg5' => t('Сloth'),
    ),
    '#title' => t('Select Pattern'),
    '#default_value' => theme_get_setting('layout_pattern', 'Mobidic'),
  );

Typography

OrdaSoft themes use Google Fonts. Google Fonts provides high-quality fonts that you can include in your pages using the Google Fonts API. Benefits of the Google Fonts API include:

• A choice of high quality open source fonts.
• Works in most browsers.
• Extremely easy to use.

In theme added most popular Google fonts and You can specify your own font for: Body, Body Links, Main Menu, Footer, h1 - h6.

How to add new font from Google?

You need to get the connection code font on the Google Fonts site. This code should look like:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700);>

For the emergence of the new font in the font list in admin area, add the following code in the theme-settings-geniral.inc file is in the folder your_sites/themes/your_theme/includes:

  $options_font = array(
    'Abel, sans-serif' => 'Abel',
    'Arial, sans-serif' => 'Arial',
    'Comfortaa' => 'Comfortaa',
    'Dosis, sans-serif' => 'Dosis',
    'Droid Sans, sans-serif' => 'Droid Sans',
    'Francois One, sans-serif' => 'Francois One',
    'Georgia, serif' => 'Georgia',
    'Helvetica, sans-serif' => 'Helvetica',
    'Lato' => 'Lato',
    "Indie Flower, cursive" => "Indie Flower",
    "Shadows Into Light Two, cursive" => "Shadows Into Light Two",
    "Rock Salt, cursive, cursive" => "Rock Salt",
    'Lobster, sans-serif' => 'Lobster',
    'Lora, sans-serif' => 'Lora',
    'Open Sans Condensed, sans-serif' => 'Open Sans Condensed',
    'Open Sans, sans-serif' => 'Open Sans',
    'Oswald, sans-serif' => 'Oswald',
    'Oxygen, sans-serif' => 'Oxygen',
    'PT Sans Narrow, sans-serif' => 'PT Sans Narrow',
    'PT Sans' => 'PT Sans',
    'Prosto One, cursive' => 'Prosto One',
    'Quicksand, sans-serif' => 'Quicksand',
    'Roboto Condensed, sans-serif' => 'Roboto Condensed',
    'Roboto, sans-serif' => 'Roboto',
    'Share, cursive' => 'Share',
    'Source Sans Pro, sans-serif' => 'Source Sans Pro',
    'Times New Roman, sans-serif' => 'Times New Roman',
    'Ubuntu Condensed, sans-serif' => 'Ubuntu Condensed',
    'Ubuntu, sans-serif' => 'Ubuntu',
    'Verdana, sans-serif' => 'Verdana',
  );

This code has added a new font 'Roboto' for the tag H1 to the list of fonts in admin area.

Region positions

Region positions are placeholders in a theme. They identify positions within the theme and tell the Drupal 8 application where to place output from modules assigned to a particular position. The theme designer has complete control over module positions, creating variations between themes and the respective Drupal default positions assigned to modules in the installation sample data.

For example, the module position regions[home_page_gallery] could be defined to be in the bottom of the theme to display a slideshow. So if a module is assigned the regions[home_page_gallery], it will be displayed wherever the designer puts that bottom module position - not necessarily the bottom side of the page.

Mobidic.info.yml

The Mobidic.info.yml file contains all the installation and core information for a theme, including the regions positions it utilizes. Here is list module positions theme.

regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  main_menu: 'Main menu'
  slideshow: Slideshow
  top1: 'Top 1'
  top2: 'Top 2'
  top3: 'Top 3'
  top4: 'Top 4'
  top_content1: 'Top content 1'
  top_content2: 'Top content 2'
  top_content3: 'Top content 3'
  top_content4: 'Top content 4'
  line1: 'Line 1'
  line2: 'Line 2'
  line3: 'Line 3'
  line4: 'Line 4'
  top_content: 'Top Content'
  feature1: 'Feature 1'
  feature2: 'Feature 2'
  feature3: 'Feature 3'
  feature4: 'Feature 4'
  contenttop1: 'Contenttop1'
  contenttop2: 'Contenttop2'
  contenttop3: 'Contenttop3'
  contenttop4: 'Contenttop4'
  sidebar_first: 'Sidebar first'
  content: Content
  sidebar_second: 'Sidebar second'
  contentbottom1: 'Contentbottom 1'
  contentbottom2: 'Contentbottom 2'
  contentbottom3: 'Contentbottom 3'
  contentbottom4: 'Contentbottom 4'
  bottom_line1: 'Bottom Line 1'
  bottom_line2: 'Bottom Line 2'
  bottom_line3: 'Bottom Line 3'
  bottom_line4: 'Bottom Line 4'
  bottom1: 'Bottom 1'
  bottom2: 'Bottom 2'
  bottom3: 'Bottom 3'
  bottom4: 'Bottom 4'
  last1: 'Last 1'
  last2: 'Last 2'
  last3: 'Last 3'
  last4: 'Last 4'
  help: Help
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  messages: Messages
  featured: Featured
  breadcrumb: Breadcrumb
  panel_first_1: 'Panel first col 1'
  panel_second_1: 'Panel second col 1'
  panel_second_2: 'Panel second col 2'
  panel_second_3: 'Panel second col 3'
  panel_second_4: 'Panel second col 4'
  footer: Footer
  footer1: 'Footer 1'
  footer2: 'Footer 2'
  footer3: 'Footer 3'
  footer4: 'Footer 4'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

Although these are commonly used, it is up to the theme developer to choose both a module position name display region. The addition of module positions, as displayed above in file info, and renderer this position in file page.html.twig as shown below.

{% if page.slideshow %}
  <section id="slideshow" class="slideshow">
      {{ page.slideshow }}
  </section>
{% endif %}

Visualization

It's possible to visualize all modules set on a theme. Home » admin » structure » block and click to "Demonstrate block regions (OS Base)"

Theme updating

Backup your Drupal site

To help ensure that you don't lose your Drupal database or files in process updating theme you should make backup.

Uninstall your Drupal theme

Go to: Drupal Admin Area -> Appearance. If you have active theme, then click Disable, and remove this folder theme from directory site your_site/themes/

Install your new Drupal theme inverse manner

All other modules, you can upload in folder modules your_site/modules:

• Upload Package File - (select a package from your PC, upload and install it)
• Install from Directory - (enter the path where the package is located on your webserver)
• Install from URL - (enter the URL to the package)

Option 3 does everything for you, your environment needs to be properly configured to allow this. Option 1 requires you to download the package to your PC. Option 2 requires you to unzip and move the folders/files to your webserver. All option require the webserver to have write access to the webspace.

Choose the first method: Upload Package File. Select the package from your PC and click the button "Upload File & Install".

QuickStart by OrdaSoft contains:

Colorbox

Colorbox is a light-weight customizable lightbox plugin for jQuery. This module allows for integration of Colorbox into Drupal.
Images, iframed or inline content etc. can be displayed in a overlay above the current page.

Geolocation

Geolocation Field provides a field type to store geographical locations as pairs of latitude and longitude (lan,lng) as well as the necessary integration to display those locations through views, fields and using a number of different map providers.

Views Slideshow

Views Slideshow can be used to create a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View you create.

Contact Block

The Contact Block module provides contact forms in a block. It uses contact forms created with the Drupal core Contact module.

NOTE*

After installation, you need to clean the cache in the admin panel of Drupal. Go to Configuration -> Performance -> Clear all caches.

Home page

1. Logo

To change the setting of the logo you need go to: Drupal Admin Area Appearance > Settings > Your site > Logo

2. Menu

Main Menu has large number of settings, so you can add a second level menu, to modify or add new items to the menu you need go to: Drupal Admin Area > Structure > Menu > Main navigation.

3 Image Block

In order to change the background of the block you will need to create your image and rename it to mobidic-header-background-min.jpg, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on background Info Block.

3.1 Planet

In order to change the image of the block you will need to create your image and rename it to luna.jpg, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on Planet block.

4 Cloud

In order to change the image of the block you will need to create your image and rename it to clud.png, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on Cloud block.

5 Left Cloud

In order to change the image of the block you will need to create your image and rename it to clouds-1-min.png, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on Left Cloud block.

6 Right Cloud

In order to change the image of the block you will need to create your image and rename it to clouds-2-min.png, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on Right Cloud block.

7 Rocket

In order to change the image of the block you will need to create your image and rename it to rocket.png, then you need to go your site/themes/your theme/images and replace staying there a picture with the same name. Then your picture will be on Right Cloud block.

8 Blog Post

This section displays the first three posts from the blog, you can change the output settings of this information, for this you will need to pass: Drupal Admin Area > Structure > View > Blog Post

9. From Our Portfolio

This block output gallery to upload your images you need to go: Drupal Admin Area > Content > Our Featured Portfolio

10 Test Block Drupal

This section displays the text for editing this information you will need to pass: Drupal Admin Area > Structure > Block layout > Test Block Drupal

11 Slideshow

At the slider output image added. To change the setting of the slider, you will need to go to the Drupal Admin Area > Structure > View > Slideshow

You can also modify existing slides, or add new. To do this you need to pass Drupal Admin Area > Content > Slideshow

12. Main Information

In this unit, you can output your information to modify this unit you will need to pass: Drupal Admin Area > Content > Article

13. Our Team

In this section you can add your own information. For this you will need to pass Drupal Admin Area > Content > Our Team

11. Map

This unit outputs a local map on which you can specify one location you will need to pass Drupal Admin Area > Content > Location Map

12. Contact Block

Go to: Drupal Admin Area -> Structure -> Contact form. Or if You want change block, go to: Drupal Admin Area -> Structure -> Blocks -> Contact form. Make sure you enter a valid email address, because it will be used by the contact form.

14. Footer Info

This section displays the text for editing this information you will need to pass: Drupal Admin Area > Structure > Block layout > Footer info

15. Social Icons

Setting of social icons allows add or change the number of icons on your website, for the settings social icons you will need to pass control panel, go to Drupal Admin Area > Appearance > Settings > Your site > Social Icon

8. You can find us here

This unit outputs a local map on which you can specify one location you will need to pass Drupal Admin Area > Content > Location Map

Support

Support of all themes is carried out on OrdaSoft forum

Created: 2016/06/07

• latest Update: 2021/10/05
• By OrdaSoft
• http://ordasoft.com/