Overview

Jango is a clean, multi-purpose and responsive template. It is suitable for your corporate business sites, a creative agency or a portfolio projects.

 

Updated: 11/02/2017
Author: NikaDevs

Drupal 8.x

Jango - is a multipurpose Drupal theme. It's fully responsive, has moduled structure. You will define what you want to use on your website. Our goal is to save time for our customers, we will work hard providing support, and making our theme better and better in future.

Images showed on the theme is only for demonstration.

Full Drupal Install with demo content

This instruction are for people that have experience manually installing Drupal and importing databases. If you do not feel comfortable performing these steps yourself, contact your server administrator for help. WARNING Do not import the provided SQL file into an existing Drupal database or you will lose all existing data.

Full Drupal installation comes without images, which was only for theme demonstration.

After purchasing theme, you will get a download package. Extract the archive somewhere on your computer.

Click here to watch the VIDEO INSTRUCTION OF INSTALLATION PROCESS or watch it below:


  1. Create a database for this installation of Drupal and import the SQL file Jango_database.sql. The PhpMyAdmin might be helpfull for managing your databases. If importing the Jango_database.sql file was unsuccessfull, please try to import the Progressive_database_alternative.sql
  2. Drupal_8 folder contains the whole struture which was generated by composer, so you can manage your drupal installation with the Composer (which is required for correct modules updates).
  3. Copy the entire contents of the Drupal_8 folder to the location on your web server where you want your site to be accessed. After this your website will be available as example.com/web. So if you don't wish to use /web prefix, then edit your server configuration or try to edit the .htaccess file.
  4. This instruction instruction might be helpful for configuring the /sites/default/settings.php
    Please find line 753 and edit the $databases array to match your server database settings: 
    $databases['default']['default'] = array (
  'database' => 'your_database_name',
  'username' => 'your_database_username',
  'password' => 'your_database_password',
  'prefix' => '',
  'host' => 'localhost',
  'port' => '3306',
  'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
  'driver' => 'mysql',
);
  5. Login to your site on the /user page, with the username Admin and the password Admin (first letter is CAPITAL) and visit admin/people to change the admin username and password.
  6. Go through the Drupal configuration found in admin/config options and update all the necessary information to reflect your website. Also be sure to visit /admin/config/media/file-system and update the Temporary directory.
  7. If you have any errors on the page, then usually this is mean that your server configuration doesn't fit the libraries which coming with our Full Drupal Installation. To fix this you should use the COMPOSER. Just install it and run composer update command. If it will fall then remove the vendor and core directory and the composer.lock file, and run this command again.
  8. Please keep in mind that it's required to use COMPOSER for installing and updating modules and all depended libraries.
    You can also try to use this module instead https://www.drupal.org/project/ludwig but anyway we (and drupal.org) recommend to use COMPOSER.
    Please keep in mind, what sometimes where can be conflicts (or bugs) in the composer, in this case try to search on the drupal.org for possible solutions, for example an issue updating from 8.5.1 to 8.5.2. The advice was to delete the vendor and core directory and the composer.lock file: Composer core update article

Installation for existing sites

Extract the downloaded theme archive somewhere on your computer.

Folders modules contain all described below modules.

 

The list of required modules:

  1. custom/Jango_cms - Jango theme module.
  2. custom/Jango_shortcodes - Jango Shortcodes.
  3. custom/nikadevs_cms - NikaDevs Main Functions.
  4. custom/nd_visualshortcodes - NikaDevs Visual Shortcodes.
  5. custom/jango_main_features - Jango Main Features (Import node types, views, settings and other data).
  6. dropzonejs - Functionality like "Media" in D7
  7. embed - Used in many fields.
  8. token - Token module (required by Pathauto).
  9. entity - Entity
  10. entity_browser - For Media Files.
  11. file_browser - Media files popup.
  12. file_entity File Entity
  13. shortcode - Shortcodes.
  14. ctools - Chaos tools
  15. inline_entity_form - Inline Entity Form
  16. entity_reference_revisions - Inline Reference Revisions
  17. entity_embed - Entity Embed
  18. libraries - Libraries
  19. state_machine - State Machine
  20. simplify_menu - US Courts Navigation
  21. views_flipped_table - Views Flipped Table
  22. views_load_more - Views Load More
  23. webform - WebForm

 

The list of optional modules which are integrated in this theme:

  1. admin_toolbar - Usefull administrion menu
  2. pathauto - Pathauto (SEO friendly URLs).
  3. tb_megamenu - Mega Menu.
  4. profile - Profile
  5. entity_reference_revisions - Entity Reference Revisions
  6. commerce - Commerce
  7. flag - flag (for Commerce)
  8. fivestar - Fivestar (for Commerce)
  9. address - Address (for Commerce)
  10. votingapi - Voting API (for Commerce)
  11. commerce_ext - Commerce ext (for Commerce)
  12. commerce_variation_cart_form - Commerce Variation Cart Form (for Commerce)
  13. custom/jango_commerce_features - Jango Shop Features (Import node types, views, settings and other data).
  14. md_slider - MD Meag Slider
  15. imce - Imce (for MD Mega Slider)

Installation process:

  1. Upload from theme_only folder custom to your site folder in /themes
  2. Upload from modules all required modules to your site in /modules folder.
  3. Upload from libraries all libraries to your site in /libraries folder, if it doesn't exists then create libraries folder at the root of your drupal folder.
  4. Go to the Modules page admin/modules and enable all required modules described above, for better experience please enable the theme modules listed from 1 to 5 at the second step.
  5. Go to admin/appearance enable the Jango Sub Theme theme and set it as the default theme. Make sure that you setup Seven as default admin theme.
  6. Check the Visual Shortcodes section to check how to configure this functionality.
  7. Dont forgot to read the Site Content section to understand how to work with website and how to use Visual Shortcodes. Because once you will enable the theme it will not looks like on our demo (for this you need to use the Full Drupal Installation).

    8. Installation Commerce:

    Please read the Commerce module page before installing it, because in Drupal 8 it can be installed via Composer. If you already have enabled Commerce module then you can only enable the Jango Shop Features module which will import all used in Jango theme nodes, views and other settings. You can try to enable Commerce without composer, for this replace Drupal_8/vendor folder with your vendor folder.

Import Content

  1. The Content Import was disabled on our Installation because currently Drupal 8 doesn't support this feature correctly. We tried to use the Default Content module and to use the Drupal core functions, but this import works only on the CLEAN drupal installation, without any nodes and blocks. This is mean that the content importing with theirs unique IDs, and if you have the same ID in your system then you will got Fatall Error.

Jango Sub Theme

Jango comes with a sub-theme called Jango Sub Theme that you can use to make customizations to the style and template structure of the parent theme without having to modify the parent theme itself. This is very useful then you will update the Jango theme as we release updates.

There is an empty stylesheet in /themes/custom/Jango_sub/css/__custom.css. Rename this file to custom.css and add your custom code on this file.

You can also copy any template file from the /themes/Jango/templates folder into the /themes/custom/Jango_sub/templates folder and drupal will use Custom theme template.

Site Content

Most of the site features stored in the blocks, so you can easily build your page using Layout Builder or Visual Shortcodes

All content is high flexible because it's controlled by Visual Shortcodes module. If you wish to create a Menu then you also should use our shortcodes, just create a block, click to add new Shortcode, select Menu shortcode, after this configure it as you wish. Now you can assign this block where you need, for example at the top and it will be showe on the page. The same thing regarding footer - you can create a Row shortcode, put inside Columns with required settings, and put inside them all required blocks, views or html code via Visual Shortcodes.

Layout Builder create only for controlling the whole page structure, so you can manage how is the regions (which contain drupal blocks) will looks at the page.

But also there is a pages with dynamical content, which you can edit in Management Pages.

They are controled by Views, so you can found and edit them on the Views Page: admin/structure/views

For example you want to create a new Gallery page with 3 Columns, and link to this page in Menu:

  1. Go to Main Menu settings page: admin/structure/menu/manage/main-menu
  2. Click on the Add Link button:

  3. Enter title Gallery and URL: gallery-3-column. Other settings leave by default. Click Save.
    The URL you can take from the View edit page:
  4. On the redirected Main Menu settings page, drag your item there you need and click Save Configuration.
  5. Now your item appears in the Header menu, and showed Gallery Items in 3 columns.

 

If you want to change URL to another, for example gallery:

  1. Go to Gallery 3 Cols settings page: admin/structure/views/view/gallery/edit/page_2
  2. Click on the Path link under Page Settings:

  3. Enter gallery in the textfield and click Apply.
  4. Now save settings by clicking the Save on the top right corner of the page.
  5. If you are already created menu link for this page, then use Edit link in front of the Porfolio menu link on the Main Menu settings page, to change URL to new Gallery.
  6. Please note what if you are showing some specific blocks or using layout of Layout Builder for this page, then you need to edit their Show on pages fields.

Shortcodes

Shortcodes are actually macros to be used in the text of contents. These macros change the text of the content and format the given part through the theme engine. Using them you can easy create complex elements such Accordion, Tabs, Quotes and others.

Then you edit textarea, select Text format to Shortcodes

You can manually add/edit any shortcode for each Text Format on it's configure page admin/config/content/formats.

Visual Shortcodes

This theme comes with amazing Visual Shortcodes module which allow you to add/edit/delete shortcodes without typing the code.

Important! You should open and save the Visual Shortcodes form at leasts ones and after this clear the Drupal cache. Before using this module open the settings page and configure it as you wish: admin/config/content/nd_visualshortcodes. The default settings is Enable for next Text Formats: shortcode_dynamic, Default HTML tag Format: full_html

If you don't see shortcodes on the list, then please open the Dynamic Shortcodes Text Format page admin/config/content/formats/manage/shortcode_dynamic and select all shortcodes at the Filter settings section, under Shortcodes tab.

  1. Autostart Visual Shortcodes editor - Visual Shortcodes will be automaticaly loaded and ready to work once the page will be loaded, so you don't need to click on the "Enable Visual Shortcodes" link.
  2. Confirm to delete shortcode - Will show up the confirmation window each time then you deleting any shortcode.
  3. Enable for next Text Formats - Visual Shortcodes will appears only for this formats.
  4. Default HTML tag Format - Configure which format will be used for HTML shortcode. By Default this is CKeditor format, which is configured to work with CKeditor, but you may install any other WYSIWYG editor.

Short description of main options:


To add new shortcode click on the add shortcode icon, and will be loaded window with all allowed shortcodes. You can also type shortcode name in the search field and all not related shortcodes will disappers. Click on the required shortcode and on the "Add" button:


Shortcode edit sections which appears then you clicked on the edit shortcode icon:

  1. Shortcode - Showed individual shortcode settings if they are exists.
  2. Paddings - Edit shortcode container paddings.
  3. Margins - Edit shortcode container margins.
  4. Classes & Animation - Here you can add extra classes, setup text align, block animation and block animaton delay.
  5. Border - Allow to setup border and border radius.
  6. Background - Allow to setup background color or background image.

Some shortcodes should be used in combination, so if you clicked to add shortcode inside those shortcodes, by default you will see shortcode which should be inserted:

  1. Accordion container - Accordion Item
  2. Pricing Table - Pricing Table Row
  3. Row for columns - Column
  4. Slider container - Slider
  5. Tabs container - Tab

One Page

First of all create new menu, or use your existing menu.

Configure the menu link URL with required anchor name, for example #About

After this create new block or page with shortcode Menu and select your menu name. Assign this block to the required region.

Now you can create the content using the Visual Shortcodes. For configuring the anchor name which you type in the Menu item URL field please click on the section Classes, ID, Animation and type the anchor name in the ID field.

Layout Builder

You can find Layout Builder on the Theme Setting page:

The video overview of main functions: YouTube

The Layout Builder allow you to create any structure for any page, using Drag and Drop elements.
You can configure default layout and layout for some specific page or pages.
Each layout have name and Show on Pages field, there you can enter any URLs there is this layout will be used.

Layout have 3 type of elements:

  1. Row - used for combining elements, also by default they styled in the theme with standart theme spacing.

    You can assign extra classes for styling, setup Paddings, change Tag type or disable it, and set this row as Full Width.

    If User row from Default Layout option selected, then LayoutBuilder will search in the Default Layout the Row with the same name and will use it settings and regions. This may be helpfull if you want to use the same Row in many pages, for example Footer.

  2. Regions - Theme regions, which can have a many blocks inside. Think about this like about grouping required blocks inside, or showing blocks which are the same on the all pages.
    To configure regions blocks visit default block settings page: admin/structure/block

    Region supports responsibility, and there is all list of options to configure how many columns it will take on any device, and if it will be showed/hidden.
    You can assign extra classes for styling, change Tag type or disable it, and select Animation with Delay of the animation.

Mega Slider

Please check the Mega Slider documentation here: Documentation/Mega Slider/index.html

Updating Process

Please be carefull when updating your Jango theme and modules to newest version, and always made Backups of code and database. Use this short instruction:

After copying new files you need to clear the Drupal cache: admin/config/development/performance.

Go to Changelog section, if there is announced changes by Features, then you need:

  1. Enable the module Features if it's not enabled.
  2. Go to main Features page: admin/structure/features
  3. Click on the NikaDevs section, select Jango Features feature and click Save Changes
  4. Sometimes there is a changes in the nodetypes or views, in this case you will see Needs review in the STATE column.
  5. Click on the Jango Features feature link. You will see a list of features with checkboxes. Select them all, or only which you need and click Revert components. Note what if you made some changes in this fields/views/image styles or other features, this operation will revert them.

Changelog

Version 1.4 - February 11, 2017

Release of the Drupal 8