What I’m trying to do
I am new to Obsidian Publish and am trying to use custom CSS but am having trouble. Anyone have templates for the publish.css file for this that I could look at?
Have a look here:
Two themes (that I know of) have publish.css files ready to drop in and go are Minimal and ITS.
Minimal looks to have 13 different colors schemes to choose from:
@charset "UTF-8";
/*Fonts*/
@font-face {
font-family: "Fira Code";
src: url("data:font/woff2;charset=utf-8;base64,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
This file has been truncated. show original
There are also some great tips and links here for Publish:
howdy, after discussion on the discord we felt that a forum post would be the best way to start collecting css snippets, tweaks, and visual resources for obsidian publish websites. if you have some css or js to share, we would love to see it!
i’ll start us off:
.markdown-rendered p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
word-spacing: -0.05em;
text-justify: distribute;
text-align-last: left;
}
the above justifies webtext (note: only in some browser…