Fixes and tips after upgrading from Tiki Wiki version 24 to Tiki 25

_Last update: 27-04-2023_

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(https://doc.tiki.org/Tiki25) 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(https://doc.tiki.org/Tiki25).

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

1. Admin preferences
2. 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.

1. 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.

1. 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(https://doc.tiki.org/Customizing-Themes)

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".

: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:

@import "css-variables";
// Needs to be loaded after default variables to override them

After different fixes from (Gary(https://tiki.org/UserPagechibaguy), 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

--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.

header.navbar .navbar-light.bg-light {
    background: $brandmiddlegreen !important;
}

1. 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.

1. Modules and plugins
   1. 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

1. 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"}"

1. Navbar menu

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

1. CSS Tiki classes changes

The css class for language in Tiki24 and before was the international 2 letters. (ie: .he)
From Tiki25 the prefix "lang_" has been added (make it easier for search and filtering). (ie: .lang_he)

1. CSS Bootstrap classes changes
   1. 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.

1. 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.

1. 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.

1. 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"

1. Language class change

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

1. 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"

1. Embed Video class change

In boostrap4 to have a video embedded in a wiki page with a fluid size based on the ratio I used "embed-responsive embed-responsive-16by9"
In bootstrap5 this class has been removed and it need to be changed for "ratio ratio-16x9"
https://getbootstrap.com/docs/5.0/helpers/ratio/

1. Tips and tweaks
   1. 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:

.box-logo .tips {
    display: none
}

1. 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. 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)

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 ;
}

1. 2 modules menu with RTL languages (right to left)

For my existing Kindergarten solution(https://www.bernardsfez.com/Kindergarten_en);

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 !

1. Related links

• https://themes.tiki.org/Theme-Changes-in-Tiki-25
• https://themes.tiki.org/Creating-a-Tiki-theme
• https://doc.tiki.org/Customizing-Themes
• https://themes.tiki.org/CSS-Variables-in-Tiki
• https://themes.tiki.org/Pagetop-Styles-and-CSS-Variables
• https://dev.tiki.org/Improving-the-Tiki-Bootstrap-SCSS-File-Arrangement