Skip to content

Commit 4b1cf32

Browse files
authored
Added example of custom css files (#6919)
* added example of custom css files * prettify
1 parent bf42a0c commit 4b1cf32

File tree

2 files changed

+78
-0
lines changed

2 files changed

+78
-0
lines changed

docs/source/custom_css.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# Applying Custom CSS
2+
3+
To apply custom CSS, you can add a `/custom/custom.css` file in the jupyter `config` directory. You can find the path, `~/.jupyter`, to this directory by running `jupyter --paths`. There you can create a folder named `custom` and create a `custom.css` file within the folder.
4+
5+
## Jupyter Styling
6+
7+
You can use a custom CSS file to modify default Jupyter styling.
8+
9+
```
10+
/* Modify Jupyter Styles */
11+
#top-panel-wrapper, #jp-top-bar {
12+
background-color: #aecad4!important;
13+
}
14+
15+
#menu-panel-wrapper, #jp-MainMenu, #menu-panel {
16+
background-color: #aecad4!important;
17+
}
18+
19+
.jp-NotebookPanel-toolbar {
20+
background-color: #aecad4!important;
21+
}
22+
.lm-MenuBar-content {
23+
color: #02484d
24+
}
25+
```
26+
27+
![a screenshot custom jupyter styling](https://user-images.githubusercontent.com/12378147/245519958-17ce04e7-edc2-434e-8d93-a5c2de9fb225.png)
28+
29+
## Markdown
30+
31+
Another potential application for custom CSS is styling markdown.
32+
33+
```
34+
/* Headings */
35+
h1,
36+
h2 {
37+
font-family: Impact, Charcoal, sans-serif;
38+
font-weight: bold;
39+
text-shadow: 2px 2px 4px #000000;
40+
}
41+
42+
h1 {
43+
font-size: 52px;
44+
margin-bottom: 40px;
45+
color: #10929e;
46+
text-decoration: underline;
47+
48+
}
49+
50+
h2 {
51+
font-size: 448px;
52+
margin-bottom: 32px;
53+
color: #76b4be;
54+
text-transform: uppercase;
55+
}
56+
57+
/* Block Quotes */
58+
blockquote {
59+
font-family: Georgia, serif;
60+
font-size: 16px;
61+
color: #19085c;
62+
border-left: 8px solid #effffc;
63+
background-color: #eafcff;
64+
padding: 20px;
65+
}
66+
67+
/* Lists */
68+
ul,
69+
ol {
70+
font-family: Verdana, Geneva, sans-serif;
71+
font-size: 18px;
72+
color: #333333;
73+
margin-bottom: 24px;
74+
}
75+
```
76+
77+
![a screenshot of custom markdown styling](https://user-images.githubusercontent.com/12378147/245520291-968848d3-d336-4523-a046-023b15082ff8.png)

docs/source/user-documentation.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ notebook
99
ui_components
1010
notebook_7_features
1111
examples/Notebook/examples_index.rst
12+
custom_css
1213
troubleshooting
1314
changelog
1415
```

0 commit comments

Comments
 (0)