History: Pagetop Styles and CSS Variables

Source of version: 17 (current)

{DIV(class="lead")}__Motivation for these changes: Find a better way to style Tiki's mix of top/topbar elements and often nested navbars.__{DIV}

!! The arrangement of Tiki's navbars
The standard Bootstrap navbar element is normally a single navbar and isn't used in combination with another one. On the other hand, Tiki's top and topbar elements evolved from pre-Bootstrap portal-style layouts. The way Bootstrap is implemented in Tiki's page-top elements often puts one navbar element inside another -- one for the entire module zone, and often one for a menu contained in a module in that module zone. If both navbars, the outer and inner one, have solid-color backgrounds, and it's the same color, then there's no problem with appearance. But if a gradient or image is specified for the background, then the navbar-on-navbar effect is obvious and usually unattractive. 

Even if there were just one navbar, but it was contained in one or more divs that have content in addition to the navbar, there would still be a styling problem to deal with, involving color consistency, borders, shadows, and so on, this area.

!! Navbar colors also applied to parent divs
Some time ago, the parent divs of a navbar in the top module zone were given CSS classes such as -+bg-light-parent+- or -+bg-dark-parent+- . When the color preference of the navbar is switched in Look & Feel Admin, the colors of these parent divs are also switched, along with the colors of the navbar they contain, with the thinking that this is the desired behavior to prevent a patchwork of colors in these zones. (Of course this can be overridden by custom CSS or a theme stylesheet if desired.) That was one step to coordinate pagetop color styling.

!! The basic idea of tiki-pagetop_colors.scss
Assuming the navbar's parent divs and the navbar have the same color scheme, to prevent "gradient-on-gradient" or "bordered box or box-shadowed box inside bordered box or box-shadowed box," with -+ tiki-pagetop_colors.scss+- , the styling is applied only to the topmost or outermost element, such as -+.navbar.fixed-top+- in the Basic Bootstrap layout, and then any nested -+ div.bg-*-parent+- and the navbar itself is give a transparent background and borders and box-shadows are given a -+none+- value. 

A caveat here: The assumption with this discussion is that a common background color or treatment is wanted for the entire top module zone or topbar module zone. In the case of a design where the module zone has one background color or gradient or image and a menu in that module zone has a different one, then theme designer shouldn't import -+ themes/base_files/scss/tiki-pagetop_colors +- . The purpose of the file is to make uniform the background and foreground colors of the relevant divs and enable easy modification of these properties.

I found myself repeatedly writing a lot of CSS to style these page elements, especially when linear gradients or images are used for backgrounds. [[Show example code.] I asked myself why do I need to do this for every theme with this type of color scheme? Not only aftermarket or custom themes but also some in the Tiki package like Darkroom and FiveAlive, and some Bootswatch themes like Cerulean have potential "gradient on gradient" problems if special CSS isn't written to counteract it.
!! First step: tiki-pagetop_colors
I had earlier created an SCSS file for color-variant child themes like those in FiveAlive and FiveAlive-lite, to avoid having to write the same CSS color rules for each theme. I used the same idea for the pagetop colors file that could be used by any theme, and the color-variant child themes could also use this file. 

I made the file by collecting the "tiki-selectors" SCSS rules of themes that have relatively complex top and topbar zone color styles, and then simplified the rules, eliminating redundancies, and so on; initially this was just for background colors but then it was extended to cover background gradients and background images also. It addresses both top and topbar module zones (and parent divs) and both dark and light navbar options. (As of Bootstrap 5.2, the -+navbar-light+- and -+bg-light+- classes are retired, but are still used in Tiki unless there is a good reason to change.) 

!! Pagetop styles and CSS variables
As the -+tiki-pagetop_colors+- file was progressing, SCSS variables were used to set values for the properties, as with most of Tiki's theme files. But it was apparent that this would be a natural and very useful place to use CSS variables, which to be honest I was just starting to get a handle on, so this was really a learning experience for me. So I replaced the SCSS variables in this file with CSS variable equivalents, and found the location in the theme files to define the CSS variables. This was tested first with the Utopias theme and since then I'm working my way through the other themes.

Example of CSS variable use in themes/base_files/_tiki-pagetop_colors.scss:
{CODE(colors="css")}
// Topbar module zone and parent divs - dark color
.layout_basic .topbar_modules.bg-dark,         // Single Container layout -- Topbar, which probably includes another nav menu
.layout_classic .topbar.bg-dark-parent,           // Classic Tiki layout -- Parent of the topbar module zone
.layout_social .topbar-wrapper.navbar-dark-parent.bg-dark-parent     // Classic Bootstrap topbar wrapper
{
    background: var(--tiki-topbar-bg-dark) !important;
    color: var(--tiki-topbar-dark-color);
    a:not(.dropdown-item),
    .btn.btn-link  {
        color: var(--tiki-topbar-dark-link-color);
        &:hover {
            color: var(--tiki-topbar-dark-link-hover-color);
        }
    }
}
{CODE}
 
''Included page ((CSS Variables in Tiki)):''
{Include page="CSS Variables in Tiki"}
History: Pagetop Styles and CSS Variables

Source of version: 17 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: Pagetop Styles and CSS Variables

Source of version: 17 (current)
