What is a Template?
A TEMPLATE is an extension but not any old extension.
It enables you to control the appearance of your website.
APPEARANCE = LAYOUT + LOOK & FEEL.
LAYOUT
YOU control LAYOUT when you make decisions about CONTENT and NAVIGATION STRUCTURE, including deciding in which POSITION to publish MODULES.
WYNCHCO templates help you in this task by means of implementing the Bootstrap Grid System which is included with the Joomla! CMS.
Introducing the Bootstrap Grid System
Note: Span in the image below = Bootstrap Size in the Joomla! CMS.
When assigned to a website Module, Bootstrap Size determines Module width.
The Bootstrap Grid System is comprised of 12 columns across the screen.
The grid is responsive, meaning the columns will re-arrange in response to the screen size.
For example, content displayed:
- in three columns side by side on a large screen (PC & Tablets in landscape view) but
- stacked one on top of the other in a single column on small screens (Phones & Tablets in portrait view).
The 12 columns can all be used individually, but it is more practical to combine groups of them, making a small number of wider columns, as illustrated in the above image.
Examples
When you set the Bootstrap Size of of a Module to 12 then it will fill the available width in the Position to which the Module is assigned.
Set the Bootstrap Size to 6 and it will fill one half of the available width.
Set the Bootstrap Size to 4 and it will fill one third of the available width.
Set the Bootstrap Size to 3 and it will fill one quarter of the available width.
Read more: Change the width of Modules.
LOOK & FEEL
YOU control Look & Feel by means of the user friendly interface included with every WYNCHCO template.
This user friendly interface is made possible through the combined use of XML and PHP.
WYNCHCO templates also combine the use of HTML and CSS Style Sheets to fine tune what your website looks like.
And from this mass of code we distill for you a compendium of STYLE SETS, or combinations of styles.
The combination of a user friendly interface and STYLE SETS is very empowering.
It enables you to change Look & Feel with just a few simple clicks.
We show you how in our separate article.
Read more: How to change Look & Feel.
CSS Style Sheets
template.css & more.css
These Style Sheets contain most of the building blocks which determines website appearance.
media.css
This Style Sheet is provided to enable you to more easily change the Look & Feel of your website.
For example, you can quickly access and change the global settings which control:
- the appearance of text, and
- when content published in template Positions is visible (by device and /or screen size).
diy.css
This Style Sheet is provided to enable you to:
- add your own custom styles, and
- apply these styles when editing website content.
How to access CSS Files
Follow these steps.
Open the TEMPLATES screen
Select Extensions > Templates > Templates from the menu at the top of your website's control panel.
Select Templates and the Template to be edited
Select CSS to view CSS files
SUBSCRIBERS
Sign in to read complete article.
Contents include:
How to install and preview a Template.
How to change the Default Template.
What to consider when changing template.
How to uninstall redundant Templates.
How to duplicate a Template.
Introducing HTML Overrides.
How to assign a Template to a Menu Link.
POSITIONS & Position Maps.
Introducing STYLE SETS.
POSITION Style Sets.
MODULE Style Sets.
IMAGE Style Sets.
CUSTOM Style Sets.
QUICK FIX Style Sets.
SUBSCRIBE to PERSONAL & LOCAL Joomla! CMS Support
Work smarter NOT harder!
We coach, help and support managers of businesses and organisations across Cheshire, Manchester, Merseyside, North West England and the UK.
Learn how to manage a Joomla! website.
SUBSCRIBERS: Sign in to use complete guide
