Progressive theme

by Gisle Hannemyr

Progressive is a premium theme that is used for my compamy website: hannemyr.no. This chapter describes have to re-create the demo site, and the tweaks used to create my site.

Table of contents

Introduction

Progressive is a premium Drupal 7 and 8 theme (US$ 59) available from ThemeForest (a vendor on Envato­Market). It first became available in 2014. It is available for several WCMSes (WordPress, Magento, Joomla). The Drupal version is developed by NikaDevs. Support forum: Ticksy.

New versions may be downloaded after support has expired. The changelog can be found by scrolling down the product page.

The online demo contains a lot of stock photos not included in the download bundle, probably for copyright reasons. The names are the same, so they are simple to get hold of to get a local demo site up and running, but need to be replaced to make a production site legal.

The download bundle contains complete Drupal 7 and Drupal 8 demo sites, as well as a “theme only” directory. It uses the minimal profile.

The theme is radically different from other Drupal themes in two ways:

  1. Page layout is done using a “Layout builder” that is part of the theme's settings.
  2. Content is styled using “shortcodes” (macros defines both text and format).

The following list of features is based upon the blurb:

MD slider comes with a Drupal module (version 7.x-2.24). Isotope and Livicons lives in d7/theme_only/progressive/js/. Neither is updated from 1.7 to 1.8.

The package comes with some documentation (but not enough). In addition, the sample site is filled up with examples of markup. This sample content can be explored via the Sitemap. Copy, do not delete to preserve templates.

Logs

Diff ver. 1.7 vs ver. 1.8:

I.e. the core and included contributed modules are updated to reflect the state at the time of release. Except for the progressive_cms and sql, there are only minor changes.

Backup log:

Competitors

These are the sites of some of my competitors:

Bugs

CKEditor and visual shortcodes

Visual shortcodes and using CKeditor to edit text contained in the text area may be a great idea, but produced bogus markup. Take the following (it produces an animated progress bar):

[progress percent="58" color="red" extra_classes="border-radius hover"]
[html]Wordpress[/html]
[/progress]

The result of editing with CKEditor is:

[progress percent="58" color="red" extra_classes="border-radius hover"]
[html 0="" format="ckeditor" different_values="0"]<p>Wordpress</p>[/html]
[/progress]

… and the percentage no longer shows when the bar is rendered.

Not reported.

Font

Out of the box, CSS is set up to use the font Arimo. It is free, but it is not included. Arimo metrically compatible with Arial and does not have true italics.

I've modified html.html.twig in the the subtheme (progressive_sub) to use the following fonts from Google:

<link href="//fonts.googleapis.com/css?\
  family=Source+Sans+Pro:300,300i,400,400i,600,600i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?\
  family=Source+Code+Pro:400,700" rel="stylesheet">

Make sure the URLs are on one line.

Animations

The demo site animations: Elements » Animations has a bad path to the sample image.

Fixed locally, not reported.

Portfolio view

These views does not work:

In addition, the page view for 4 columns was set to 6 columns.

Quick fix is to remove the filter “Content: Date” from the filter critera, and set the correct number of columns.

Fixed locally, reported.

(Please note that I broke most of the portfolio views demo pages by editing the view. Unable to get it working again. Need to start from scratch to make it work.)

Inventory

The ver. 1.8 demo site uses 26 projects that exists and is maintained on Drupal.org- Those tagged “#” are not installed on my site.

  1. # Administration menu (7.x-3.0-rc5)
  2. CKEditor (7.x-1.18)
  3. Chaos tool suite (7.x-1.14)
  4. Date (7.x-2.10)
  5. Entity API (7.x-1.9)
  6. File entity (7.x-2.16 weird .info)
  7. # Fivestar (7.x-2.2)
  8. # Flag (7.x-3.9)
  9. jQuery Update (7.x-3.0-alpha5)
  10. Libraries (7.x-2.3)
  11. Link (7.x-1.4)
  12. Media (7.x-2.16)
  13. Module Filter (7.x-2.1)
  14. Pathauto (7.x-1.3)
  15. Retina Images (7.x-1.0-beta5)
  16. Rules (7.x-2.10)
  17. Session API (7.x-1.0-rc1)
  18. Shortcode (7.x-2.26)
  19. TB Mega Menu (7.x-1.0-rc2)
  20. Token (7.x-1.7)
  21. # Ubercart (7.x-3.11)
  22. Universally Unique IDentifier (7.x-1.0)
  23. Views (7.x-3.18)
  24. Views Flipped Table (7.x-1.1)
  25. # Voting API (7.x-2.13)
  26. Webform (7.x-4.16)

The following core module is enabled in addition to those enabled by the demo site:

  1. Shortcut

It contains 3 projects that is not on Drupal.org:

  1. MD Slider - md_slider(7.x-2.24)
  2. Nikadevs Main Functions - nikadevs_cms (7.x-1.2)
  3. Progressive theme module - progressive_cms (7.x-1.5)

Theme comes with four text formats:

  1. Shortcodes
  2. Plain text
  3. CKEditor
  4. Dynamic Shortcodes

Setting up the demo site

The bundle contains a complete demo site (with dummy content). Building on this seems to be the best starting point for creating a productioin site based upon this theme. To set up the demo site for the first time, do as follows:

  1. Create a new Drupal site.
  2. Copy the entire site into and below the webroot.
  3. Create an empty database, and import the sample site database into it using mysql.
  4. Enter the database credentials into settings.php.
  5. Log on and change the Admin password.
  6. Disallow visitor registrations.
  7. Fix all the problems that show up in the status report, such as:
    • File system and CTools CC Cache not writable.
  8. Move the subtheme out of the themes/progressive directory: Disable, clear cache, move, enable.

Before deleting Ubercart, read: How to Delete an Ubercart Product Content Type.

Disable and uninstall the following modules:

  1. uc_credit (Ubercart - credit card, trigger status error until site uses https).
  2. uc_cart (deleting ubercart triggers error).
  3. uc_payment.
  4. uc_attribute.
  5. uc_order.
  6. uc_product (deleting ubercart triggers error).
  7. uc_store.
  8. flag (Produces product comparison icon in top menu).
  9. fivestar.
  10. votingapi.

Delete the following projects:

  1. Administration menu (7.x-3.0-rc5)
  2. Fivestar (7.x-2.2)
  3. Flag (7.x-3.9)
  4. Ubercart (7.x-3.11)
  5. Voting API (7.x-2.13)

Observations and tasks:

  1. The version number for Progressive theme module is kept version 1.5 after significant changes from ver. 1.7 to ver. 1.8. There is no record of version number in the distro.

  2. All Drupal components was up-to-date after installing, but this was probably because I downloaded just days after the release of version 1.7 (2018-03-08). Be prepared to update Drupal core and contribs after installing.
  3. The D7 demo site shipped with two identical copies of contributed project views_flipped_table. One in modules (core) and one in sites/all/modules (contrib). This bug is fixed in ver. 1.8.

When reinstalling the database to start a fresh demo site, make sure you clean out the database first so that tables from additional modules are dropped.

Installation

After the demo site has been set up, to adapt it to my own purposes, do the following:

Content types

Theme comes with nine pre-defined content types:

  1. Blog
  2. Client
  3. Gallery
  4. Page
  5. Partner
  6. People
  7. # Product (created by Ubercart)
  8. Project
  9. Webform

Blog

[TBA]

Client

[TBA]

Gallery

[TBA]

Page

[TBA]

Partner

[TBA]

People

[TBA]

Product

This content type is created by Ubercart and goes away if Ubercart is disabled.

Project

The “project” content type is used for the various portfolio displays on the demo site. I use it to showcase successful pojects.

The aspect ratio for the project images are 37 × 27. This is a legacy from the demo site.

Changes to “Manage display” from the demo:

The slider text (i.e. the fields “Slider Title” and “Slider Body”) is flicks for each slider change, but remains the same. Presentation of type should be changed to make the text specific to each slider image.

Webform

[TBA]

Front pages

The theme comes 6 example frontpages and is configured with content/home-creative as the default frontpage.

  1. Creative
  2. Paralax
  3. Simple (Boxed)
  4. Business
  5. Animation
  6. One Page

The slider is used for all, except “Paralax” and “One Page”, is named homepage.

The 6 example frontpages are described below.

Creative

This is the richest home page.

The video used for the video background is this 2011 Volvo commercial from YouTube. It is created by using the shortcode [styledcontainertype …] (Frame container). It has an “Advanced Background” pull-down that let you set a video background.

Paralax

This does not have a top slider. Instead, the top region holds a product carousel with 12 product, defined in Views.

The next four regions demostrates parallax effect with pictures of female models as background images. These are:

Simple

This has a top slider. It also demostrates the parallax effect.

Business

This has a top slider, and makes use of the parallax effect.

Animation

Home page that showcases different animations, including LivIcons.

One Page

The layout of this page is different from the rest.

Make site consist of a single page, with JavaScript navigation. Sections:

It has the alias content/about-us-0 since there already exists a page with title “About us”.

MD Slider

This is a responsive and customisable slider module with touch-swipe navigation and powerful timeline manager. You can add text, image or video to the slider.

User manual at MegaDrupal.com.
Short tutorial (3:45 min) on YouTube.

Suport ticket (requires login):
Fullwidth:
match if screen matches
bigger screen: top + bottom chopped
smaller screen: left + right shopped

Not fullwidth:
Always match

Basic configuration:

Slider title:
This title is just for the administrator to identify the slideshow.
Description:
Type description of slider here. It will show in the administrator interface.
Fullwidth:
This is quite counterintutive. If it is not ticked, background image is always scaled to match screen width. If it is ticked, background is also scaled, but it may also be chopped. If the viewport is wider than the background image, top and bottom may be chopped. If the viewport is more narrow than the background image, left and right may be chopped. Ticking this lets you pick a smaller width for the effect zone.
Width:
Insert your slider or effect zone width (pixels). The effect zone is the zone in the middle of the image where the effects appear. It may be smaller than the full widt of the background image.
Height:
Insert your slider height (pixels). Make sure background images are scaled to this dimension.
Create image style for slide background:
This function helps you to automatically create image according to your slideshow size. If you have pixel perfect image for slider and don't need automatically created image, uncheck this box. (This option is not available when you enable slider fullwidth)
Slide animation:
Choose animation to your slide
Enable touch swipe:
if you want to navigate slide on touch device, check this box
Enable responsive:
if you want your slider to be automatically fit to wrapper (the original proportion is remained), check this box
Loop:
Check if you want slider start over when reaching last item.
Loading bar:
Enable/disable your slider loading bar
Navigation:
show next, previous arrows, play button... Here you can choose bullets and thumnails position too.
Border style:
Click and choose border style for your slider
Slide delay:
milliseconds between slide transitions
Slide's translation time:
speed of the transition (in milliseconds)
Google Web Fonts:
Add google font to use on your slider. If you've already add those fonts to your theme, check "Do not add fonts to theme".

Click Create or Save, and go to edit step.

Recreating the front page animation

Images for the MD Slider Homepage are two different places in the D7 archive:

The names are the same, so by copying the actual images into the directory holding the used images, you can recreate the demo site animation. However, I've replaced some of the images (mug, pc, poster) with my own variants. The poster is a different size than the original.

  1. To configure Homepage slider: Tick “Fullwidth”. Set “Effect zone width” to 1200 and “Height” to 500.
  2. Slide 1: Change dimensions of rs-slider4-img6.png to 104 × 137.
  3. Slide 4: Change “Stop Animation” for the two pigs to “Keep in slide”.
  4. Slide 4: Remove the first coin animation (the long one).

To make .png editable in Photoshop with transparency preserved:

  1. Pull image into Fireworks, save as PSD.
  2. Now you may use Photoshop to edit PSD.
  3. Use “Merge visible” to merge layers.
  4. Save as .png.

Using the subtheme

Progressive comes with an empty sub-theme called Progressive SubTheme that you can use to make customisations to the style and template structure of the parent theme without having to modify the parent theme.

To use custom css in the sub-theme, rename css/__custom.css to css/custom.css and uncomment the declaration of it in progressive_sub.info.

Configuring subtheme appearance

Navigate to Apperance » Settings » Progressive SubTheme to use the GUI to configure the appearance of the subtheme. The vertical tab has the following five components:

Note that each of the five vertical tabs (described below) also include panels to alter the global settings (“Toggle display”, “Logo image settings”, “Shortcut icon settings”).

Layout builder

The layout builder allows you to create page structures using drag and drop elements. It assumes a 12 column layout.

It partly replaces the Drupal concept of “Regions” with “Rows”, as it lets you lay out content blocks horizontally in a “Row”.

I've cloned the layout “One page” to create “HNM One page”. This is the layout used on my site.

After selecting a layout, clicking on the large cogwheel in the upper right corner take you to “Layout settings” for the layout curently selected. Here you can specify:

The main menu includes a horizontal bar in the theme colour line with the Language Switcher and some other icons. Neither of these will appear if “One Page View” is activated.

If “One Page View” is activated, the menu will be automatically generated using the Rows names from Layout Builder. The logic for this is in progressive-cms-menu.html.twig. To see the “Row Settings”, click on the small cogwheel for thre row. If you want to have a Row in the layout, but don't want to show it name in the menu you tick the checkbox “Hide title from Menu” to hide it.

lb_row_settings4.png

There are two types of content you may add to a page using the layout builder:

The layout builder partly overrides the standard GUI widget (found by navigating to Structure » Blocks) to assign blocks to regions. Blocks that are assigned no region will still appear on the assigned page if they are assigned to a visible row in the layout builder.

If you click on the cogwheel for a block you get a dialogue named “Region settings”. The “Region size”, “Left push”, “Right pull”, “Left offset” and “Visibility” all let you set different values for different devices, named: phone, tablet, desktop, wide. In the screenshot below, the block will take up all 12 columns on a phone, 6 columns on a tablet and 3 columns on a desktop PC. The setting for the device type named “wide” is “Auto”, meaning it will adjust to the space available.

lb_region_settings1

The last four settings: “Paddings”, “Tag & Class”, “Animation” and “Prefix & Suffix” are the same for all devices.

Main settings

This is for setting the the theme (“skin”)

Google Map Settings

Let you set the ”Google Maps API Key“.

Information at Google: Get API Key.

Grønlandsleiret 61c coords: 59.9096 10.7680.

Page not found

Let you pick the page to show for 404-errors, and edit the text to show.

Maintenance Page

There two to choose from:

There is a bug when loading. If you don't get the “Countdown time” field for “Comming soon”, toggle between the two.

The background images used on these pages are managed by Configuration » Manage CMS » Page backgrounds.

Blocks

Progressive lets you add extra settings for any blog available in the system block. Navigate to Structure » Blocks and click on the cogwheel for the block you want to add settings for:

lb_row_settings4.png

You can select Animation for extra attention, assign extra classes for styling, and change the Title Tag Type and the Block Tag Type. [However, shanging Title Tag Type from H1 to H2 has no effect - it may be overconstrained. Changing the shortcode type from "Page header" into "H2" has effect, but container disappears. Not reported as a bug, yet.]

I've hacked one of the blocks that is defined in progressive_css.module.xxxx

Views

The demo site uses Views to produce miscellaneous portfolio displays of the content type “project” where the “category” tag is used to classify the project.

The theme also bundles a fairly ancient version of the Isotope library (version 1.5.26, the latest version is 3.0.5). It is somehow integrated with the portfolio Views, but exactly how this is done is not documented.

For now, cloning views from the demo lets you use this. To clone a view, first clone it the GUI and then copy and rename its template. See also: Editing the View template.

Shortcodes

To embedding content into pages, the designer is expected to use “shortcodes”. These are square-bracket delimited macros to be used in the text of contents, to change the text of the content and format the given part through the theme engine. Shortcodes originated with WordPress, but there exists an API for Drupal that allows Drupal modules to implement shortcodes.

The shortcodes implemented by Progressive is not documented anywhere, but their internals are exposed through the source code that can be found in progressive_cms/progres­sive­_short­codes/progressive_shortcodes.module. The internals are also exposed through the GUI, due to the Visual shortcodes feature. In addition, it may be that some of the WordPress documentation applies to the Drupal implementation.

Below are some shortcode examples extracted from the demo content, with my own notes on usage:

Layout

Shortcode for a column-wrapper, indicating how many columns to use for the four types of devices.

[col phone="12" tablet="6" desktop="6" wide="6" different_values="0"]…[/col]

Note that “wide” is usually set to “Auto”. This setting just omits it from the shortcode.

Images and documents

[image fid="167" img_rounded="0" zoom="0" different_values="0" image_style="medium"
  caption="" type="caption"]
[/image]

Patch to specify image style was given on 2018-04-02.

Video

[TBA]

Audio

[TBA]

Miscellaneous

Accordions:

[accordions multi_collapse="1" different_values="0"]
…
[/accordions]

If the multi_collapse attribute is set, accordions do not auto-close when a new is opened.

Read more button:

[button link="#"]
[html 0=""]Read more[/html]
[/button]

Operation

Setting a site based upon Progressive to “Maintenance Mode” have no effect before cache cleared.

Final word

[TBA]

Last update: 2018-10-06 [gh].