I’ve managed to figure out how to add a CSS Class full-width in the properties and than have that apply the CSS snippet I’ve added that then formats the page to use the full width of the screen.
I don’t understand CSS well enough to know if what I want to do is even possible, but…
I would like to do the same kind of thing, adding a CSS Class property to a page and then have the paragraphs get formatted with an indented first line. I’m quite annoyed at how, for long form writing, I’m stuck in the HTML formatting world where paragraph starts aren’t indicated.
I don’t want to create some code that applied to all my notes, because any kind of spacing between paragraphs then expands checklists and all kinds of other stuff or if I go the route of indenting the first line, that indents everything all the time and that’s just really dumb looking when you have a page of non-longform that has a few 2 line paragraphs.
What I’m trying to do
Add a CSS property to format a specific page in a long-form/novel style so the prose is more easily readable.
Things I have tried
Since this works as a CSS Snippet and I can call it and influence a single page to be full width
I had hoped to call it with a CSS Property ‘long-form’.
I’m guessing there is more than a bit wrong here, but I don’t know if the .full-width is a preexisting class or something that is defined in this instance. So I don’t know if I’m allowed to define my own class and add rules to it. And I don’t know how to add rules to the class that point to specific CSS pieces.
Classic case of knowing just enough to be dangerous.
Any help would be greatly appreciated.
As long as a cssclass isn’t already taken (by a community theme, other CSS, etc.), you can use whatever name you’d like.
You’re going in the right direction, you just need to be more specific in targeting lines / paragraphs in the CSS. This is fairly broad and may need adjusting if it changes too much, but you could give it a try.
For both Editing and Reading views, something like this could work:
I got your example to work. I learned that it matters what I name my CSS file. I had it named long-form-class.css and the snippet wasn’t working. I figured it had to be me and tried a few different things before I stumbled on that.
I used your snippet for editing and reading view. And, it works in both, but in reading, it only indents the first paragraph of a group. As soon as there is an empty carriage return, it will indent the next paragraph, but not the one immediately subsequent. After a gap, it will indent the first line again. I almost never use reading view, so I’m not bothered, but am curious why it would work one way in one mode and different in another.
Where do I learn CSS? Your example is the first time that I see the ‘:has’ detail and the sub-class(?) in round brackets like that. I understand that CSS is somewhat ubiquitous, but it also seems that there are obsidian specific syntax/details. I have hammered away many hours going through examples from forum posts trying to do something with CSS in obsidian only to find out that I need so change the case of one character or something else trivial in order to make it work. Often, I can’t use the examples shown because of some kind of presumption not mentioned that I’m obviously missing, like the naming of the file to a specific format this round.
Where do I start with CSS to gain an understanding? I’d really like to get past either spending hours hammering away and getting no where or just asking forum member to think for me.
My next step in this long-form class I’m building, would be to outdent all the headings. I think I can figure that out from a different post I’ve seen earlier, but I wanted to outdent the tags when they are their own block and don’t know if I can do that. My hunch is that I would have to set up a test to see if the block only contains words that begin with ‘#’, then don’t indent. Am I on the right track?
The name of the .css file shouldn’t matter. It just needs to be a valid .css file and enabled in Settings. Of course, the CSS in the file also needs to be correct.
As for learning CSS, in another life I made websites, so had some basic knowledge. There are loads of guides. You could have a look here: CSS Tutorial, but in addition to “standard” CSS, Obsidian has its own flavor to take care of the different viewing modes. This is a good read:
