It's easy with a WYNCHCO Template Design.
A WYNCHCO Template Design makes a website look great regardless of device and screen size.
Our unique WYNCHCO Template Design comprises:
- three Style Sheets,
- dozens of Custom Styles organised into groups,
- each of which can be changed in an instant via the website Dashboard,
putting control of your website's Look & Feel at your finger tips.
Change the appearance of your website with just a few mouse clicks.
Custom Styles
Each group of Custom Styles can be changed via your website's Dashboard.
Site
Change look and feel with just a few simple clicks.
Website Width
Fixed width (fill the screen width only on small screen devices).
Full width (fill the screen width on all devices).
Back to Top Arrow
Display: Yes or No.
Background colour.
Foreground colour.
Buttons
Background colour and opacity.
Text colour.
Corner radius.
Accordion Buttons
Background colour and opacity.
Text colour.
Page Break Tabs
Background colour and opacity.
Text colour.
Images
Corner radius.
Image filter (full colour, grayscale or sepia).
Fade in speed.
Margins (above and below images added to Articles and Custom Modules).
Input Boxes
Corner radius.
404 Page Not Found Screen
Change colour of Background and Text.
Display custom 404 Page Not Found image.
Site Offline Screen
Change colour of Background and Text.
Screen
Separately change Screen with just a few simple clicks:
- Landscape view.
- Portrait view.
Background Colour
Start colour.
End colour.
Gradient height.
Background Image
Display: Yes or No.
Display separate image in:
- Landscape view.
- Portrait view.
Select the image.
Position the image:
- Top-left.
- Top-right.
- Middle.
Repeat the image:
- Yes - Horizontal & vertical.
- Yes - Horizontal.
- NO.
Fill screen: Yes or No.
Fix screen: Yes or No.
Copyright Statement
Change colour of background and text.
Brand
Lots of options to choose from.
Where to begin?
Brand Background
Start colour.
End colour.
Top and bottom margin.
Top & bottom padding.
Corner radius.
Brand Banner
Display full screen banner image with text overlay.
Recommended image file format: WebP.
Site Title and Strapline
Display Site Title and Strapline in:
- Landscape view,
- Portrait view, or
- Both.
Site Title text.
Strapline text.
Padding.
Text weight (normal or bold).
Text colour.
Logo Image
Display logo: Yes or No.
Display either:
- SVG file, or
- any image file format.
Recommended image file format: WebP.
Display different logo image in:
- Landscape view.
- Portrait view.
Padding.
Corner radius.
Bottom margin.
Brand Modules
Display Brand Modules: Yes or No.
Adjust vertical position.
Same or different padding on devices in Portrait or Landscape view.
Image corner radius.
Masthead
Change look and feel with just a few simple clicks.
In Portrait View, display a Masthead image alongside or above the:
- Top Menu, or
- Menu.
Recommended image file format: WebP.
Link the image to a landing page.
Container
Separately change the appearance of the Container, Main Body and Base with just a few simple clicks:
- Landscape view,
- Portrait view.
Container
Background colour and opacity.
Gutters, padding and row-gap of Container positions.
Main Body
Gutters, padding and row-gap of Main Body positions.
Base A and Base B
Background colour and opacity.
Gutters, padding and row-gap.
Views
Change look and feel with just a few simple clicks.
Globally assign a View to all Modules published in a Template Position.
Options are:
- Landscape.
- Portrait.
- Both.
Example: Sidebar-Right Position
If the globally assigned View is Landscape then all Modules published in this Position will only be visible in landscape view.
In other words, when the website is viewed on large screen devices and tablets (landscape view).
But not on smartphones and tablets (portrait view).
Example: Breadcrumbs Position
- Above Articles.
- Below Articles.
- None.
Cards
Change look and feel with just a few simple clicks.
Assign a Card to a Position to change look and feel of Modules displayed in that Position.
Separately assign any one Card to any one Template Position:
- Top-a.
- Top-b.
- Sidebar-left.
- Sidebar-right.
- Main-top.
- Bottom-a.
- Bottom-b.
- Base-a.
- Base-b.
Custom Cards
Display the Default Card or one of three pre-configured CUSTOM Cards:
- Custom1 (Light Grey).
- Custom2 (Dark Grey).
- Custom3 (Black).
Change look and feel of Custom Cards.
Add more Custom Cards. Example: Custom4(Red).
We show you how in our Joomla! User Guide.
Default Card
Change look and feel with just a few simple clicks.
Background colour and opacity.
Title background colour and opacity.
Title text colour.
Title indentation.
Title weight.
Text and borders colour.
Corner radius.
Increase padding.
Link colour.
Button background colour and opacity.
Button text colour.
Columns
Change look and feel with just a few simple clicks.
Choose for each Position listed below whether to display Modules in 1, 2 or 3 columns.
Large Screen Devices
Sidebar-right Position.
Articles Modules.
Tablets
Sidebar-right Position.
Base-a Position.
Base-b Position.
Articles Modules.
Phones
Sidebar-right Position.
Base-a Position.
Base-b Position.
Articles Modules.
Articles
Change look and feel with just a few simple clicks.
Text and borders colour.
Heading colour.
Link colour.
Menus
Separately change look and feel with just a few simple clicks:
Horizontal Menus
Link background colour.
Link text colour.
Link border colour.
Link text alignment.
Dropdown gap.
Vertical Menus
Link background colour.
Link text colour.
Menu corner radius.
Menu padding.
Brand Menu
Link text colour.
Link text alignment.
Navbar Menus
Change look and feel with just a few simple clicks.
Navbar background colour.
Menu Links
Background colour.
Border colour.
Link background colour.
Link text colour.
Link border colour.
Link text alignment.
Dropdown gap.
Sub Menu Links
Sub Menu Link width (in Landscape view).
Bottom Menu Navbar
Choose either of two formats:
- Text + Background (same as other Navbars).
- Text Only.
Text Size
Change look and feel with just a few simple clicks.
Change Text Size for each category listed below:
- Prose (Button, Div, Input, Paragraph, Slider, Tab and Tags text).
- Breadcrumbs.
- Copyright.
- Headings.
- Menu Links.
- Navbar Menu Links.
Change Letter Spacing of all text.
Text Size on smaller screens can be quickly changed using a well-signposted USER.CSS style sheet.
Links Format
Change look and feel of Links:
- Font Weight and Underline.
- Underline on Hover.
Font Weight and Underline can be separately controlled:
- Articles & Custom Modules.
- Menus.
- Navbars.
- Site Title.
Headings Format
Separately change look and feel of H1, H2, H3 and h4 Headings:
- Font Weight.
Font Families
Change look and feel with just a few simple clicks.
You can separately change the Font Family for each of the following elements:
- prose,
- buttons,
- headings,
- menu links,
- navbar menu links,
- site title, and
- strapline.
We recommend using either:
- traditional web safe fonts, or
- self-hosted Google fonts.
We show how to change the Font Family used by each element in our Joomla! CMS Guide.
Google Fonts
WYNCHCO Templates enable the use of self-hosted Google font families, removing the need for browsers to make remote calls to the Google server every time a website page loads.
The resulting faster page load times help improve search engine marketing performance and user experience.
Risk of non-compliance with GDPR regulations is also reduced.
Font Awesome Icons
In addition, the default Joomla! CMS facilitates the use of the FontAwesome font family.
You can use Font Awesome Icons to signpost website elements including the Home Page menu link, external links, PDF links, and so on.
Accessibility
Text
WCAG 2.2 at Level AA requires that no loss of content or functionality should occur when 'WCAG metrics' are applied.
Change default value to 'WCAG metric' when you want to test for no loss of content or functionality.
Change default value of:
- Letter Spacing,
- Word Spacing,
- Paragraph Spacing, and
- Heading 2, 3 and 4 Spacing.
via the Template Styles screen of the Joomla! CMS Dashboard.
Change default value of:
- Line Height Spacing
via the annotated user.css style sheet included with our unique WYNCHCO Template.
Keyboard Focus Indicator
Change colour on focus for keyboard users.
Includes background colour of input field on focus for all users.
See how easy it is to change Look and Feel
A WYNCHCO Template Design enables you to change your website's Look and Feel in just a few simple mouse clicks.
Simply sign into your website's Dashboard and follow these steps.
Open the Site Template Styles screen
Select a WYNCHCO template
Example.
Select a Custom Style Tab
Example: Site.
Change a Custom Style
Example: Website Width.
Toggle between Fixed Width and Full Width to change the width of your website in the browser of large screen devices.
JOOMLERS.UK is sponsored by WYNCHCO Solutions
WYNCHCO Solutions help and support managers responsible for Joomla! CMS websites in UK business and third sector organisations across Cheshire, Greater Manchester, Merseyside and North West England.
