-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Custom styling is impossible/impractical to use on recent versions #14548
Copy link
Copy link
Closed
Labels
area: ui/uxRelated to UI/UX, frontend code, accessibility, and user interactionRelated to UI/UX, frontend code, accessibility, and user interactiontype: bug
Description
Description:
Sometime in the last couple months, the theme.css stylesheet started being included in the HTML head before the regular app styles. This mean any CSS overrides flat out don't work because the regular app styles override them due to the cascading nature of CSS. Everything would have to be marked with !important, which is not only bad practice but makes some things unwieldy.
This was only noticed when attempting to upgrade our staging server to the latest version and everything broke.
Expected behavior:
For theme.css to be included after the app styles.
Example taken from previous version 0.73-0.74-ish:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/c90e6c507e2667c5c798501d269252d985f137ea.css?meteor_css_resource=true">
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/theme.css?6626f8819da72cb740cfd6a9af91316adc995c6d">Actual behavior:
theme.css is linked at the very top:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/theme.css?770b7bc6af2821d2fde376ea47511a38da38eafd">
<meta name="referrer" content="origin-when-cross-origin" />
<script>/* eslint-disable */ ...</script>
<!-- Way below that, right before <body> -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/42df66c3218cb59440a03e23f5f80f7b3265ef57.css?meteor_css_resource=true">Server Setup Information:
- Version of Rocket.Chat Server: 1.1.0-develop
- Operating System: Linux
- Deployment Method: Docker
- Number of Running Instances: 1
- NodeJS Version: 8
- MongoDB Version: 4
Additional context
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
area: ui/uxRelated to UI/UX, frontend code, accessibility, and user interactionRelated to UI/UX, frontend code, accessibility, and user interactiontype: bug