Loading...
Skip to main content
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: CSS Variables in Tiki
View published page
Collapse Into Edit Sessions
Source of version: 2
«
»
!! Background info on CSS variables {QUOTE()} Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., -+ ~np~--~/np~main-color: black;)+- and are accessed using the -+var()+- function (e.g., -+color: var(~np~--~/np~main-color);+- ). -- [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties] {QUOTE} See also: [https://css-tricks.com/a-complete-guide-to-custom-properties/] !! CSS variables in Bootstrap There were just 28 CSS variables in Bootstrap 4 ([https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables]). As of Bootstrap 5.2, this number, for root CSS variables, is up to approximately 70 ([https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables]). Root CSS variables have global scope. There are also component variables, with narrow scope, such as those used for [https://getbootstrap.com/docs/5.2/content/tables/#how-do-the-variants-and-accented-tables-work|tables] and [https://getbootstrap.com/docs/5.2/components/navbar/#css|navbars]. (I just recently became aware of these navbar CSS variables, so will look again at the Tiki CSS variables implementation to try to be as coherent as possible. !! The Tiki CSS variable syntax Just a short time ago we realized it would be useful to distinguish SCSS variables created specifically for Tiki from Bootstrap or other SCSS variables, so we decided on the -+$tiki-+- prefix, following luci's suggestion. I used the same pattern for our CSS variables, using -+ --tiki- +-. (The prepended two hyphens and appended single hyphen are the standard format for CSS variables.) So far, for the pagetop colors, we have these Tiki CSS variables: ~pp~ :root { --tiki-top-bg-light --tiki-top-light-color --tiki-top-light-link-color --tiki-top-light-link-hover-color --tiki-top-light-link-hover-bg --tiki-top-light-box-shadow --tiki-topbar-bg-light --tiki-topbar-light-color --tiki-topbar-light-link-color --tiki-topbar-light-link-hover-color --tiki-topbar-light-link-hover-bg --tiki-topbar-light-box-shadow --tiki-topbar-light-border --tiki-topbar-border-width ; // for light and dark topbars --tiki-top-bg-dark --tiki-top-dark-color --tiki-top-dark-link-color --tiki-top-dark-link-hover-color --tiki-top-dark-link-hover-bg --tiki-top-dark-box-shadow --tiki-top-dark-border --tiki-top-border-width --tiki-topbar-bg-dark --tiki-topbar-dark-color --tiki-topbar-dark-link-color --tiki-topbar-dark-link-hover-color --tiki-topbar-dark-link-hover-bg --tiki-topbar-dark-box-shadow --tiki-topbar-dark-border --tiki-static-top-light-border ;// this and the following, for Classic Tiki and Single Container layouts --tiki-static-top-dark-border } These are very explicit because they are used in the calculation of the site logo image; their scope is limited to header.fixed-top : header.navbar.fixed-top { --tiki-fixed-top-border-top-width --tiki-fixed-top-border-right-width --tiki-fixed-top-border-bottom-width --tiki-fixed-top-border-left-width --tiki-top-light-border-color --tiki-top-dark-border-color } ~/pp~ Related, we also have these for site title and subtitle, in fixed-top position (Basic Bootstrap layout) and static position (Classic Tiki and Single Container layouts) and their default values: ~pp~ --tiki-fixed-top-site-title-font-size: 1.8rem; // Fixed-top position (Basic Bootstrap layout) --tiki-fixed-top-site-title-font-weight: 700; --tiki-fixed-top-site-subtitle-font-size: 1.4rem; --tiki-fixed-top-site-subtitle-font-weight: 400; --tiki-site-title-font-size: 2rem; // Static position (Classic Tiki and Single Container layouts) --tiki-site-title-font-weight: 700; --tiki-site-subtitle-font-size: 1.5rem; --tiki-site-subtitle-font-weight: 400; ~/pp~ As the docs on CSS variables show, they need to be presented in an array. This array, in a theme's files, can/should be placed at the bottom of the theme's variables file. This positions the -+:root +- array at the beginning of the theme CSS file, where it needs to be, and also after the SCSS variables are defined, which CSS variables often require. This example is from FiveAlive/Orange: {CODE(style="css")} // CSS variables / custom properties for base_files/scss/_tiki-pagetop_colors.scss -- Interpolation info from https://developersink.com/css/css-custom-properties-sass-variables/ // Background images (actual images or CSS gradients, etc.), if assigned, override background colors. :root { --tiki-top-bg-light: linear-gradient(to right, #c44a23 0%,#c64b23 10%,#dc5823 34%,#e96023 58%,#f06423 87%,#f06423 100%); --tiki-top-light-color: #{$navbar-light-color}; --tiki-top-light-link-color: #{$navbar-light-link-color}; --tiki-top-light-link-hover-color: #{$navbar-light-link-hover-color}; --tiki-topbar-bg-light: #{$topbar-light-color}; --tiki-topbar-light-color: #{$topbar-light-color}; --tiki-topbar-light-link-color: #{$navbar-light-link-color}; --tiki-topbar-light-link-hover-color: #{$navbar-dark-link-hover-color}; --tiki-top-bg-dark: linear-gradient(to right, #c44a23 0%,#c64b23 10%,#dc5823 34%,#e96023 58%,#f06423 87%,#f06423 100%); --tiki-top-dark-color: #{$top-dark-color}; --tiki-top-dark-link-color: #{$navbar-dark-link-color}; --tiki-top-dark-link-hover-color: #{$navbar-dark-link-hover-color}; --tiki-topbar-bg-dark:#{$topbar-dark-bg}; --tiki-topbar-dark-color: #{$navbar-dark-color}; --tiki-topbar-dark-link-color: #{$navbar-dark-link-color}; --tiki-topbar-dark-link-hover-color: #{$navbar-dark-link-hover-color}; } {CODE} !! Look & Feel customization To redefine one or more of the CSS variables, currently it works to input the variable name and the new value in the Look & Feel admin customization text area, inside the -+:root +- array. This could also be in a custom.css file. !! Future possibilities * A dedicated Look & Feel "CSS Variables" text area provided so that just the variables could be entered and the root array syntax would be added on the backend. * New Tiki CSS variables in addition to those for pagetop colors -- what other Tiki page elements should easy customization be enabled for? * Site color controls (or other controls) available to site users on the public side, such as for dark mode, like switching themes but not needed a page refresh -- [https://pedromarquez.dev/blog/2022/7/dark-mode-css] !! References: * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties * https://css-tricks.com/a-complete-guide-to-custom-properties/ * https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/ * https://getbootstrap.com/docs/5.2/customize/css-variables/ * https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables * https://pedromarquez.dev/blog/2022/7/dark-mode-css
History
Enable pagination
rows per page
HTML diff
Side-by-side diff
Side-by-side diff by characters
Inline diff
Inline diff by characters
Full side-by-side diff
Full side-by-side diff by characters
Full inline diff
Full inline diff by characters
Unified diff
Side-by-side view
HTML diff
Side-by-side diff
Advanced
Information
Version
Mon 04 of Sep, 2023 07:04 GMT-0000
Gary Cunningham-Lee
Added CSS variable for non-link text color in top and topbar zones.
12
Fri 23 of Jun, 2023 05:31 GMT-0000
Gary Cunningham-Lee
Updated information.
11
Thu 22 of Jun, 2023 09:13 GMT-0000
Gary Cunningham-Lee
Added more content.
10
Fri 16 of Jun, 2023 15:06 GMT-0000
Gary Cunningham-Lee
Trying a CSS variable for tabs panelbgcolor parameter.
9
Mon 29 of May, 2023 10:23 GMT-0000
Gary Cunningham-Lee
Removed "--tiki-admin-navbar-bg", which is no longer used.
8
Mon 29 of May, 2023 07:57 GMT-0000
Gary Cunningham-Lee
Updated with recently added variables, etc.
7
Fri 19 of May, 2023 16:49 GMT-0000
Gary Cunningham-Lee
Minor text change.
6
Fri 19 of May, 2023 16:40 GMT-0000
Gary Cunningham-Lee
Minor text changes.
5
Fri 19 of May, 2023 16:38 GMT-0000
Gary Cunningham-Lee
Removed some unneeded tags.
4
Fri 19 of May, 2023 16:36 GMT-0000
Gary Cunningham-Lee
Updated with information for upcoming Tiki 26.
3
Thu 02 of Feb, 2023 15:28 GMT-0000
Gary Cunningham-Lee
Opening section moved to Pagetop Styles and CSS Variables
2
Sun 11 of Dec, 2022 11:38 GMT-0000
Gary Cunningham-Lee
Page created and CSS info moved from Pagetop Styles and CSS Variables
1
Select action to perform with checked...
Remove
OK
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Tiki_org_family_customizations_CSS
Included themes
Bootstrap component sets
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
BookStacked
Make an SCSS-Compiled Tiki Theme
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 27x
Wed 24 of Apr, 2024 11:12 GMT-0000
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000