Progressive theme
Progressive is a premium theme that is used for my company 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
- Bugs
- Inventory
- Setting up the demo site
- Installation
- Content types
- Front pages
- MD Slider
- Using the subtheme
- Configuring subtheme appearance
- Blocks
- Views
- Shortcodes
- Operation
- Contact form
- Final word
Introduction
Progressive is a premium Drupal 7 and 8 theme (US$ 59) available from ThemeForest (a vendor on EnvatoMarket). 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.
The premium themes sold by ThemeForest are not conventional Drupal themes. They are more a sample websites that includes a theme and a lot of modules. I.e. the download bundle contains complete Drupal 7 and Drupal 8 demo sites, as well as a “theme only” directory. It uses the minimal profile.
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 theme is radically different from other Drupal themes in two ways:
- Page layout is done using a “Layout builder” that is part of the theme's settings.
- Content is styled using “shortcodes” (macros defines both text and format).
The following list of features is based upon the blurb:
- Parallax scrolling theme.
- Uses the latest HTML5 and CSS3 technologies.
- Contains 4 example homepages (really: 6).
- More than 80 UI elements.
- More than 50 pages with examples (total pages on demo site: 183).
- Retina ready (but not by default).
- 100 % responsive.
- Language switcher.
- Layout builder.
- Visual shortcodes.
- Built-in Ubercart shop.
- Includes CKEditor.
- Includes Bootstrap classes as part of the css, but does not use the Drupal Bootstrap bridge project.
- Includes MD Slider March 2013 (latest: 2.19 Nov. 2015)
- Includes Isotope 1.5.26 (latest: 3.0.5)
- Includes LivIcons 1.4 (latest: 2.4.379)
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
- 2018-03-20: Purchased ver. 1.7.
- 2018-04-02: Got patch for image style.
- 2018-04-06: Patched
progressive_cms.module
to add credits tofooter_copyright
block. - 2018-04-07: Published on Hannemyr.no.
- 2018-10-05: Downloaded ver. 1.8 (not yet merged in).
Diff ver. 1.7 vs ver. 1.8:
Licensing
: no changelicensing
: no changePSD
: no changed7/Documentation
: no changed7/Drupal_7/core
: updatedd7/Drupal_7/sites/all/libraries/
: no change.d7/Drupal_7/sites/all/modules/contrib
: updated, 4 projects deleted.d7/Drupal_7/sites/all/modules/md_slider/
: no change.d7/Drupal_7/sites/all/modules/nikadevs_cms/
: minor changes.d7/Drupal_7/sites/all/modules/progressive_cms/
: major changes.d7/Drupal_7/sites/all/themes
: minor changes todrupal.js
.d7/libraries
: no changed7/modules
: updatedd7/progressive_database*.sql
: Significant increase in sized7/theme_only
: minor changes todrupal.css
,drupal.js
and two templates.d8/*
: not analyzed
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:
- Backup 2018-03-31 07:55. After installation and after tweaking MD Slider.
- Backup 2018-03-31 09:15. After replacing references to duplicate images.
- Backup 2018-03-31 14:33. After configuring languages (Devel not yet installed).
Competitors
These are the sites of some of my competitors:
- Daniel Jackson
- EHD.uk
- Fjellvann
- Frontkom
- HermesThemes.com
- Imbera.no
- Netlife research
- Nettmaker.no
- Peytz.no
- Ramsalt Lab
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.tpl.php
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:
has a bad path to the sample image.Fixed locally, not reported.
Portfolio view
These views does not work:
- Portfolio 1 column
- Portfolio columns
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.
- # Administration menu (7.x-3.0-rc5)
- CKEditor (7.x-1.18)
- Chaos tool suite (7.x-1.14)
- Date (7.x-2.10)
- Entity API (7.x-1.9)
- File entity (7.x-2.16 weird .info)
- # Fivestar (7.x-2.2)
- # Flag (7.x-3.9)
- jQuery Update (7.x-3.0-alpha5)
- Libraries (7.x-2.3)
- Link (7.x-1.4)
- Media (7.x-2.16)
- Module Filter (7.x-2.1)
- Pathauto (7.x-1.3)
- Retina Images (7.x-1.0-beta5)
- Rules (7.x-2.10)
- Session API (7.x-1.0-rc1)
- Shortcode (7.x-2.26)
- TB Mega Menu (7.x-1.0-rc2)
- Token (7.x-1.7)
- # Ubercart (7.x-3.11)
- Universally Unique IDentifier (7.x-1.0)
- Views (7.x-3.18)
- Views Flipped Table (7.x-1.1)
- # Voting API (7.x-2.13)
- # Webform (7.x-4.16)
The following core module is enabled in addition to those enabled by the demo site:
- Shortcut
It contains 3 projects that is not on Drupal.org:
- MD Slider -
md_slider
(7.x-2.24) - Nikadevs Main Functions -
nikadevs_cms
(7.x-1.2) - Progressive theme module -
progressive_cms
(7.x-1.5)
Theme comes with four text formats:
- Shortcodes
- Plain text
- CKEditor
- 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:
- Create a new Drupal site.
- Copy the entire site into and below the webroot.
- Create an empty database, and import the sample site database into it using mysql.
- Enter the database credentials into
settings.php
. - Log on and change the Admin password.
- Disallow visitor registrations.
- Fix all the problems that show up in the status report, such as:
- File system and CTools CC Cache not writable.
- 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:
uc_credit
(Ubercart - credit card, trigger status error until site uses https).uc_cart
(deleting ubercart triggers error).uc_payment
.uc_attribute
.uc_order
.uc_product
(deleting ubercart triggers error).uc_store
.flag
(Produces product comparison icon in top menu).fivestar
.votingapi
.
Delete the following projects:
- Administration menu (7.x-3.0-rc5)
- Fivestar (7.x-2.2)
- Flag (7.x-3.9)
- Ubercart (7.x-3.11)
- Voting API (7.x-2.13)
Observations and tasks:
- 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.
- 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.
- The D7 demo site shipped with two identical copies of contributed project
views_flipped_table
. One inmodules
(core) and one insites/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:
- Add admin email address to Admin user profile and Site information.
- Enable additional modules:
- Help (core)
- Install additional modules:
- Backup and Migrate
- Devel
- EU cookie compliance
- Localization update
- Advanced help
- Transliteration (to help PathAuto with æøå)
- Define text format “Raw HTML5”.
- Set up regional settings: (Default country, etc.).
- Configure date and time to us ISO dates.
- Set recipient for contact form: navigate to . Subject will be “[Website feedback] phonenumber”.
- Add Norwegian language, disable French and German.
- Make sure translations directory is writable by the web server user.
- Update translations.
- Turn of off language switcher. First, navigate to , disable URL. Then, navigate to . Untick “Language block”.
- Translate some strings that is specific to the project (close, Search here, Call Us, Log In).
- Set up private path filesystem:
/home/gisle/db_backups
. - Make a manual backup.
Content types
Theme comes with nine pre-defined content types:
- Blog
- Client
- Gallery
- Page
- Partner
- People
- # Product (Ubercart)
- Project
- # Webform (Webform)
Those market with a “#” are created by the module indicated and goes away if that module is not installed.
Blog
[TBA]
Client
[TBA]
Gallery
[TBA]
Page
[TBA]
Partner
[TBA]
People
[TBA]
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 width of the image is set by the “Manage display” for the content type. It's inital image style “Project (1170 × 550)” caused clipping and right part of image being obscured by the slider text. Changed to “Halwidth (570 ×: auto)”.
- Link image to file.
- “Slider link” changed to “<Hidden>”.
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.
Front pages
The theme comes 6 example frontpages and is configured with content/home-creative
as the default frontpage.
- Creative
- Paralax
- Simple (Boxed)
- Business
- Animation
- 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.
- Slider animation.
- Carusel for highlighting products.
- Who we are
- Four images
- An region using Isotope with parallax background image
- Services (animated icons)
- Packages with parallax background image
- Posts + accordion thing
- Video background
- Bestsellers
- Welcome
- Meet the team
- Our partners
- Latest posts
- Footer
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:
- Latest Posts
- Video
- Promo section
- Services
Simple
This has a top slider. It also demostrates the parallax effect.
- Latest Posts
- Video
- Promo section
- Services
Business
This has a top slider, and makes use of the parallax effect.
- About Us
- Our team
- Services
- Portfolio
- Pricing
- Testimonals
- Contact Us
Animation
Home page that showcases different animations, including LivIcons.
One Page
The layout of this page is different from the rest.
- No coloured top menu (Language switcher, Compare list, …) that activates on hover.
- A different slider, named “
one-page
”.
Make site consist of a single page, with JavaScript navigation. Sections:
- Home
- About Us
- Team: Contains parallax demo
- Works: Contains Isotope demo
- Services
- Contact Us
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
or , and go to edit step.Recreating the front page animation
Images for the MD Slider Homepage are two different places in the D7 archive:
- Actual images:
sites/all/themes/progressive/img/content/slider/
. - Dummy images:
sites/default/files/
(used).
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.
- To configure Homepage slider: Tick “Fullwidth”. Set “Effect zone width” to 1200 and “Height” to 500.
- Slide 1: Change dimensions of
rs-slider4-img6.png
to 104 × 137. - Slide 4: Change “Stop Animation” for the two pigs to “Keep in slide”.
- Slide 4: Remove the first coin animation (the long one).
To make .png
editable in Photoshop with transparency
preserved:
- Pull image into Fireworks, save as PSD.
- Now you may use Photoshop to edit PSD.
- Use “Merge visible” to merge layers.
- 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
to use the GUI to configure the appearance of the subtheme. The vertical tab has the following five components:- Layout builder.
- Main settings.
- Google Map Settngs.
- Page not Found.
- Maintenance Page.
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:
- “Show on Pages”. Path to page(s) where the layout will be used (wildcards may be used).
- Tick to activate “One Page View”. This setting will replace the standard Main Menu with one that navigates within the page.
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.tpl.php
.
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.
There are two types of content you may add to a page using the layout builder:
- Row. A row is a main section, but does not have any content.
- Block. Content is defied elsewhere.
The layout builder partly overrides the standard GUI widget (found by navigating to
) 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.
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”)
- Skin: Pick theme base colour (7 options), visibility of “Language Block”, etc. in topmost menu in that colour.
- Shop Link: ???
- Shop Link, style list: ???
- Main phone: organization's phone number, appears in the main menu. This even goes for one page sites.
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:
- Comming [sic!] Soon. With countdown timer.
- Under Construction: Simpler.
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
.Blocks
Progressive lets you add extra settings for any blog available in the system block. Navigate to
and click on the cogwheel for the block you want to add settings for: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/progressive_shortcodes/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.
Contact form
Clicking “Kontakt oss” in the top meny scrools down to a contact form at the buttom of single page layout. However the legacy Drupal form is also there at this URL: https://hannemyr.no/contact. To edit it, navigate to , and click “list links” to the right of “Main menu”. Scroll down to the “Mega Menu” section, locate “Contact form” and click on “edit”. It looks like this menu section is the trainwreck of an legacy demo. It should be cleaned up, but make sure there is a backup.
Final word
[TBA]
Last update: 2018-10-06 [gh].