Add a unique CSS class to body tag which uses the docs ID #4280

Dannyholt · 2021-02-23T23:00:45Z

🚀 Feature

Can we get some CSS classes to the body tag or maybe main-wrapper which uses the docs id. This would allow us to style specific docs without impacting other docs on the site which may not want/need that styling. Similar to what WordPress does on their body tag which uses the page or posts unique ID.

The examples below grab the getting-started class from a doc with an ID of getting-started.

<body class="getting-started" style="overflow: visible;">

<div class="main-wrapper getting-started">

Have you read the Contributing Guidelines on issues?

Yes

Motivation

Currently we have a sidebar category called Getting Started which has a several docs such as System Requirements, Installation, Configuration and so forth. We also have a getting-started.md doc which has a bunch of information and a list of all docs in the Getting Started category.

This list is quite long and so would benefit from some simple CSS to style the list items into two columns. At the moment, this isn't really possible without impacting other lists on the site.

Pitch

This could be used in a variety of ways not just the simple scenario I explained above. I'm sure other users would find having a unique CSS class for a particular docs helpful in other styling scenarios as well.

The text was updated successfully, but these errors were encountered:

Simek · 2021-03-14T12:58:23Z

Hi @Dannyholt, this PR should fix your issue:

fix(v2): fit footer in viewport when content area is too small #4311

It have introduced the new className ("main-docs-wrapper") for the docs plugin pages wrapper:

https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx#L57

CC: @lex111

Dannyholt · 2021-03-14T17:53:36Z

@Simek

Unfortunately, this won't fix my issue as I would prefer to target specific docs via CSS whereas the main-docs-wrapper will appear on all docs as far as I can tell. :)

What I'm after is let's imagine we have a doc called hello.md the wrapper would add the docs ID as a class. For example:

<div class="main-docs-wrapper hello">...</div>

Which you could then use to style elements for that doc only. For example:

#__docusaurus .hello .markdown ul {
  column-count: 2;
}

Simek · 2021-03-14T18:45:23Z

@Dannyholt Yeah, you are right, I didn't get the problem which you have correctly.

As a temporary workaround, if change should apply to only content of one, selected page, you can add className to the element or div wrapper with className around it. You can use HTML tags quite freely in MDX.

Here you can see the example of React Native components grid:

https://github.com/facebook/react-native-website/blame/master/docs/components-and-apis.md#L21

slorber · 2021-03-15T19:01:19Z

This is quite related to #4322

We could add some unique classname to any doc/blog/markdown page to allow to target it more easily.
For docs, maybe a version classname could be useful too

lex111 · 2021-06-16T07:41:29Z

Closing since partially it is implemented in #4511

Josh-Cena · 2022-03-06T07:15:59Z

Reopening, because we still can't use CSS to target a specific doc page. I think there's value in using doc ID as class name of each doc's wrapper.

slorber · 2022-03-09T13:06:35Z

I think there's value in using doc ID as class name of each doc's wrapper.

The wrapper is a nested div, it's not the most flexible way to add a class.

What if the user wants to change the Docusaurus layout but only for a given doc instance, for a blog post, or a specific doc id?

I know those are quite unusual edge cases, but it's better if we apply those classes to the HTML tag: it would be more flexible and always suit all use-cases.

Some fancy use-cases can be: "Use a different navbar background color for docs vs blog"

The way we currently apply classes to the layout (pageClassName/wrapperClassName) is not the best option.

We can also see the problem in #6823 (comment) where it's not easy to split the doc routes into multiple layers and still prevent useless layout unmounts/remounts.

We don't have an equivalent to <Head><html className="docId"/></Head> that would add a class to the wrapper from a child (+ SSR support), and it doesn't permit to target layout items with custom CSS

I think it's worth doing a breaking change on those CSS class names, moving them at the top HTML element, so that:

it's more convenient to add such a className from anywhere (also simplified the refactor(content-docs): add tags route as a subroute of version route #6823 refactor)
more flexible in terms of CSS targeting possibilities

Josh-Cena · 2022-03-09T13:18:16Z

Oh yeah, when I say "wrapper" I don't necessarily mean one particular div, but just any enclosing element. Applying it to html makes sense as well.

If you are open to a breaking change, then why not 👍

slorber · 2022-03-17T18:38:09Z

As part of #6933, a doc route will now have the following classes on the top-level HTML element:

plugin-docs 
plugin-id-default 
docs-version-2.0.0-beta.16 
docs-doc-id-introduction

This means you should be able to write:

.plugin-docs.docs-doc-id-introduction .label { 
  color: red
}

Are these class names looking good to you?

Do you have a better suggestion?

Would using data-attribute be a better fit or a good-enough alternative?
I mean something like:

[data-docs-doc-id-introduction] .label { 
  color: red
}

Also, the "docs version" selector docs-version-2.0.0-beta.16 was already there, but it looks suspicious to me to have dots 😅 not sure it's valid

slorber · 2022-03-18T09:57:16Z

The version html className is configurable through config so I guess it's good enough for now. We'd probably need some logic to sanitize random strings to valid classNames at some point though

slorber · 2022-03-18T09:59:25Z

also thinking we could add a html_class_name frontMatter

it should also be possible to add the current sidebar to HTML classes? 🤷‍♂️

Let me know if you have a good use-case for this

Josh-Cena · 2022-03-18T10:58:13Z

also thinking we could add a html_class_name frontMatter

Our pages plugin has an (undocumented) wrapperClassName front matter which IMO makes sense

slorber · 2022-03-18T11:54:28Z

Our layout has also this undocumented wrapperClassName that I kept for retro-compatibility (used on a few likes like React-Native)

I think it also makes sense to keep it and be able to apply a className to the layout wrapper, just above the children. But by default applying classes to HTML is more flexible

We could also generalize a layout_wrapper_class_name to all md frontMatter maybe?

But it may be complicated because the doc layout is declared above the doc itself (to prevent unmount/remount) so it can't easily apply a custom class to the parent layout.

Same problem as #6823 (comment)

Samrose-Ahmed · 2022-07-25T09:10:20Z

is it documented how to set a class name on the root? I am trying to add custom styles to the navbar of a page created through Layout component.

slorber · 2022-07-25T09:22:14Z

@Samrose-Ahmed you can definitively do that.

See https://docusaurus.io/tests : each section has a different navbar border, because each plugin/page has a custom HTML className to target more selectively

For custom React pages you'd have to use the following:

<Head>
  <html className="my-custom-page-className"/>
</Head>

Note with Head, one HTML className overrides attribute of parents, in case you want to "compose" and avoid overriding a className set upper in the React tree, you'd have to use our undocumented helper:

import {HtmlClassNameProvider} from '@docusaurus/theme-common';

pavelkornev · 2023-01-18T17:40:13Z

<Head>
  <html className="my-custom-page-className"/>
</Head>

@slorber is it possible to do the same on <body/>? I mean i don't see a Provider for the body.

slorber · 2023-01-18T18:49:39Z

<Head>
  <html className="my-custom-page-className"/>
</Head>
@slorber is it possible to do the same on <body/>? I mean i don't a Provider for the body.

Similarly you can copy/paste our HtmlClassNameProvider code and make it work for body if you want to. We don't necessarily plan to provide or use this feature on Docusaurus, and adding a class to HTML is enough.

Dannyholt added feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. status: needs triage This issue has not been triaged by maintainers labels Feb 23, 2021

slorber mentioned this issue Mar 15, 2021

Cannot differentiate BlogListPage and BlogPostPage for styling #4322

Closed

4 tasks

lex111 closed this as completed Jun 16, 2021

Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Mar 6, 2022

Josh-Cena reopened this Mar 6, 2022

Josh-Cena added the status: accepting pr This issue has been accepted, and we are looking for community contributors to implement this label Mar 6, 2022

This was referenced Mar 16, 2022

refactor(theme-{classic,common}): refactor site/page/search metadata + apply className on html element #6925

Merged

feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

Merged

slorber removed the status: accepting pr This issue has been accepted, and we are looking for community contributors to implement this label Mar 17, 2022

slorber closed this as completed in #6933 Mar 18, 2022

crjm mentioned this issue Aug 12, 2023

fix(docs): quickstart css selectors dagger/dagger#5624

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a unique CSS class to body tag which uses the docs ID #4280

Add a unique CSS class to body tag which uses the docs ID #4280

Dannyholt commented Feb 23, 2021

Simek commented Mar 14, 2021 •

edited

Loading

Dannyholt commented Mar 14, 2021

Simek commented Mar 14, 2021 •

edited

Loading

slorber commented Mar 15, 2021

lex111 commented Jun 16, 2021

Josh-Cena commented Mar 6, 2022

slorber commented Mar 9, 2022 •

edited

Loading

Josh-Cena commented Mar 9, 2022

slorber commented Mar 17, 2022 •

edited

Loading

slorber commented Mar 18, 2022

slorber commented Mar 18, 2022 •

edited

Loading

Josh-Cena commented Mar 18, 2022

slorber commented Mar 18, 2022 •

edited

Loading

Samrose-Ahmed commented Jul 25, 2022

slorber commented Jul 25, 2022

pavelkornev commented Jan 18, 2023 •

edited

Loading

slorber commented Jan 18, 2023

Add a unique CSS class to body tag which uses the docs ID #4280

Add a unique CSS class to body tag which uses the docs ID #4280

Comments

Dannyholt commented Feb 23, 2021

🚀 Feature

Have you read the Contributing Guidelines on issues?

Motivation

Pitch

Simek commented Mar 14, 2021 • edited Loading

Dannyholt commented Mar 14, 2021

Simek commented Mar 14, 2021 • edited Loading

slorber commented Mar 15, 2021

lex111 commented Jun 16, 2021

Josh-Cena commented Mar 6, 2022

slorber commented Mar 9, 2022 • edited Loading

Josh-Cena commented Mar 9, 2022

slorber commented Mar 17, 2022 • edited Loading

slorber commented Mar 18, 2022

slorber commented Mar 18, 2022 • edited Loading

Josh-Cena commented Mar 18, 2022

slorber commented Mar 18, 2022 • edited Loading

Samrose-Ahmed commented Jul 25, 2022

slorber commented Jul 25, 2022

pavelkornev commented Jan 18, 2023 • edited Loading

slorber commented Jan 18, 2023

Simek commented Mar 14, 2021 •

edited

Loading

Simek commented Mar 14, 2021 •

edited

Loading

slorber commented Mar 9, 2022 •

edited

Loading

slorber commented Mar 17, 2022 •

edited

Loading

slorber commented Mar 18, 2022 •

edited

Loading

slorber commented Mar 18, 2022 •

edited

Loading

pavelkornev commented Jan 18, 2023 •

edited

Loading