diff --git a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx index 49dbd5e0..396b1519 100644 --- a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx +++ b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx @@ -13,7 +13,75 @@ Adding Custom Components is available on the Pro plan. You can add custom CSS to your docs to further customize the look and feel. The defined class names are applied across all MDX files. -Here's an example of what you can do with custom CSS: + +### Create `styles.css` + +Add a `styles.css` file and include it in your `fern/` project: + + +```bash {5} + fern/ + ├─ openapi/ + ├─ pages/ + ├─ images/ + ├─ styles.css + ├─ docs.yml + └─ fern.config.json +``` + + +### Edit `docs.yml` + +In `docs.yml`, specify the path to the `styles.css` file: + + +```yaml +css: ./styles.css +``` + + +### Add multiple custom CSS files (optional) + +You can specify any number of custom CSS files: + + +```yaml +css: + - ./css/header-styles.css + - ./css/footer-styles.css +``` + + + + + +For customizing the background, logo, font, and layout of your Docs via Fern's built-in styling, +check out the [Global Configuration](/learn/docs/getting-started/global-configuration). + + +### Common use cases + + + + +You can use custom CSS to hide specific Fern docs components that you don't want +to display. + + + ```css + .fern-page-actions { + display: none !important; + } + ``` + + +Commonly hidden components include `.fern-page-actions` (**Open in +ChatGPT**, **Open in Claude**, and **Copy Page** buttons) and `.fern-layout-footer-toolbar` +(Fern feedback widget). You can target other Fern UI components using their CSS class names. Use your browser's developer tools to inspect elements and find their class names. + + + +You can use custom CSS to create brand-specific styling for tables, components, and other elements in your documentation. ```css maxLines=10 @@ -71,52 +139,8 @@ Here's an example of what you can do with custom CSS: } ``` - - -### Create `styles.css` - -Add a `styles.css` file and include it in your `fern/` project: - - -```bash {5} - fern/ - ├─ openapi/ - ├─ pages/ - ├─ images/ - ├─ styles.css - ├─ docs.yml - └─ fern.config.json -``` - - -### Edit `docs.yml` - -In `docs.yml`, specify the path to the `styles.css` file: - - -```yaml -css: ./styles.css -``` - - -### Add multiple custom CSS files (optional) - -You can specify any number of custom CSS files: - - -```yaml -css: - - ./css/header-styles.css - - ./css/footer-styles.css -``` - - - - - -For customizing the background, logo, font, and layout of your Docs via Fern's built-in styling, -check out the [Global Configuration](/learn/docs/getting-started/global-configuration). - + + ## Custom JavaScript