Issue with display of promoted labels

[SESummers3]

Using the Trilium (Dark) theme, the promoted labels are arranged in a single row, but with the Legacy (Dark) theme, and any other theme I've tried, they form a column with as many rows as labels, and they are much taller than just a row of text. Worse, on my phone, the scrolling region for these is only tall enough to show one at a time, and is very difficult to scroll such a small area. I would much prefer if I could make them sort horizontally (and be a bit smaller).

The fact that this was theme dependent led me to believe that I could fix this by tweaking the theme. I downloaded the "Midnight" theme and asked CoPilot for some code to control this. Unfortunately, nothing it proposed had any effect on this at all.

Unfortunately, while I have about 40 years of experience in programming, most of that was in (Delphi) Pascal, and that ended years ago. I've done some Python since then, and a little CSS/HTML since then, I really don't know what I'm doing, so I need some guidence.

Help will be appreciated!

[dosubot[bot]]

Hi @SESummers3! I'm Dosu and I’m helping the Trilium team.

The difference in promoted label layout between Trilium themes is due to each theme's CSS rules—some use a horizontal row, others stack labels vertically. You can override this by adding custom CSS in Trilium. The recommended way is to create a new note, set its type to "code" and language to "CSS", add the #appCss attribute, and paste your CSS there. For example, to force promoted labels into a horizontal grid and make them smaller, use:

.promoted-attributes-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content)) !important;
  gap: 8px !important; /* adjust spacing between labels */
  align-items: center !important;
}

.promoted-attribute {
  font-size: 0.95em !important; /* make labels a bit smaller */
  padding: 2px 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

To apply:

1. Create a new note, set its type to "code" and language to "CSS".
2. Add the #appCss attribute to the note.
3. Paste the CSS above.
4. Reload Trilium (Ctrl-R) to see changes.

If you want to improve mobile scrolling, you can add:

.promoted-attributes-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

This approach works across themes and is the recommended way to customize layout and size of promoted labels in Trilium. There’s no built-in UI setting for this—CSS overrides are the way to go. If the changes don’t show up, double-check the note setup and reload the frontend. More details and examples are available in community discussions and how-to threads.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[SESummers3]

Hi @dosu. Thanks for the quick response - I've been struggling with this all evening, trying both Copilot and chatGPT for help, with no success.

Unfortunately, I'm still having no success even with your suggestion.

I'm using a modified version of the Midnight theme, with just colors changed. I also have a note named "SES CSS Tweaks" that is marked #appCss. Both of these work - I can tweak the theme file colors, or tweak the margin and line-height settings in the other, hit F5, and see the change instantly.

But anything I stick in either place for ".promoted-attributes-container", seems to be ignored. I can tweak font size, padding, or min-width or max-width, and nothing happens. I've looked in chrome web tools and none of these settings are doing anything. Something seems to be overriding them, but I don't know what I'm doing enough to find it.

[dosubot[bot]]

What’s happening is that Trilium’s promoted labels widget injects its own internal <style> tag directly into the DOM, which sets properties like display: table and max-height: 400px on .promoted-attributes-container. This internal CSS is loaded after your theme and #appCss, so it overrides your changes—even with !important—unless your selector is more specific or you use a trick to increase its priority. There’s no Shadow DOM, but this embedded style tag acts like a high-priority CSS layer (see code reference).

To override it, you need to use a more specific selector and !important. Try this in your #appCss note:

.promoted-attributes-widget .promoted-attributes-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content)) !important;
  gap: 8px !important;
  align-items: center !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.promoted-attributes-widget .promoted-attribute-cell {
  display: flex !important;
  margin: 2px !important;
  padding: 2px 8px !important;
  font-size: 0.95em !important;
}

If you want to test this live, open Chrome DevTools, find a .promoted-attributes-container in the Elements panel, and paste the CSS above into the “Elements” > “Styles” pane. If it works, add it to your #appCss note and reload Trilium with Ctrl+Shift+R.

This should force the promoted labels into a horizontal, scrollable row and shrink their size. If you still don’t see changes, double-check that your #appCss note is type “code”, language “CSS”, and the label is an actual attribute (not just in the title).

The root cause is the widget’s internal style tag, which is a known architectural quirk in Trilium and not something you can fix by theme editing alone (details).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[eliandoran]

@SESummers3 , what version of Trilium are you using?

[SESummers3]

App version: 0.99.3
DB version: 233
Sync version: 36
Build date: Oct 22, 2025, 2:11:30 PM
Build revision: 5ff07820d3709d1f869a96aa37688ff55a47f284The last suggestion from the bot worked. Any way I can just chat with dosubot? If not I'm fine posting questions here - the answers might help someone else in the future - but interacting with it would be faster.

[eliandoran]

Any way I can just chat with dosubot? If not I'm fine posting questions here - the answers might help someone else in the future - but interacting with it would be faster.

I haven't tested it but you should be able to press the Chat button from his response.

If Dosu helps you, you can drop a comment with a summary of what needs to be done.