Skip to content

Commit fd35de5

Browse files
devalogdevalog
committed
restructure page, add specific hiding examples
1 parent 6c46435 commit fd35de5

File tree

1 file changed

+65
-96
lines changed

1 file changed

+65
-96
lines changed

‎fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx‎

Lines changed: 65 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -13,65 +13,6 @@ Adding Custom Components is available on the Pro plan.
1313

1414
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.
1515

16-
Here's an example of what you can do with custom CSS:
17-
18-
<CodeBlock title="styles.css">
19-
```css maxLines=10
20-
21-
.petstore-table {
22-
background-color: white;
23-
border: 1px solid #DEDEE1;
24-
border-radius: 4px;
25-
}
26-
27-
.dark .petstore-table {
28-
background-color: #1e1e1e;
29-
border: 1px solid #2e2e2e;
30-
}
31-
32-
.petstore-table thead {
33-
position: sticky;
34-
top: 0;
35-
}
36-
37-
.petstore-table thead tr {
38-
background-color: #edecee;
39-
border: 1px solid #DEDEE1;
40-
border-radius: 4px 4px 0px 0px;
41-
}
42-
43-
.dark .petstore-table thead tr {
44-
background-color: #2e2e2e;
45-
border: 1px solid #2e2e2e;
46-
}
47-
48-
.petstore-table th {
49-
padding: 6px;
50-
}
51-
52-
.petstore-table tbody td {
53-
padding: 6px;
54-
}
55-
56-
.petstore-table tbody tr:nth-child(odd) {
57-
border: 1px solid #DEDEE1;
58-
}
59-
.petstore-table tbody tr:nth-child(even) {
60-
border: 1px solid #DEDEE1;
61-
background-color: #f7f6f8;
62-
}
63-
64-
.dark .petstore-table tbody tr:nth-child(odd) {
65-
border: 1px solid #2e2e2e;
66-
}
67-
68-
.dark .petstore-table tbody tr:nth-child(even) {
69-
border: 1px solid #2e2e2e;
70-
background-color: #2e2e2e;
71-
}
72-
```
73-
</CodeBlock>
74-
7516
<Steps>
7617
### Create `styles.css`
7718

@@ -118,60 +59,88 @@ For customizing the background, logo, font, and layout of your Docs via Fern's b
11859
check out the [Global Configuration](/learn/docs/getting-started/global-configuration).
11960
</Note>
12061
121-
## Hiding docs components
122-
123-
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.
124-
125-
### Common components to hide
62+
### Common use cases
12663
12764
<AccordionGroup>
128-
<Accordion title="Page actions (ChatGPT/Claude buttons)">
129-
Hide the "Open in ChatGPT" and "Open in Claude" buttons that appear on documentation pages:
65+
<Accordion title="Hiding page elements">
66+
67+
You can use custom CSS to hide specific Fern docs components that you don't want
68+
to display.
13069
70+
<CodeBlock title="styles.css">
13171
```css
13272
.fern-page-actions {
13373
display: none !important;
13474
}
13575
```
76+
</CodeBlock>
13677

137-
<Note>
138-
This is particularly useful for authenticated content where these external AI tools shouldn't have access.
139-
</Note>
140-
</Accordion>
78+
Commonly hidden components include `.fern-page-actions` (**Open in
79+
ChatGPT**, **Open in Claude**, and **Copy Page** buttons) and `.fern-layout-footer-toolbar`
80+
(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.
81+
</Accordion>
82+
<Accordion title="Adding custom styling">
14183

142-
<Accordion title="Other UI elements">
143-
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.
84+
You can use custom CSS to create brand-specific styling for tables, components, and other elements in your documentation.
14485

145-
Common patterns include:
146-
- `.fern-*` - Fern-specific components
147-
- Use `!important` to ensure your styles override default styles
148-
- Consider both light and dark mode styling if needed
149-
</Accordion>
150-
</AccordionGroup>
86+
<CodeBlock title="styles.css">
87+
```css maxLines=10
15188

152-
### Finding component selectors
89+
.petstore-table {
90+
background-color: white;
91+
border: 1px solid #DEDEE1;
92+
border-radius: 4px;
93+
}
15394

154-
To hide other components:
95+
.dark .petstore-table {
96+
background-color: #1e1e1e;
97+
border: 1px solid #2e2e2e;
98+
}
15599

156-
<Steps>
157-
<Step title="Inspect the element">
158-
Right-click on the component you want to hide and select "Inspect Element" in your browser's developer tools.
159-
</Step>
100+
.petstore-table thead {
101+
position: sticky;
102+
top: 0;
103+
}
160104

161-
<Step title="Find the CSS class">
162-
Look for CSS classes that start with `fern-` or other identifying class names in the HTML structure.
163-
</Step>
105+
.petstore-table thead tr {
106+
background-color: #edecee;
107+
border: 1px solid #DEDEE1;
108+
border-radius: 4px 4px 0px 0px;
109+
}
164110

165-
<Step title="Add CSS rule">
166-
Add a CSS rule to your `styles.css` file using the class name:
111+
.dark .petstore-table thead tr {
112+
background-color: #2e2e2e;
113+
border: 1px solid #2e2e2e;
114+
}
167115

168-
```css
169-
.component-class-name {
170-
display: none !important;
171-
}
172-
```
173-
</Step>
174-
</Steps>
116+
.petstore-table th {
117+
padding: 6px;
118+
}
119+
120+
.petstore-table tbody td {
121+
padding: 6px;
122+
}
123+
124+
.petstore-table tbody tr:nth-child(odd) {
125+
border: 1px solid #DEDEE1;
126+
}
127+
.petstore-table tbody tr:nth-child(even) {
128+
border: 1px solid #DEDEE1;
129+
background-color: #f7f6f8;
130+
}
131+
132+
.dark .petstore-table tbody tr:nth-child(odd) {
133+
border: 1px solid #2e2e2e;
134+
}
135+
136+
.dark .petstore-table tbody tr:nth-child(even) {
137+
border: 1px solid #2e2e2e;
138+
background-color: #2e2e2e;
139+
}
140+
```
141+
</CodeBlock>
142+
</Accordion>
143+
</AccordionGroup>
175144

176145
## Custom JavaScript
177146

0 commit comments

Comments
 (0)