Happy new year to all and especially to all the people that invested their time or money to produce a Tiki Wiki new version just before 2023 ! 🥂

While there are deep and heavy changes in this new version the team manage to make as easy as possible to jump from Tiki 24 to Tiki 25. There is a very long list of new features, options as well as revamp of areas and technologies change, but notably this version will integrate;

  • Update to Bootstrap 5
  • Update to Smarty 4
  • Update to Font Awesome 6
  • Preparations to definitely move Tiki to from PHP7.4 to PHP8.x
  • Preparations to move Tiki to from ElasticSearch to Manticore Search
  • Adding Markdown support
  • ... and so many more check.

 Freshness of the information
All the points below were added during test that started with Tiki 25 Beta and continuing with Tiki 25 Alpha, Tiki 25.0RC1 and finally with Tiki 25.0. Look at https://dev.tiki.org/tiki25 a detailed description of the upgrade timeline.

Additionally my Tiki wiki sites were then constantly updated using the Tiki Wiki Git repository. You can find instructions here: https://dev.tiki.org/Using-Git-with-Tiki.

Some of the issues and fixes may have been integrated into the Tiki Wiki code already by the time this list is published.

Changes or adaptation to fix display and screens on desktop and mobile

Admin preferences

Admin Language

I had to re-validate the Admin Language (and default language) else menu will be display the admin language and not the selected site language) Go to Settings, Control Panels, Global Setup, I18n, revalidate the "Default language" and "Default admin language" selector.

Inline editing icons (Wiki actions)

The action toggle selector "Edit Icons" disabled itself during my Tiki Wiki 25 upgrade. At Control Panels, Global setup, Editing and Plugins, Plugins, Edit plugin icons I had to re-enable "Only display focused edit icons (for sections and/or plugins) on request" to have them back.

Colors of navbar elements (custom theme Bootstrap classic layout)

''If needed consult the Tiki Wiki documentation on how to create, manage or compile a theme''

Using a custom theme with the bootstrap classic layout, I had issues with the top navbar colours (Admin and non-admin) lights and dark. Based on other examples I found in the theme folder (thank to Gary - https://tiki.org/UserPagechibaguy) I had to create and edit a new scss file to include those styles at "themes/yourtheme/scss/_css-variables.scss".

Navbar variables values
:root {
    --tiki-top-bg-light: #{$light};
    --tiki-top-light-color: #{$navbar-light-color};
    --tiki-top-light-link-color: #{$navbar-light-color};
    --tiki-top-light-link-hover-color: #{$navbar-light-hover-color};
.../...
}
''Note: Those variables are grabbed from my variable.css file but you can set instead of "#{$navbar-light-color}" an existing variable like "$primary" or #ccccc''

And make sure those are imported in my main theme scss:

New css-variable file import into the main css
@import "css-variables";
// Needs to be loaded after default variables to override them

After different fixes from (Gary, thanks 🙏) a default set of light and dark colors will be used when using the Bootstrap Classic layout.


I also find out some missing variables used in some case (Wiki pages VS Article pages). This may need to be fixed in the Tiki code but as a temporary measure I set in the

Missing navbar variables values (temporary)
--tiki-top-light-bg:  #{$light};
--tiki-top-light-link-hover-bg: #0000ff;
--tiki-top-light-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

You can also manually define the color is your scss file but it is less solid and more like hard-coding a colour for this specific area.

Manual override to set a missing navbar variables
header.navbar .navbar-light.bg-light {
    background: $brandmiddlegreen !important;
}

Top padding and margin

We have 2 parameters (variables) now to set the padding and margin of the header navbar. Those will affect the navbar height and logo resizing.

From the Control Panel, Look & Feel, Layout "Fixed-top navbar height" (this will add a padding-top style in the body) And a new top page variable variable for your css : $top-page-margin: 1rem;

The first one will control the header height and resize the logo (bootstrap classic layout only ?) The second will give space to the page content to avoid having the first elements glued to the bottom of the header area.

Modules and plugins

The logo and the Classic Bootstrap (fixed top navbar) layout

To use Classic Bootstrap (fixed top navbar) layout prior to Tiki 25 you had to set the site icon (navbar-brand img) on the Look and Feel control panel (tiki-admin.php?page=look#contentadmin_look-2) this was a kind of separate duplication on how to set the site identity with the Logo module. Now you can use the Logo module in the Settings, Modules control panel page (tiki-admin_modules.php), place it where needed (order) and that's it.

See: https://dev.tiki.org/item8249-Look-and-Feel-Logo-It-should-be-possible-to-set-the-logo-from-the-logo-module-without-enabling-site-logo-and-title

Plugin List tracker status filter

The filter parameter for trackeritem status in the plugin List series "{filter field=status field=o}" or "{filter field="status" field="o"}" is not working anymore. In Tiki 25 you have to use "{filter field="tracker_status" content="o"}"

Navbar menu

Menu collapse should be now set to yes so it is displayed properly on mobile (with the Classic Bootstrap layout only?)

CSS Bootstrap classes changes

No gutters class change

The css class for Bootstrap4 was "no-gutters" It is now "g-0" for Bootstrap 5 so I simply search and replace the class in my templates.

Font weight bold class change

The css class for Bootstrap4 was "font-weight-bold" It is now "fw-bold" for Bootstrap 5 so I simply search and replace the class in my templates.

Badge badge pill class change

To apply a badge button class for Bootstrap4 you have to set it as follow "badge badge-pill badge-danger" It is now "badge rounded-pill bg-danger" for Bootstrap 5 so I simply search and replace the class in my templates.

Small button requires now the bon default class

In Bootstrap4 this worked "btn-primary btn-sm" In Bootstrap5 it needs to be changed for "btn btn-primary btn-sm"

Language class change

In the HTML body, the multilingual class (tag) was changed from "he" to "lang_he"

Buttons popover change

In Bootstrap4 those worked "data-container, data-toggle, data-placement and data-content In Bootstrap5 they need to be changed for "data-bs-container, data-bs-toggle, data-bs-placement, data-bs-content"

Tips and tweaks

Hide the logo upload button

There is a non hide-able button icon to upload an image for the logo. While it is not good in general it is really annoying when using the Bootstrap Classic layout and even more when using a small device like a mobile phone.

You can hide it right away or after setting your logo picture by using the following in your SCSS file:

Hide the upload Logo button
.box-logo .tips {
    display: none
}

Mobile top menu (header navbar)

All the following can be debated and other may have their own solution. Take it as it is, my approach to solve issues with the Bootstrap Classic Layout for the header (top menu + logo) on 2 multilingual Tikis.

First I decided to avoid having 3 modules on my top header. While it could have been possible it was hardly tweaking the css (and eventually the templates) and I wanted to stick with a generic solution I could reuse. This knowing that by default, Tiki templates and styles have been "thought" using 2 modules (Bootstrap Classic Layout only ?). The team is aware of this situations and once Tiki25 will be stabilized with Bootstrap 5 they may be discussions and improvements.

...So I decided to have 1 or 2 modules only (may change if logged or not).

1 or 2 modules menu

In this case I have 1 module (logo) for anonymous and for admin I have 2 modules (logo and menu)

Screen Shot 2023 01 01 At 13.31.26 Screen Shot 2023 01 01 At 13.31.11 Screen Shot 2023 01 01 At 13.31.06

My CSS code (from my SCSS file)

// LTR fixes and corrections
// Changing the order of modules for mobile
// Menu | Logo
// Adjusting the margin for alignment vertical and horizontal (menu at the end)
header #top_modules .box-menu {
    order: 1 !important;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: initial;
    margin-right: initial;
}

header #top_modules .box-logo {
    order: 2 !important
}

// Reset the order of modules for desktop
// Logo | Menu
// Adjusting the margin for alignment vertical and horizontal (centering the menu)
@media (min-width: 768px) {
    header #top_modules .box-menu,
    header #top_modules .box-logo {
        order: initial !important;
        margin: auto;
    }
}

// Menu open on Mobile
// Cancelling the push up of the navbar-toggler when the menu is open
header #top_modules .box-menu .navbar {
    --bs-navbar-padding-y: initial !important ;
}

2 modules menu with RTL languages (right to left)

For my existing Kindergarten solution;

Case 2 Menu Case 2 Rtl Case2 Openmenu

header #top_modules {
    position: relative !important;
}

// Turn logo module to absolute so it didn't push the menu items on mobile (logo for en, fr and he)
header #top_modules .module.box-logo {
    position: absolute !important;
}

@media (min-width: 768px) {
    header #top_modules .module.box-logo {
        position: initial !important;
    }
}

header #top_modules .box-menu {
    width: 100% !important;
}

// Position the nambar toggler button for LTR
header #top_modules .box-menu button.navbar-toggler {
    margin-left: auto;
}

// Position the navbar toggler button for RTL (hebrew)
header #top_modules .box-menu button.navbar-toggler:lang(he) {
    margin-left: unset;
    margin-right: auto;
}

header #top_modules .box-menu .navbar-collapse.collapse.show {
    margin-top: 1rem;
}

header #top_modules .box-menu ul.navbar-nav {
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    header #top_modules .box-menu ul.navbar-nav {
        margin-right: 1rem !important;
    }
}

I hope this may help you upgrading your Tiki to version 25. Happy end of the year holidays and Happy new year 2023 !

Related links