CSS and HTML inline: bridging the gap

[stfrigerio]

Dear obsidian community. This is my first post, so I apologize if I posted in the wrong place.

Even if I don’t understand anything about programming (I’m a philosopher), in the past months I took the time to learn the basics of css and html in order to stylize my obsidian as much as possible, and I’m pretty happy with my results: I have a huge css file that controls pretty much every aspects of my vault, and I started using some inline html to add style to specific notes

Recently, I’ve started to come across some pretty advanced pages, like this one: GitHub - Rainbell129/Obsidian-Homepage: A dashboard for your obsidian vault., that literally blew my mind.

What I’m trying to do?

From what I’ve understood it is possible to write a css file capable of controlling single notes within the vault.
The step I am missing is: how it is possible to intervene on specific aspects of a note?

For example, let’s say I write the following list:

• A
• B
• C

If I have understood correctly, I could use some some “flex” command or “.container” to make the list display horizontally instead of vertically. But what I’m missing is mainly this: how is it possible to control externally the content of note in obsidian?

With some HTML inline commands I have achieved some styling results (<p style="margin-left:40em">, <br>), but nothing exciting; also I’ve seen that html inline does not display [[Links]], so that kinda defeat the purpouse.

Things I have tried

These are a couple of sources that I think focus on my problem, but there is something that eludes me.

How to Style Obsidian - Obsidian Hub - Obsidian Publish

CSS layout - Learn web development | MDN

Multiple-column layout - Learn web development | MDN

I have tried writing a simple cssclass called “wow” to fiddle with the concept

But obviously if I insert something like:

.wow {

.container {
column-count: 3;
}

}

It display as an error.
And even if it didn’t, I wouldn’t know what to do next.
Let’s say I’ve got my columns into my css file, how do I insert text, links, buttons (and so on…) there? How can obsidian read it and display as a note accordingly?

I’m sure that I’m making a lot of confusion here, therefore I’m asking you for help before falling into an even greater confusion.

Thank your for your time.

[the_tree]

Don’t know if you have solved it.

To control content with external CSS file, following steps will work：

1. write css in snippets, like:

.wow {
    color: red;
}

2. use inline html in notes：

<p class="wow">Hello</p>

3. the word “Hello” will be red in preview mode.

[stfrigerio]

Thanks for the reply!

This is a very interesting piece of information, however I was actually thinking of the opposite: putting content on external file and seeing it show up on obisidian. To explain a bit more:

I was wondering if it is possible to set up a file, for example on VSC, and target an empty note on the vault that is to be filled with the content written in the VSC file.
From what I’ve seen, this should be a workaround to style the layout of a specific note without thinkering too much with the app’s css, but I don’t if it’s actually possible.

In any case this information you gave me could be another way to intervene on the note in specific lines, and could be a way to obtain what I’m looking for, namely a way to style the notes horizontally more than vertically.

Thank you again!

[efemkay]

you shared link to obsidian help on css, so i’m assuming you’re aware of two things

1. ability to load css snippet (via settings > appearence) and
2. Ctrl/Cmd+Shift+I to access the inspector and find the html element (and its inherited css) to control the layout.
   • this usually is the most of critical tool for the css-wizards (i’m not one - i just know a bit here and there to help me get around).

anyway, if i understand your problem correctly, you should be able to achieve by doing the following:

1. set a cssclass for the notes you want to change the layout
   • you may also just apply css to entire vault but targeting a specific structure that unique to your setup (like for blocks below a header # Journal) - obsidian automatically assigned many html attributes automatically, the above is <h1 data-heading="Journal">Journal</h1>
2. find the html element you want to control and take note of the css class inherited from app.css and your theme (be it community theme or personal snippet)
3. create a css snippet that include the customer cssclass you set up in step 1 above
   • I won’t go in detail for this, as there are many ways to do many things. But it should point you in the right direction

so now, since you mention about turning list into horizontal columns (and I’ve personally done it), here’s a simple setup for your reference.

sample note with cssClass: mycolumn where on the right I turn the ul into columns

here’s the css code to get that layout. You can see that I target only for ul that are adjacent to h4, and not for sub-ul (in case I have another list items under the list items)

.mycolumn h4 + ul:not(ul > li > ul > li > ul) {
	columns: 18rem;
}

[stfrigerio]

Woah! Thanks for the in depth reply, it made me understand the real complexity of CSS and my vast ignorance of it.

I’m trying to test your solution (which would totally solve all my problems), but I don’t know why it is not working. Maybe because we have different themes and different html classes? It doesn’t look like it

I’ve tried making an unordered list under a h4, but it doesnt display them horizontally:

The CSS should be correct, I’ve tried adding an ‘!important’ for good measure.

Thanks again for the reply, I will try to thinker with this example and the general idea a bit more and see if I manage to make it work!

[efemkay]

in my example i have the h4 as a bullet so that the header and the list items are actually in one <ul> tag. so my note is actually per below ( this is because i want to use css adjacent feature)

- #### Header 4 as a bullet
    - [[link 1]]
    - [[link 2]]

---

ur example is more like this.

#### Header 4
- [[link 1]]
- [[link 2]]

for that you might need to use this. but it will apply to all first level list items in that note. i couldn’t find a way to distinguish a specific <ul> based on header (that is not a bullet) using css.

.mycolumn ul:not(ul > li > ul) {
	columns: 18rem;
}

[stfrigerio]

Yep, it totally works!
I’ve tested both your example and they both work like wonder:

Thank you for showing me this nifty use of classes + elements, I know grasp the general concept and will definetely experiment with it some more!