List of CSS elements which should have a class

[tessus]

@laurent

Perhaps we could build a list of what elements should have a class to get a sense of what’s needed.

I'll update this list when other elements come to mind. This post is a wiki, so anyone can add something to it.

Preferences -> Encryption -> E2EE text

Background color, text color, link color

Banner

(Could probably share the same class as E2EE banner)

Internal Notes & files

You can currently select between external and internal links, but there is no way to select and separate Joplin notes from internal files such as a .txt.

Tags

Tags editor

• a class for single tags

Tags list

• single tag class (there is the .tag-list class, but to select a single tag in CSS .tag-list span has to be used, as of right now)

Command palette

---

Done

Search Bar

Done. classname: .search-bar

• The containing div has no attributes other than style, I was trying to align it to right side but was unable to get any style to apply using CSS attribute selectors. Not 100% sure having a class would fix this but would at least make it clear that it can't be done without so much trial and error.

• Both the <input ...> element and the link within this div also lack a class.

• These are the only objects inside <div class="header" ...> without a class.

Local search

Done. classname: .note-search-bar

Tag List Tags

Done. classname: .tag-list span

Background for the tag list bar appears to be controlled by the class .tag-list. However for the tags themselves the containing <span> has no attributes other than style.

Solved:

Share your CSS

Bright Tags If you want to brighten up the tags on the tag bar this css will assist. It also rounds the corners of the tags. userchrome.css div.tag-list span { border-radius: 5px; color:white !important; background: blue !important; } [bright_tags]

Selected Notebooks / Notes

Done. classname: .list-item-container.selected

Adding a selected class to the list-item-container will work for both notebooks and notes.

class="list-item-container selected"

Note Title

Done. classname: .title-input

(it is possible to target this with #react-root div div div:last-child div input but that is pretty finicky!)

Last Edit Timestamp

Done. classname: .updated-time-label

Like title it can be selected with #react-root > div > div > div:nth-child(8) > div:nth-child(1) > span, not a good long-term solution though.

Button for Markup/WYSIWYG editor

Done. classname: .tox-tbtn.markdown-active/.tox-tbtn.richText-active

Search field, new todo and new note button

Done. classname: .search-bar/.new-todo-button/.new-note-button

These elements should have a class name as well:

• search field

• New Todo button

• New Note button

Calendar

Done. classname: .rdtPicker

• Dropdown calendar (as you can see, if the whole app is styled in dark mode, the calendar background stays white and the text is only slightly visible)

List items (notebook) and note count

Done. classname: .list-item .title/.list-item .note-count-label

DIV for tag area

Done. classname: .tag-bar

Modal dialogs

Done. classname: .modal-layer/.modal-dialog

• modal backdrop and dialog itself

Next element here

[laurent]

In the dev tool, you can select an element in the DOM, right click and choose “Copy css selector” or something like this. Perhaps we can add classes to element but in the meantime that tool should help.

[tessus]

In most cases using a selector would probably work, but there are some that will select other elements in different screens.
e.g. I changed the color for the “warning” in the attachment screen:

This is what happens, when you open preferences:

Therefore a ui-warning class is the only way to change this without side-effects. This class should also be used for Preferences -> Encryption -> E2EE text and Banner (see first 2 items in above list).

I understand that there are more important issues to fix right now, so I am just mentioning this for future reference.

[giteshsharma]

Thanks @tessus

[andrejilderda]

Laurent pointed me to this list in this topic where I shared my idea for creating a PR for adding classnames to components. Some of these missing classnames keep me from finishing my theme.

I made a small proposal for adding classnames which is currently limited to the NoteList components.
This solves the missing classnames on the 'Search field, new todo and new note button' which is on the list above. This would result in a DOM like this:

The changes for the above you can find here:

Desktop: Add classnames to NoteList components (WIP)

If you're wondering about the syntax you might want to look into the BEM (block/element/modifier) convention. I think it's better to adopt this convention than just sprinkle some classnames around.

I'm curious to hear what you think and if I should continue working on this.

[laurent]

I'm not quite sold on the BEM methodology, I think it's too verbose. And if we do add classes, it should be just a few in places where it's really needed.

If what you need requires adding classes everywhere, it's probably not going to be possible. It wouldn't even be a good idea to build a theme that relies on these classes because they might change from one version to another, or I might just remove them if I can't figure out how to keep them in a refactoring.

Basically I don't want to freeze the UI for the sake of custom CSS, which I think is not the best way to customise the UI.

[andrejilderda]

Then I’m curious what you think is the best way to customise the UI. I do understand you find this a bit too much though. And no, it is not really necessary to go this far, because you can already get really far by using non-classname CSS selectors for most cases. But it is hacky and inconvenient. And since I read in this thread you were considering SCSS, I thought of taking this a step further. In that case I think BEM can be really helpful.

BEM's verbosity is its main benefit imo, because it gives you info about how elements relate to each other in components and what states there are (using modifiers). It reduces naming inconsistencies and makes it easier to name elements. Plus it makes really clean SCSS files, since you can do:

.note-list-controls {
  …

  &__search {
      …
  }
}

But I realise most of the Joplin themes don’t go so far with theming the UI as I have. But maybe this is because it’s hacky, hard for people with little CSS experience or too cumbersome for people with CSS and/or design experience.

For now I will just add a few classnames for the elements that can’t be styled in a different way. But I'm curious to see what's in store for the UI in the long run. I don’t want to step on anyone’s toes, but I see plenty of things that can be improved (and am willing to help ).

[andrejilderda]

I've updated the classnames to only the most essential ones. This includes most from the list above, namely:

• Preferences -> Encryption -> E2EE text
• Search bar
• Local search
• Selected Notebooks / tags
• Selected note in notelist
• Note title
• Last edit timestamp
• Button for Markup/WYSIWYG editor
• Search field, new todo and new note button
• List items (notebook) and note count
• DIV for tag area
• Command palette/Go to anything
• Modal dialogs

laurent22/joplin

I think some elements in the list above are not really relevant (anymore):

• Tag list (styles can easily be overridden)
• Calendar (there are already unique classnames in place)

[tessus]

This is great. It would be awesome, if you could update above list with the classnames you added.

e.g. a line in the proper sections with:

**Done.** classname: `classname-here`

[andrejilderda]

Yeah sure, I've updated the list and grouped the items with classnames under ' Done'

[uxamanda]

.list-item-container.selected was added to change the currently selected notebook color?! I've been waiting for this one from the very beginning. Thank you all for the effort!