Skip to content

Custom styling is impossible/impractical to use on recent versions #14548

@novacrazy

Description

@novacrazy

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

This may have something to do with #14015 or #13953

Metadata

Metadata

Assignees

Labels

area: ui/uxRelated to UI/UX, frontend code, accessibility, and user interactiontype: bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions