Bearblog: Styling individual posts (re, ava)

21 Sep, 2024

Whenever I edit [site theme], I have to keep in mind though that it will be applied to old posts too. I cannot just have a design for one post only with that. If I want that, I need to write specific stuff into that post; and I usually want or need HTML for that

While the site-wide themes will affect all your old posts, you can also add styling to a specific post. I tested with an external stylesheet and it worked.

And this page is modified with an inline <style> block.

Inline Styles Code

<style>
:root {
--link-color: lightblue;
--underline_color: darkblue;
--main-color: blue;
}
body {
    background: gray;
}
main > h1 {
    border-bottom: 1px solid purple;
}
</style>

Other Ideas

These ideas could be better explained, but i'm tired

When you create a post with custom styling, either use a specific tag or add some markup to the document (like a div with a specific id). Then in your theme, add some javascript code that removes your default stylesheet on these posts, so that the whole site layout can be controlled by your custom post.
Set up some system whereby you write HTML in your post body (idk if <template> tag is supported), then javascript in your theme will grab it and place it somewhere else on the page.
Upload custom style sheets to a cdn-type service or something and include them on individual posts with <link rel="stylesheet" href="whateverurl">
In your theme, include javascript that will add a css class to your body by default, but add a different css class for custom-posts (based on tag or internal post markup).
For html not supported by markdown, write it within a code block. Then use javascript in your theme to get the code block's innerText, replace < with < and > with >, then replace code_block.outerHtml with the new code. (haven't tested, but something like that should be workable. You might need to create a new node, do an insertBefore code_block, then remove the code_block)

#bearblog #reply