humhub · marc-farre · Dec 18, 2025 · Dec 18, 2025
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -4,6 +4,7 @@ Changelog
 2.5.5 (Unreleased)
 -----------------------
 - Fix #404: `.row` HTML elements without `.container` overflow
+- Fix #405: Various styling fixes since migration to Bootstrap 5
 
 2.5.4 (December 12, 2025)
 -------------------------

diff --git a/resources/css/humhub.wiki.css b/resources/css/humhub.wiki.css
@@ -3,19 +3,14 @@
   --hh-wiki-text-color-control: var(--hh-text-color-soft);
   --hh-wiki-link-color-page: #ec4332;
   --hh-wiki-link-color-page-missed: #4cc159;
-  --hh-wiki-icon-color-add: #4cc159;
-  --hh-wiki-icon-color-delete: #ec4332;
-  --hh-wiki-icon-color-history: #ff8a00;
-  --hh-wiki-icon-color-permalink: #7880dd;
-  --hh-wiki-icon-color-back: var(--hh-text-color-main);
   --hh-wiki-bg-color-input: #F3F3F3;
   --hh-wiki-bg-color-diff-added: #d4fcbc;
   --hh-wiki-bg-color-diff-deleted: #fbb6c2;
   --hh-wiki-bg-color-highlight-info: rgba(33, 161, 179, 0.12);
   --hh-wiki-bg-color-highlight-warning: rgba(255, 193, 7, 0.12);
   --hh-wiki-border-color-dragdrop-marker: #000;
   --hh-wiki-border-color-main: #AEAEAE;
-  --hh-wiki-border-color-main-600: lighten(#AEAEAE, 20%);
+  --hh-wiki-border-color-main-600: #e1e1e1;
   --hh-wiki-border-color-content: #eee;
   --hh-wiki-border-color-subpages: #ddd;
   --hh-wiki-border-radius: 4px;
@@ -323,12 +318,12 @@
 .layout-content-container .wiki-content ul.wiki-page-list .page-title > div {
   display: flex;
   overflow: hidden;
+  margin-left: -6px;
 }
 .layout-content-container .wiki-content ul.wiki-page-list .page-title > div .page-title-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--hh-wiki-text-color-title);
 }
 .layout-content-container .wiki-content ul.wiki-page-list .page-title > div > i.fa {
   padding: 3px 2px;
@@ -432,22 +427,6 @@
 .layout-content-container .wiki-page-history-title .fa {
   font-size: 14px;
 }
-.layout-content-container .wiki-content .new {
-  color: var(--hh-wiki-icon-color-add);
-}
-.layout-content-container .wiki-content .delete {
-  color: var(--hh-wiki-icon-color-delete);
-}
-.layout-content-container .wiki-content .history {
-  color: var(--hh-wiki-icon-color-history);
-}
-.layout-content-container .wiki-content .fa-link {
-  color: var(--hh-wiki-icon-color-permalink);
-  margin-right: 4px;
-}
-.layout-content-container .wiki-content .back {
-  color: var(--hh-wiki-icon-color-back);
-}
 
 @media (max-width: 575.98px) {
   .wiki-page-content {
@@ -461,11 +440,9 @@
   display: block !important;
 }
 .wiki-page-content-header h3 {
-  float: left;
   font-size: 28px;
+  line-height: 28px;
   white-space: nowrap;
-  margin: 0 30px 0 0;
-  padding: 0 0 0 15px;
 }
 .wiki-page-content-header h3, .wiki-page-content-header h3 a {
   color: var(--hh-wiki-text-color-title);
@@ -593,9 +570,6 @@
 #category_list_view .drag-icon:not(.visible) {
   visibility: hidden;
 }
-#category_list_view .drag-icon .fa {
-  font-size: 11px;
-}
 
 .wiki-page-sidebar {
   padding-right: 0;
@@ -623,10 +597,7 @@
   }
 }
 .wiki-page-sidebar .wiki-page-content-header h3 {
-  font-size: 28px;
   font-weight: 600;
-  padding: 0;
-  margin: 5px 0;
 }
 .wiki-page-sidebar .wiki-page-content-header h3, .wiki-page-sidebar .wiki-page-content-header h3 a {
   color: var(--hh-wiki-text-color-title);
@@ -636,9 +607,7 @@
   margin: 0;
 }
 .wiki-page-sidebar .wiki-page-content-header .btn-add-page {
-  float: left;
   padding: 4px 6px;
-  margin: 9px 0 0 9px;
   line-height: 9px;
 }
 .wiki-page-sidebar .wiki-page-content-header .btn-add-page:active {

diff --git a/resources/css/humhub.wiki.min.css b/resources/css/humhub.wiki.min.css
diff --git a/resources/css/humhub.wiki.scss b/resources/css/humhub.wiki.scss
@@ -10,19 +10,14 @@ $wiki-mobile-grid-breakpoints: 520px;
     --hh-wiki-text-color-control: var(--hh-text-color-soft);
     --hh-wiki-link-color-page: #ec4332;
     --hh-wiki-link-color-page-missed: #4cc159;
-    --hh-wiki-icon-color-add: #4cc159;
-    --hh-wiki-icon-color-delete: #ec4332;
-    --hh-wiki-icon-color-history: #ff8a00;
-    --hh-wiki-icon-color-permalink: #7880dd;
-    --hh-wiki-icon-color-back: var(--hh-text-color-main);
     --hh-wiki-bg-color-input: #F3F3F3;
     --hh-wiki-bg-color-diff-added: #d4fcbc;
     --hh-wiki-bg-color-diff-deleted: #fbb6c2;
     --hh-wiki-bg-color-highlight-info: rgba(33, 161, 179, 0.12);
     --hh-wiki-bg-color-highlight-warning: rgba(255, 193, 7, 0.12);
     --hh-wiki-border-color-dragdrop-marker: #000;
     --hh-wiki-border-color-main: #AEAEAE;
-    --hh-wiki-border-color-main-600: lighten(#AEAEAE, 20%);
+    --hh-wiki-border-color-main-600: #{lighten(#AEAEAE, 20%)};
     --hh-wiki-border-color-content: #eee;
     --hh-wiki-border-color-subpages: #ddd;
     --hh-wiki-border-radius: 4px;
@@ -445,13 +440,12 @@ $wiki-mobile-grid-breakpoints: 520px;
                 > div {
                     display: flex;
                     overflow: hidden;
+                    margin-left: -6px;
 
                     .page-title-text {
                         overflow: hidden;
                         white-space: nowrap;
                         text-overflow: ellipsis;
-
-                        color: var(--hh-wiki-text-color-title);
                     }
 
                     > i.fa {
@@ -591,29 +585,6 @@ $wiki-mobile-grid-breakpoints: 520px;
             font-size: 14px;
         }
     }
-
-    .wiki-content {
-        .new {
-            color: var(--hh-wiki-icon-color-add);
-        }
-
-        .delete {
-            color: var(--hh-wiki-icon-color-delete);
-        }
-
-        .history {
-            color: var(--hh-wiki-icon-color-history);
-        }
-
-        .fa-link {
-            color: var(--hh-wiki-icon-color-permalink);
-            margin-right: 4px;
-        }
-
-        .back {
-            color: var(--hh-wiki-icon-color-back);
-        }
-    }
 }
 
 @include media-breakpoint-down(sm) {
@@ -628,11 +599,9 @@ $wiki-mobile-grid-breakpoints: 520px;
     padding: 10px 10px;
 
     h3 {
-        float: left;
         font-size: 28px;
+        line-height: 28px;
         white-space: nowrap;
-        margin: 0 30px 0 0;
-        padding: 0 0 0 15px;
 
         &, a {
             color: var(--hh-wiki-text-color-title);
@@ -809,10 +778,6 @@ $wiki-mobile-grid-breakpoints: 520px;
         &:not(.visible) {
             visibility: hidden;
         }
-
-        .fa {
-            font-size: 11px;
-        }
     }
 }
 
@@ -844,10 +809,7 @@ $wiki-mobile-grid-breakpoints: 520px;
         border: none;
 
         h3 {
-            font-size: 28px;
             font-weight: 600;
-            padding: 0;
-            margin: 5px 0;
 
             &, a {
                 color: var(--hh-wiki-text-color-title);
@@ -860,9 +822,7 @@ $wiki-mobile-grid-breakpoints: 520px;
         }
 
         .btn-add-page {
-            float: left;
             padding: 4px 6px;
-            margin: 9px 0 0 9px;
             line-height: 9px;
 
             &:active {

diff --git a/resources/js/humhub.wiki.CategoryListView.js b/resources/js/humhub.wiki.CategoryListView.js
@@ -270,19 +270,19 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
     CategoryListView.prototype.initDragButtonHoverDelay = function() {
         const HOVER_DELAY = 1000;
         const dragClass = '.wiki-page-control.drag-icon';
-    
+
         this.$.find('.page-title').each(function () {
             const $item = $(this);
             const $dragBtn = $item.find(dragClass);
-    
+
             let timer = null;
-    
+
             $item.on('mouseenter', function () {
                 timer = setTimeout(() => {
                     $dragBtn.addClass('visible');
                 }, HOVER_DELAY);
             });
-    
+
             $item.on('mouseleave', function () {
                 clearTimeout(timer);
                 $dragBtn.removeClass('visible');

diff --git a/resources/js/humhub.wiki.bundle.js b/resources/js/humhub.wiki.bundle.js
@@ -664,19 +664,19 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
     CategoryListView.prototype.initDragButtonHoverDelay = function() {
         const HOVER_DELAY = 1000;
         const dragClass = '.wiki-page-control.drag-icon';
-    
+
         this.$.find('.page-title').each(function () {
             const $item = $(this);
             const $dragBtn = $item.find(dragClass);
-    
+
             let timer = null;
-    
+
             $item.on('mouseenter', function () {
                 timer = setTimeout(() => {
                     $dragBtn.addClass('visible');
                 }, HOVER_DELAY);
             });
-    
+
             $item.on('mouseleave', function () {
                 clearTimeout(timer);
                 $dragBtn.removeClass('visible');

diff --git a/views/page/_view_body.php b/views/page/_view_body.php
@@ -31,7 +31,7 @@
 <div class="wall-entry-controls social-controls">
     <?= ContentObjectLinks::widget([
         'object' => $page,
-        'seperator' => '&middot;',
+        'seperator' => ' &middot; ',
     ]) ?>
 </div>
 

diff --git a/views/page/edit.php b/views/page/edit.php
@@ -12,6 +12,7 @@
 use humhub\modules\wiki\widgets\WikiLinkJsModal;
 use humhub\modules\wiki\widgets\WikiPagePicker;
 use humhub\modules\wiki\widgets\WikiPath;
+use humhub\widgets\bootstrap\Alert;
 use humhub\widgets\bootstrap\Button;
 use humhub\widgets\form\ActiveForm;
 use humhub\widgets\form\ContentHiddenCheckbox;
@@ -64,12 +65,13 @@
 
                 <?= $form->field($model, 'latestRevisionNumber')->hiddenInput()->label(false); ?>
                 <?php if ($requireConfirmation) : ?>
-                    <div class="alert alert-danger">
-                        <?= Yii::t(
+                    <?= Alert::danger(Yii::t(
                             'WikiModule.base',
                             '<strong>Warning!</strong><br><br>Another user has updated this page since you have started editing it. Please confirm that you want to overwrite those changes.<br>:linkToCompare',
-                            [':linkToCompare' => Button::asLink(Yii::t('WikiModule.base', 'Compare changes'))->icon('arrow-right')->action('compareOverwriting', $diffUrl)->cssClass('text-danger')],
-                        ); ?>
+                            [':linkToCompare' => Button::asLink(Yii::t('WikiModule.base', 'Compare changes'))->icon('arrow-right')->action('compareOverwriting', $diffUrl)->cssClass('link-danger')],
+                        ))
+                        ->closeButton(false)
+                        ->style('display: block !important') // Prevent the POST action to hide the alert box ?>
                     </div>
                     <?= $form->field($model, 'backOverwriting')->hiddenInput()->label(false); ?>
                     <?= $form->field($model, 'confirmOverwriting')->checkbox()->label(); ?>

diff --git a/widgets/views/menu.php b/widgets/views/menu.php
@@ -20,9 +20,7 @@
 
     <?php if (!empty($entries)) : ?>
         <?= Html::beginTag('div', $options) ?>
-            <button class="btn btn-info btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"">
-                <span class="caret"></span>
-            </button>
+            <button type="button" class="btn btn-sm btn-accent dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
             <ul class="dropdown-menu dropdown-menu-end">
                 <?php foreach ($entries as $entry) : ?>
                     <li><?= $entry->render(['class' => 'dropdown-item']) ?></li>

diff --git a/widgets/views/pageListItemTitle.php b/widgets/views/pageListItemTitle.php
@@ -24,8 +24,11 @@
 ?>
 <?= Html::beginTag('div', $options) ?>
     <div>
-        <?= Button::asLink()->icon('arrows')->cssClass('wiki-page-control drag-icon')->visible($item && $showDrag) ?>
-        <?= ($icon ? Icon::get($icon) . ' ' : '') . Html::tag($url ? 'a' : 'span', Html::encode($title), ['href' => $url, 'class' => 'page-title-text']) ?>
+        <?= Button::asLink()->icon('arrows')
+            ->cssClass('wiki-page-control drag-icon link-icon-only')
+            ->visible($item && $showDrag) ?>
+        <?= ($icon ? Icon::get($icon) . ' ' : '') ?>
+        <?= Html::tag($url ? 'a' : 'span', Html::encode($title), ['href' => $url, 'class' => 'page-title-text']) ?>
         <?php if ($titleInfo) : ?>
             <span class="page-title-info"><?= $titleInfo ?></span>
         <?php endif; ?>

diff --git a/widgets/views/wallEntry.php b/widgets/views/wallEntry.php
@@ -18,7 +18,7 @@
                 : $content ?>
         </div>
 
-        <?= Button::asLink(Yii::t('UiModule.base', 'Read more'), Url::toWiki($wiki)) ?>
+        <?= Button::asLink(Yii::t('UiModule.base', 'Read more'), Url::toWiki($wiki))->cssClass('link-accent') ?>
     </div>
 
 </div>
diff --git a/widgets/views/wikiPath.php b/widgets/views/wikiPath.php
@@ -16,7 +16,7 @@
 $pathLength = count($path);
 ?>
 <div class="wiki-page-path wiki-page-path-length-<?= $pathLength ?>">
-    <?= Link::to('', Url::toHome($page->content->container))->icon('home')->id('wiki_index') ?>
+    <?= Link::to('', Url::toHome($page->content->container))->icon('home')->cssClass('link-icon-only')->id('wiki_index') ?>
     <span class="wiki-page-path-categories">
     <?php foreach ($path as $i => $categoryPage) : ?>
 

diff --git a/widgets/views/wikiSidebar.php b/widgets/views/wikiSidebar.php
@@ -27,8 +27,10 @@
     <div class="panel-body">
         <?php WikiContent::begin(['cssClass' => 'wiki-page-content']) ?>
         <div class="wiki-page-content-header clearfix">
-            <h3><?= Link::to(Html::encode($settings->module_label), Url::toLastEdited($contentContainer)) ?></h3>
-            <?= Button::accent()->icon('fa-plus')->link(Url::toWikiCreate($contentContainer))->cssClass('btn-add-page')->sm() ?>
+            <div class="d-flex align-items-end gap-3 py-2">
+                <h3 class="m-0 p-0"><?= Link::to(Html::encode($settings->module_label), Url::toLastEdited($contentContainer)) ?></h3>
+                <?= Button::accent()->icon('fa-plus')->link(Url::toWikiCreate($contentContainer))->cssClass('btn-add-page my-1')->sm() ?>
+            </div>
             <?= WikiSearchForm::widget(['contentContainer' => $contentContainer]) ?>
             <div class="wiki-page-content-header-actions">
                 <?= Button::accent(Yii::t('WikiModule.base', 'Last edited'))->sm()->link(Url::toLastEdited($contentContainer))->cssClass('d-lg-none') ?>