From 6c464354100acf9078e51a9e3330910f544166b9 Mon Sep 17 00:00:00 2001
From: "promptless[bot]" <179508745+promptless[bot]@users.noreply.github.com>
Date: Thu, 7 Aug 2025 18:39:47 +0000
Subject: [PATCH 1/2] Documentation updates from Promptless
---
.../custom-components/custom-css-js.mdx | 55 +++++++++++++++++++
1 file changed, 55 insertions(+)
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 49dbd5e0c..e6e9348bf 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
@@ -118,6 +118,61 @@ For customizing the background, logo, font, and layout of your Docs via Fern's b
check out the [Global Configuration](/learn/docs/getting-started/global-configuration).
+## Hiding docs components
+
+You can use custom CSS to hide specific Fern docs components that you don't want to display. This is useful for removing UI elements that aren't relevant to your documentation or user experience.
+
+### Common components to hide
+
+
+
+ Hide the "Open in ChatGPT" and "Open in Claude" buttons that appear on documentation pages:
+
+ ```css
+ .fern-page-actions {
+ display: none !important;
+ }
+ ```
+
+
+ This is particularly useful for authenticated content where these external AI tools shouldn't have access.
+
+
+
+
+ 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.
+
+ Common patterns include:
+ - `.fern-*` - Fern-specific components
+ - Use `!important` to ensure your styles override default styles
+ - Consider both light and dark mode styling if needed
+
+
+
+### Finding component selectors
+
+To hide other components:
+
+
+
+ Right-click on the component you want to hide and select "Inspect Element" in your browser's developer tools.
+
+
+
+ Look for CSS classes that start with `fern-` or other identifying class names in the HTML structure.
+
+
+
+ Add a CSS rule to your `styles.css` file using the class name:
+
+ ```css
+ .component-class-name {
+ display: none !important;
+ }
+ ```
+
+
+
## Custom JavaScript
Customize the behavior of your Docs site by injecting custom JavaScript globally. Add a `custom.js` file and include it in your `fern/` project:
From fd35de5fe6602b70a1dd29e66fa00fc590d560fc Mon Sep 17 00:00:00 2001
From: Devin Logan
Date: Thu, 7 Aug 2025 15:47:33 -0400
Subject: [PATCH 2/2] restructure page, add specific hiding examples
---
.../custom-components/custom-css-js.mdx | 161 +++++++-----------
1 file changed, 65 insertions(+), 96 deletions(-)
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 e6e9348bf..396b15191 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,65 +13,6 @@ 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:
-
-
-```css maxLines=10
-
-.petstore-table {
- background-color: white;
- border: 1px solid #DEDEE1;
- border-radius: 4px;
-}
-
-.dark .petstore-table {
- background-color: #1e1e1e;
- border: 1px solid #2e2e2e;
-}
-
-.petstore-table thead {
- position: sticky;
- top: 0;
-}
-
-.petstore-table thead tr {
- background-color: #edecee;
- border: 1px solid #DEDEE1;
- border-radius: 4px 4px 0px 0px;
-}
-
-.dark .petstore-table thead tr {
- background-color: #2e2e2e;
- border: 1px solid #2e2e2e;
-}
-
-.petstore-table th {
- padding: 6px;
-}
-
-.petstore-table tbody td {
- padding: 6px;
-}
-
-.petstore-table tbody tr:nth-child(odd) {
- border: 1px solid #DEDEE1;
-}
-.petstore-table tbody tr:nth-child(even) {
- border: 1px solid #DEDEE1;
- background-color: #f7f6f8;
-}
-
-.dark .petstore-table tbody tr:nth-child(odd) {
- border: 1px solid #2e2e2e;
-}
-
-.dark .petstore-table tbody tr:nth-child(even) {
- border: 1px solid #2e2e2e;
- background-color: #2e2e2e;
-}
-```
-
-
### Create `styles.css`
@@ -118,60 +59,88 @@ For customizing the background, logo, font, and layout of your Docs via Fern's b
check out the [Global Configuration](/learn/docs/getting-started/global-configuration).
-## Hiding docs components
-
-You can use custom CSS to hide specific Fern docs components that you don't want to display. This is useful for removing UI elements that aren't relevant to your documentation or user experience.
-
-### Common components to hide
+### Common use cases
-
- Hide the "Open in ChatGPT" and "Open in Claude" buttons that appear on documentation pages:
+
+
+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;
}
```
+
-
- This is particularly useful for authenticated content where these external AI tools shouldn't have access.
-
-
+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 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.
- Common patterns include:
- - `.fern-*` - Fern-specific components
- - Use `!important` to ensure your styles override default styles
- - Consider both light and dark mode styling if needed
-
-
+
+```css maxLines=10
-### Finding component selectors
+.petstore-table {
+ background-color: white;
+ border: 1px solid #DEDEE1;
+ border-radius: 4px;
+}
-To hide other components:
+.dark .petstore-table {
+ background-color: #1e1e1e;
+ border: 1px solid #2e2e2e;
+}
-
-
- Right-click on the component you want to hide and select "Inspect Element" in your browser's developer tools.
-
+.petstore-table thead {
+ position: sticky;
+ top: 0;
+}
-
- Look for CSS classes that start with `fern-` or other identifying class names in the HTML structure.
-
+.petstore-table thead tr {
+ background-color: #edecee;
+ border: 1px solid #DEDEE1;
+ border-radius: 4px 4px 0px 0px;
+}
-
- Add a CSS rule to your `styles.css` file using the class name:
+.dark .petstore-table thead tr {
+ background-color: #2e2e2e;
+ border: 1px solid #2e2e2e;
+}
- ```css
- .component-class-name {
- display: none !important;
- }
- ```
-
-
+.petstore-table th {
+ padding: 6px;
+}
+
+.petstore-table tbody td {
+ padding: 6px;
+}
+
+.petstore-table tbody tr:nth-child(odd) {
+ border: 1px solid #DEDEE1;
+}
+.petstore-table tbody tr:nth-child(even) {
+ border: 1px solid #DEDEE1;
+ background-color: #f7f6f8;
+}
+
+.dark .petstore-table tbody tr:nth-child(odd) {
+ border: 1px solid #2e2e2e;
+}
+
+.dark .petstore-table tbody tr:nth-child(even) {
+ border: 1px solid #2e2e2e;
+ background-color: #2e2e2e;
+}
+```
+
+
+
## Custom JavaScript