To what extent can I completely customise the look of a notebook?

Community Help
1

I’m interested in using ObservableHQ to publish advisory notes to clients. However if I do that, ideally I’d like the notebook to reflect my branding, so change the default font, change the CSS generally. Maybe even remove the ObservableHQ logo at the top, etc (I don’t mind getting a paid version to allow this to happen). Is this possible?

2

Hi vegabook.

You can certainly apply CSS to your notebook, and that includes font choices. However your CSS will only effect the cells of your notebook — everything around it, including the site navigation and the Observable logo, will remain untouched.

Another option is to embed Observable notebook cells into an HTML page that you control (say on your own site). You can learn more about that here Sharing, Publishing & Embedding / Observable / Observable

Hope that helps.

Dunstan

1 Like
4

For small and hoc page delivery you can use a serverless-cell https://endpointservice.web.app/notebooks/@endpointservices/serverless-cell-tests/deployments/social_link/cells/webpage

To put it into a CDN use the cache-control headers.

For high performance custom pages with fast invalidation I made an observable to netlify deployer Static Site Generator (Netlify) / Endpoint Services / Observable
(It essentially just materialize the output of serverless cells)

I agree with Dunstan simplest is a custom html frame with observable embeds inside. Serverless cells can be helpful in prototyping that

5

@dunstan Is there documentation anywhere on how to add CSS to an Observablehq-hosted notebook?

6

Here’s a demo for you Forum question demo / Observable / Observable

There’s also a brief mention of CSS in this notebook Introduction to HTML / Observable / Observable

Screen Shot 2021-04-14 at 9.44.37 AM
Screen Shot 2021-04-14 at 9.44.37 AM1418×740 95.3 KB

1 Like
7

You can also search for CSS to see lots of crazy things people use it for on the site Observable

8

Thanks, but the markdown itself cannot be styled differently, right? I mean I get it, the markdown is markdown, not html, so that makes sense, but I was hoping there might also be some global “css” setting that you can use to change the font for that too? I guess one way is just not use markdown.

If I can’t restyle the markdown, can I globally change the CSS for all the cells at the same time?

9

@vegabook Drop the following code into a new cell in your notebook:

html`<style>
body {
  border: 10px solid red;
  background: linear-gradient(to bottom right, #afa 50%, #faf 50%);
  font: italic 12px monospace;
}`

I think this will clear things up for you.

2 Likes
10

If you do what I did in my demo then the CSS in that block will apply to the HTML in all your cells, regardless of whether you made them using markdown or if you typed HTML yourself.

Here’s a demo of the CSS effecting markdown: This is a markdown H1 / Observable / Observable

2 Likes
11

haha yes that indeed made it clear!