I’ve been experimenting with HTML embedded in Notes to help make things more organized and clean looking as part of my code fence replacement plugin, but when I drop the w3.css snippet in the snippets folder, I notice that EVERYTHING in Obsidian slightly changes and either breaks some things or causes text to run off the screen and such. However, once disabled, everything resets.
Has anyone tried this before? Has anyone had this issue before?
That’s to be expected.
Obsidian is a markdown note taking app, not a code editor. It does support HTML in your notes and CSS adjusted for use in Obsidian, but you can’t drop an entire webpage template in a note. Well, you can, but you’ll get some weird results.
What you’re looking for is to open and edit those templates in a code editor and view the results in a web browser.
Sure, you are correct. I was using HTML in Obsidian to make structured formats of data within a note. Without the w3.css snippet enabled, all the formatting is removed from that HTML. I can do a lot of the same thing using an HTML Table and some CSS via style=“” attributes.
Is there a way to include something like w3.css in a Theme plugin and conditionally enable it?
I see. Sure, you could clip sections of the w3.css, paste them into your own .css file, and make the necessary CSS adjustments to work in Obsidian and with whatever theme you are using.
For example, with a quick look, the w3 HTML examples of:
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<p class="w3-large">The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur ... We only use <span class="w3-tag w3-light-grey">seasonal</span> ingredients.</p>
refer to
.w3-container {padding:0.01em 16px;}
/* and */
.w3-large {font-size:25px; color: orange;}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:hotpink!important;}
.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center;}
in the original w3.css file and seem to work fine (slightly changed for effect).
However, there may be cases where the CSS in the w3 file doesn’t translate to Obsidian’s CSS so will need to be adjusted. I’m guessing that’s where you are seeing the breaking or strangeness.
Thank you! This is super helpful. I now have ideas for directions to head to get something like this working.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
