Loading...
 
Skip to main content

Problem with custom theme stylesheet link in page source

  • Tracker item actions
Trackers
Items
Status
Pending
Subject
Problem with custom theme stylesheet link in page source
Version
27.x
Regression from 26.x to 27.x
master
Category
  • Regression
Feature
Theme: Look & feel, Styles, CSS, Theme Control Center
Resolution status
Please retest
Submitted by
Gary Cunningham-Lee
Lastmod by
Josue Zirimwabagabo
Rating
(2)
Description

I noticed that the the stylesheets of the themes I have in public/generated/_custom/shared/themes have an error in the console like "GET http://localhost . . . /public/generated/_custom/shared/themes/MyThemecss/MyTheme.css - HTTP/1 404 Not Found" The slash between the theme name and its css directory is missing. Looking at the page source, I see the theme stylesheet link twice. It's correct the first time it's called, as the third stylesheet link, but it's called again as the last stylesheet link, and this time it's incorrect (missing the slash).

The first instance of the link isn't necessary, and should be removed as far as I know. Then the path in the second instance, the last stylesheet link, should be corrected (the missing slash should be restored).

Also, I'm seeing a difference comparing one custom theme to another. Here's the page source of a theme that displays correctly:

Copy to clipboard
<link rel="stylesheet" href="themes/base_files/css/tiki_base.css" type="text/css">
<link rel="stylesheet" href="public/generated/js/vendor_dist/@fortawesome/fontawesome/all.css" type="text/css">
<link rel="stylesheet" href="public/generated/_custom/shared/themes/Shapely/css/Shapely.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/studio-42/elfinder/css/elfinder.min.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/studio-42/elfinder/css/theme.css" type="text/css">
<link rel="stylesheet" href="lib/openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="public/generated/js/vendor_dist/jquery-ui/dist/themes/flick/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery/jquery-timepicker-addon/dist/jquery-ui-timepicker-addon.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/npm-asset/select2/dist/css/select2.min.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/npm-asset/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/drmonty/smartmenus/css/sm-core-css.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/drmonty/smartmenus/css/jquery.smartmenus.bootstrap-4.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery-plugins/colorbox/example1/colorbox.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery-plugins/treetable/css/jquery.treetable.css" type="text/css">
<link rel="stylesheet" href="public/generated/_custom/shared/themes/Shapelycss/Shapely.css" type="text/css">


So the first link to the theme stylesheet is correct although the second one isn't, so the theme works correctly. I believe most of my custom themes have this pattern of links. And here is the page source of a theme that isn't working (its stylesheet is not being applied). I'm not sure yet if it's something I did that caused this weirdness (why is themes/default/ involved at all), or something in the build process, etc.:

Copy to clipboard
<link rel="stylesheet" href="public/generated/js/vendor_dist/@fortawesome/fontawesome/all.css" type="text/css">
<link rel="stylesheet" href="themes/default/css/default.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/studio-42/elfinder/css/elfinder.min.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/studio-42/elfinder/css/theme.css" type="text/css">
<link rel="stylesheet" href="lib/openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="public/generated/js/vendor_dist/jquery-ui/dist/themes/flick/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery/jquery-timepicker-addon/dist/jquery-ui-timepicker-addon.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/npm-asset/select2/dist/css/select2.min.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/npm-asset/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/drmonty/smartmenus/css/sm-core-css.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/drmonty/smartmenus/css/jquery.smartmenus.bootstrap-4.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery-plugins/colorbox/example1/colorbox.css" type="text/css">
<link rel="stylesheet" href="vendor_bundled/vendor/jquery-plugins/treetable/css/jquery.treetable.css" type="text/css">
<link rel="stylesheet" href="public/generated/_custom/shared/themes/Mondrianiccss/Mondrianic.css" type="text/css">


The pages that the theme is assigned for are using the "default" theme because that stylesheet has a correct link, and the second link is missing the slash between theme name and its css directory.

Update; Checking again after Benoit's question on Matrix, I see that the theme with the wrong URL is assigned by Theme Control, so I guess that's where the fix for the wrong URL is needed. Unrelated, the theme stylesheet does need to come last, not earlier in the loading of stylesheets, in order to override declarations in external scripts, etc.

Solution
Workaround
Importance
9
Easy to solve?
7
Priority
63
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
8635
Created
Friday 24 May, 2024 08:08:55 UTC
by Gary Cunningham-Lee
LastModif
Monday 05 May, 2025 19:27:53 UTC


Show PHP error messages