Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
novacrazy opened this issue May 18, 2019 · 5 comments · Fixed by #14623
Closed

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

novacrazy opened this issue May 18, 2019 · 5 comments · Fixed by #14623
Assignees
@tassoevan
Labels
type: bug ui/ux

Comments

@novacrazy
Copy link

novacrazy commented May 18, 2019 •
edited
Loading

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
@johnyb0y
Copy link

johnyb0y commented May 18, 2019 •
edited
Loading

Can confirm this on 1.0.3.
Using !important is my workaround on our custom stylesheet right now.

@novacrazy
Copy link
Author

Despite being purely cosmetic, this issue is blocking us from upgrading.

I would assume it would be a simple fix if Meteor made any sense.

@tassoevan tassoevan self-assigned this May 21, 2019
@ghost
Copy link

ghost commented May 24, 2019

Can this get fixed for 1.1.0?

@tassoevan tassoevan mentioned this issue May 24, 2019
Merged
@ghost
Copy link

ghost commented Sep 17, 2019

I'm still having this issue in 1.3.2. Custom CSS is linked before a bunch of <style> blocks including one with an .hljs theme which I am trying to override with a theme pasted in Custom CSS. https://zjzk.qonq.gq

@ghost
Copy link

ghost commented Sep 17, 2019 •
edited by ghost
Loading

This is even more of an issue because .hljs-tag is not explicitly themed but inherits from .hljs. So even though I made all rules of my desired theme !important, .hljs-tag is still inheriting from the default .hljs. Edit: no actually the rocket.chat one is explicitly styling .hljs-tag while the css i want to use relies on it inheriting.
Is there any way to remove or modify this hjls <style> directly? I'd rather not have to explicitly theme .hljs-tag beacuse there might be other things that inherit from the wrong .hljs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tassoevan tassoevan

Labels
type: bug ui/ux
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[FIX] Inject code at the end of <head> tag RocketChat/Rocket.Chat
3 participants
@tassoevan @novacrazy @johnyb0y