Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added example of custom css files #6919

Merged
merged 3 commits into from Jun 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
77 changes: 77 additions & 0 deletions docs/source/custom_css.md
@@ -0,0 +1,77 @@
# Applying Custom CSS

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.

## Jupyter Styling

You can use a custom CSS file to modify default Jupyter styling.

```
/* Modify Jupyter Styles */
#top-panel-wrapper, #jp-top-bar {
background-color: #aecad4!important;
}

#menu-panel-wrapper, #jp-MainMenu, #menu-panel {
background-color: #aecad4!important;
}

.jp-NotebookPanel-toolbar {
background-color: #aecad4!important;
}
.lm-MenuBar-content {
color: #02484d
}
```

![a screenshot custom jupyter styling](https://user-images.githubusercontent.com/12378147/245519958-17ce04e7-edc2-434e-8d93-a5c2de9fb225.png)

## Markdown

Another potential application for custom CSS is styling markdown.

```
/* Headings */
h1,
h2 {
font-family: Impact, Charcoal, sans-serif;
font-weight: bold;
text-shadow: 2px 2px 4px #000000;
}

h1 {
font-size: 52px;
margin-bottom: 40px;
color: #10929e;
text-decoration: underline;

}

h2 {
font-size: 448px;
margin-bottom: 32px;
color: #76b4be;
text-transform: uppercase;
}

/* Block Quotes */
blockquote {
font-family: Georgia, serif;
font-size: 16px;
color: #19085c;
border-left: 8px solid #effffc;
background-color: #eafcff;
padding: 20px;
}

/* Lists */
ul,
ol {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
color: #333333;
margin-bottom: 24px;
}
```

![a screenshot of custom markdown styling](https://user-images.githubusercontent.com/12378147/245520291-968848d3-d336-4523-a046-023b15082ff8.png)
1 change: 1 addition & 0 deletions docs/source/user-documentation.md
Expand Up @@ -9,6 +9,7 @@ notebook
ui_components
notebook_7_features
examples/Notebook/examples_index.rst
custom_css
troubleshooting
changelog
```