CSS Questions for folder headings

(Einnes) #1

Hi - I am having trouble working out the CSS.

The styling is set up so the main heading is all caps and it’s a gray font.

The next heading in is the same font. However, if you add subpages to this level, the parent heading turns black. It looks weird because it’s then emphasized more than all the other headings, including the main heading.

I would like to find out how to:

  1. Change just the main heading.
  2. Change just the second level heading.
  3. Change just the third level heading.

I’m not having any luck so far and just have everything bolded on one site, which also doesn’t look great.

(Einnes) #2

(submitted 6 days ago elsewhere, resubmitting it here)

(Chris Lott) #4

Here is some example CSS targeting each level of the default Hub.

.TreeList-items.depth--0 .SortableTree-itemName {
  color: purple;

.TreeList-items.depth--0 .TreeList-folder.depth--0.no-toggle .TreeList-folderName {
	color: red;

.TreeList-items.depth--0 .TreeList-folder.depth--0 .TreeList-items.depth--0 .TreeList-folderName {
	color: blue;

.TreeList-items.depth--0 .TreeList-folder.depth--0 .TreeList-items.depth--1 .SortableTree-itemName {
	color: green;

Let me know if this helps!

(Einnes) #5

This looks great. I’m going to try this now and report back! Do you guys have this stuff in documentation anywhere by the way? I know some people are great with CSS but for people who aren’t, these would be really helpful!

(Taylor Barnett) #6

We document most of the commonly changed CSS classes here: https://docs.stoplight.io/documentation/design/custom-css

The CSS in this question is a pretty advanced use case for most Stoplight users. We probably won’t be documenting it all for that reason. We are happy to answer questions about it though.

(Taylor Barnett) #7