TikiCorp, a Theme for a Business or Organization Website
About this theme redesign for Tiki 29
Facilitating a variety of backgrounds
Compared to earlier versions of the theme, the overall page background image is toned down to improve the readability of the text that
overlays it, in light and dark color modes. Pages by default have a solid-color background behind content (the main page element), but this can be removed by assigning the page to the no-content-bg category.
Feedback is welcome
Comments, questions, and suggestions for improvement are welcome. Please post on the Tiki Matrix chat or in the Tiki themes forum.
The ideas described here can of course be used with any theme. More long-term, it would be great to have a library of component blocks to speed up creating page layouts in Tiki, if only for manual copy and past. Ideally, a page builder could be implemented for drag and drop editing of these blocks. But for now, copy and paste from theme and page code will have to do.
Easy Customization
CSS variables rather than SCSS compiling can be used to implement company or organization brand colors.
Color Modes by Default
Like with most Tiki themes, light and dark color modes are supported, and new color modes can be created by the site administrator.
Filling a Niche in Theme Styles
The Tiki package does include themes with a more straightforward look. TikiCorp adds a few flourishes.
Simplified Theme Files
Unnecessarily complex SCSS code has been simplified for easier understanding and theme modification.
Using the TikiCorp Theme
Examples of methods that can be used with any theme that has the classes and CSS variables defined and page content that uses them
Display content on the page background
To have a page where the content displays directly on the background image:
- Create a new Tiki category
no-content-bgand assign the page to this category, and - Specify
no-content-bgas one of the "Categories to add as CSS classes tobody" preference on tiki-admin.php?page=category. A rule in the Tikicorp stylesheet makes exceptions of these pages to the normal application of a background color to themainelement of the page.
Create color blocks when authoring pages
The TikiCorp stylesheet has support for special classes and CSS variables for applying color treatments to page content. These, which could be added in any theme, are:
- tiki-theme-block-light
- Light-background block (div or section) by default based on the theme's
$lightvariable. In dark color mode, the block's background will be relativelylight. - tiki-theme-block-dark
- Dark-background block by default based on the theme's
$darkvariable. - tiki-brand-block-light
- Block with a light background related to the site admin's brand color choice, maybe used less often but supported for completeness.
- tiki-brand-block-dark
- Block with dark background as specified by the site admin. Foreground colors can also be specified, or defaults used.
The CSS variables have default values but can be modified by the site admin as described at left, to match the branding colors, etc. of the site, but be mindful of the need to have good contrast between background and foreground colors of the site to meet WCAG accessibility guidelines.
Defining the CSS Variables
The background and foreground colors of some areas of the page can be decided on by the site admin and specified in the Look and Feel admin page, under the Customization tab, like this: :root, [data-bs-theme=light] { --tiki-brand-bg-dark: #191919; }. See the file /themes/tikicorp/scss/_css-variables.scss for all the CSS variables used here and how they are declared.
tiki-theme-block-light
This is a tiki-theme-block-light content block.
This is a link in this block.
This is a paragraph in a bordered box.
tiki-theme-block-dark
This is a tiki-theme-block-dark content block.
This is a link in this block.
This is a paragraph in a bordered box.
tiki-brand-block-light
This is a tiki-brand-block-light content block.
This is a link in this block.
This is a paragraph in a bordered box.
tiki-brand-block-dark
This is a tiki-brand-block-dark content block.
This is a link in this block.
This is a paragraph in a bordered box.