What is a Template?
A TEMPLATE is an extension which helps you 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
In this article we show you how to:
- install and preview a Template,
- change the Default Template,
- assign a Template,
- duplicate a Template,
- add Custom Styles, and
- uninstall redundant Templates.
We also explore:
- Positions & Position Maps,
- what to consider when changing template,
- working with Style Sets, and
- HTML Overrides.
SUBSCRIBERS please sign in to read complete article
