New Year 2018 present from CoalaWeb! Get 20% off for the entire month of January. More Info

Hours Guide

This guide will help you set up CoalaWeb Hours quickly and easily taking full advantage of all its features. When you install a CoalaWeb extension all the parts of the system will be installed at the same time making installing, upgrading and uninstalling a breeze.

Table of Contents

  1. Overview
  2. Updates
  3. Module Hours
  4. Need More Help?

Overview

CoalaWeb Hours gives users an easy way to display their support or opening hours. It's completely responsive harnessing the power of UIkit with desktop, tablet, and mobile layouts plus a tonne of other options. There are two versions available a Core (Free) and Pro (Paid Subscription) version that comes with extend functionality.

When installing all the parts of the system will be installed at the same time making installing, upgrading and uninstalling a breeze.
All CoalaWeb extensions have descriptions added to each input field which provide informative tooltips explaining it's purpose and use. To see one just hover over the form field label. [Figure-Tooltip]

Figure-Tooltip

Updates

The CoalaWeb Hours extension integrates with the inbuilt Joomla Update system so both Core and Pro users can keep their extension up to date. For Core users when you see updates listed in the Joomla update manager feel free to select it and update.

For Pro subscribers you will need to make sure you still have a valid subscription and that you have entered your Download ID into the System - CW Gears plugin. [Figure-11]

Not sure where to find your Download ID? Click HERE for more info.

Figure-11

Inside the CW Gears plugin options your will find a tab titled Updates and under it a Download ID input field. I recommend you copy and paste your Download ID into this field to reduce the risk of a typo and also to check for no spaces at the end. [Figure-11a]

Figure-11a

The CW Gears plugin will take care of the Download ID for any CoalaWeb extensions that doesn't come with a component.

Where can I find my Download ID?

To see your Download ID you will need to log into coalaweb.com and then go to:

Members -> My Subscriptions

You will then see the ID displayed in the module titled Download ID. [Figure-11b]

Figure-11b

TIP: To stop any typos I recommend copying and pasting the download ID and also to check for no spaces at the end.

Hours Module

The CoalaWeb Hours module has a huge list of options so we have broken them up into several sections which are explained in detail below.

General Options

To make it easy to explain I have broken this section up into 3 parts.

Part 1 General

The first few option in this section control how and if a title will be displayed such as it's text, format and for Pro users the option of an icon. If you are a Pro subscriber you will also have the option to display some Pre text after the title. If you do want to have some Pre text displayed just enter the text with out any HTML formating the module will take care of that for you. [Figure-1a]

Figure-1a

Part 2 Date & Time

If you are a Pro subscriber you get 5 date format options to choose from while Core user just get the default. For both Core and Pro users you get the choice of displaying the Time in either 12 hour time with am or pm displayed after it or 24 hour time the choice is yours. [Figure-1b]

Figure-1b

Part 3 Layout & Style

The first option is for Pro subscriber giving the option to choose 1 of 4 Panel styles.

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

The next three options are avaliable for both Core and Pro users and will affect the overall width of the module while viewing it on a Desktop, Tablet and Mobile. What you choose here will depend on a few things such as the module position and avaliable space. [Figure-1b]

Figure-1c

Hours Options

To make it easy to explain I have broken this section up into 4 parts.

Part 1 General

The first few option in this section are for Pro subscribers and they control if the Title and Hours icons should be displayed. [Figure-2a]

Figure-2a

Part 2 Layout - Default

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

In this section you can choose the Title and Hours formats plus how many columns you want to use with the added power to choose based on the size of the screen being used. You can for example have three columns on a nice big desktop screen and then one column on a small mobile device. [Figure-2b]

These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live.

If there are less items than columns the system will automatically adjust.

Figure-2b

Part 3 Layout - Inline [Pro]

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

Pro subscribers also get an Inline layout that comes with a text format option and Hours and Title alignment options. In this section your also get to choose the width by % for the Hours container with the added power to choose based on the size of the screen being used. You can for example have 40% on a nice big desktop screen and then 100% on a small mobile device. [Figure-2c]

Figure-2c

Part 4 Days

Note: If your site is multilingual leave text fields blank and use the language files or a language override.

In this section you set the specific information you want to be displayed for each of your avaliable Days. Pro users get seven options while Core get three. You can choose to turn a day on or off as well as set the text for the Title and Hours for example Monday - Friday and 9am - 5pm. [Figure-2d]

Figure-2d

Schedule Options [Pro]

To make it easy to explain I have broken this section up into 2 parts.

Note: If your site is multilingual leave text fields blank and use the language files or a language override.

Part 1 Sign

This options in this section affect the open/closed sign display at the top. You can choose to turn it on or off, it's size and a series of text options to be display at different times based on your schedule settings. [Figure-5a]

Figure-5a

Part 2 Day Schedule

In this section you have two closing and opening times per day which will control whether the sign will display open/break/closed. The time between the ending of the First Schedule and the starting of the Second Schedule will display as a Break. To not use the Second Schedule leave them blank. [Figure-5b]

Figure-5b

Holiday Options [Pro]

Each holiday has a series of options to help control when and how the holiday message will display. You can turn each holiday on or off, choose an icon type to be displayed with the title and the title and description text.

The last two options are the Start and End dates which will not only control the display of the holiday message but will also override the open/close sign setting it to closed throughout the holiday. [Figure-6a]

Figure-6a

Zones Options

To make it easy to explain I have broken this section up into 3 parts.

Part 1 General

The first few option in this section control how the Title, Date, Time and Zone text will be displayed such as their format and for Pro users the option of an icon can also be displayed for each of them. [Figure-3a]

Figure-3a

Part 2 Columns

Width Guide: Desktop = 960px, Tablet = 768px and Mobile = 480px

In this section you can choose how many columns you want to use with the added power to choose based on the size of the screen being used. You can for example have three columns on a nice big desktop screen and then one column on a small mobile device. [Figure-3b]

These settings are fully responsive which you can test by minimizing your browser screen on your desktop to simulate different screen sizes and see the changes live.

If there are less items than columns the system will automatically adjust.

Figure-3b

Part 3 Zones

Note: If your site is multilingual leave text fields blank and use the language files or a language override.

In this section you set the specific information you want to be displayed for each of your avaliable Zones. Pro users get three options while Core get two. You can choose to turn a zone on or off as well as choose the Title text and turn on or off the individual parts Date, Time and Zone. [Figure-3c]

The visitors time zone is determined by jsTimezoneDetect which does not do geo-location nor does it take into consideration historical time zones. If you think your visitors will be unhappy with their time zone being displayed for example as Europe/Berlin when the visitor is in fact in Europe/Stockholm you may want to set the visitor's zone to not display. Keep in mind from a modern time perspective they are identical.

Figure-3c

For Pro subscribers you get an additional Custom 1 zone where you can specify a time zone from the drop down list and then set up the other options as previously discussed. [Figure-3d]

Figure-3d

Advanced Options

The CoalaWeb Hours module also has a few of what I consider Advanced Options such as choosing which Uikit Prefix to use, the option to assign a Module Class Suffix or to choose whether to use Cache including the Cache Time. [Figure-4a]

Figure-4a

Need More Help

Do you have a question that wasn't covered by this GUIDE? Then it's time to drop by the Forum
Written by Steven Palmer Monday, 20 July 2015 Posted in Extensions, Hours

GET IN TOUCH

We will be glad to help you with any general or technical questions.