Easy Theming with Local CSS

[schemacrawler]

It would be cool to use a CSS stylesheet from local storage, to make it easier for users to re-theme

[benweet]

Hi @sualeh

Here is a custom extension to do that:

userCustom.onReady = function() {
    $('head').append('<style>body {color: green}</style>');
};

Just copy/paste in Settings->Extension->User Custom.

You can replace '<style>body {color: green}</style>' by '<style>' + localStorage.customTheme + '</style>' if you have your theme stored in local storage.

[schemacrawler]

I don't see any place to paste code into Settings->Extension->User Custom. It is just a checkbox. In any case, I think adding in custom CSS should be made even easier than that, for users that are not very technical.

[benweet]

Just click on User Custom on the left side. I should make it blue...

[schemacrawler]

Ok, that works, except that I have to compress my CSS using http://www.csscompressor.com/. It would still be really nice if you could provide a setting where I could copy and paste CSS. This would make it more accessible to non-technical people.

[KyleMit]

Note for future viewers: if you want to apply an entire stylesheet, you can do it like this:

userCustom.onReady = function() {
    $('head').append('<link href="https://dl.dropboxusercontent.com/u/23451370/BloggerStyles.css" rel="stylesheet" />');
};

It's important to note that StackEdit uses the HTTPS protocol, so you must have secure hosting for any external style sheets. After an extensive search for secure hosting, it turns out you can do this with Dropbox's Public Folder

[schemacrawler]

Thanks

On Dec 31, 2013, at 3:51 PM, Kyle notifications@github.com wrote:

Note for future viewers: if you want to apply an entire stylesheet, you can do it like this:

userCustom.onReady = function() {
$('head').append('');
};
It's important to note that StackEdit uses the HTTPS protocol, so you must have secure hosting for any external style sheets. After an extensive search for secure hosting, it turns out you can do this with Dropbox's Public Folder

—
Reply to this email directly or view it on GitHub.

[ManuelLlorens]

My MathJax output gets broken in the preview panel when I add that. It works ok if I insert <style></style> instead of <link />.

[benweet]

Closing as too old.

[NetzwergX]

How would this be done in the new version 5? Settings->Extension->User Custom does not exist anymore, and I could not find out how to add custom CSS / JS in those YAML files that are shown to me when trying to edit settings.

[NetzwergX]

Does this have an accompanying feature in v5, if so where can I find it, or do I need to raise a feature request for v5?

[martov1]

+1, I would like to use this too on version 5

[benweet]

V5 doesn't support custom themes at the moment but you can use a browser extension for that.