Write custom CSS in templates


#1

Although the default “Styled HTML” template is nice and functional, you may want to customize its CSS in order to add your own branding or to make minor style changes. To do so:

  1. Open the templates dialog in Menu > More... > Templates.

  2. Select the “Styled HTML” template and click on the Copy button.

  3. Name the copy with your own template name, “My styled template” for instance.

  4. At the end of the <head> section (before the closing </head>), add the following lines:

    <style>
    body {
    	background-color: linen;
    }
    </style>
    
  5. Click OK to save.

Now you can use your new template while exporting your files. For example, to export your current file as an HTML file, open the export dialog in Menu > Export to disk > Export as HTML, select your new template in the list and click OK.

If you just want your exports to use an existing CSS file publicly available, just replace the <style> element you’ve added by the following:

<link rel="stylesheet" href="https://hostname/path/to/my-style.css" />

Custom CSS styling
Need a customized CSS HowTo
Can I use stackedit's style.css freely?
Newbie Harvard outline style: to restart indented ordered list number
#2

Is there a similar process to add custom CSS to the previewer (not for when exporting) ?

I understand there was a setting in v4 that allowed to inject custom CSS or to load an external css file, but what about v5 ?


#3

I’m afraid there isn’t in v5. You have to use a browser extension for that.


#4

Any plans to bring this feature back? Was it removed for security reasons or performance reasons?

Can you provide a bit more detail on the browser extension workaround?