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 css rule doesnt seem to work #12

Open
Parilia opened this issue Jan 27, 2025 · 1 comment
Open

Custom css rule doesnt seem to work #12

Parilia opened this issue Jan 27, 2025 · 1 comment

Comments

@Parilia
Copy link

Parilia commented Jan 27, 2025

I have been trying to change the colour of the active username for a converstion, It doesnt seem to change it.

.ConversationsList .people-list .UserListItem.active {
  background-color: #1e99a6;
}
@etfb
Copy link

etfb commented Feb 5, 2025

You're right - it seems to insert the custom CSS earlier in the forum.css file than the package's CSS. Fortunately you can use CSS rules to make it work: in your selector, change .people-list to #people-list and it should work. Explanation follows:

If you have HTML like this:

<body class="demo">
  <div id="aaa" class="bbb">
    <div class="ccc ddd eee">Hello</div>
  </div>
</body>

... then CSS like .bbb .ccc { color: pink; } will change the colour of the text as you expect. But if, later on, some other CSS says .bbb .ccc { color: yellow; } then your changes will be overridden.

However, CSS doesn't just follow a "last rule wins" algorithm. You can specify an element more than one way, and different ways have difference precedence. In particular, an ID ranks higher than a class, so if your earlier CSS said #aaa .ccc { color: pink; } then the later rule would not override it.

Other ways to increase precedence include adding more levels (body .bbb .ccc { ... }), specifying elements more exactly (.bbb .ccc.ddd.eee { ... } -- note the spacing there!) or as a last resort, using the !important modifier, which I recommend against because it makes debugging harder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@etfb @Parilia