"How to achieve" CSS code snippets

Lithou · July 5, 2022, 8:06am

So Two things:

First - Lithou is still alive and has not been taken over by an alien robot.
Second - I had a day off work last month and updated the image flags snippets to work with “live preview” in edit mode.

I’m pretty sure @Klaas or @kepano asked for this like 14 months ago. I’ve just been prioritizing other things in life since then or just plain forgot. So thanks everyone for your patience.

Link

Here is a link:

github.com

Lithou/Sandbox/blob/main/.obsidian/snippets/pub-Image Flags.css

/*Image Flags Snippet by Lithou
http://github.com/lithou/sandbox

2022-06-29 - Updated to work with the live preview in edit mode. Most will continue to work except the grid view. 
*/


/* Customization 
This snippet is setup so that most of the customization can be achieved by editing
the following variables instead of editing the actual CSS rules themselves. 

There are some advanced funtions that will require editing the rules, but 99% of 
people wont need to do this to get the snippet to do what they want it to. 

Feel free to change these to customize the look and feel to what you need. 
I have listed the default values for each in comments if you want to revert one back. */ 



span.image-embed, div.image-embed, img{

This file has been truncated. show original

Here are some details:

I haven’t updated the documentation on my obsidian publish site yet.
I’ve tested this with v0.15.3 but let me know if you see any odd behaviour with this or any other versions.
I’ve only tested it with the default theme so if there are any odd interactions with themes or other snippets please let me know.
I changed most things to variables at the beginning of the snippet to make it easier to change colors, styles, and sizes. Each also lists a default value incase you want to revert something back to how it was without re-downloading everything

Bugs/Features

Grid Mode

Grid mode will not work in live preview mode due to the extra HTML elements added by obsidian. Works well in reading mode still.

Text Highlighting

I’ve noticed some odd behaviour when using the cursor to select text in “live preview” mode. It will work fine if you are going left/right but will have some odd skipping when going up/down line by line.

Placement of image oddities:

Images with the “+tape” and “+pin” flags need to be included in a paragraph with the text that goes next to it. Otherwise the “DIV” element which contains them won’t be large enough.

Compare the following two examples. Both have edit mode on the left with live preview engaged. Reading view is on the right.

The first one has the image in its own paragraph which causes clipping of the tape element:

image1733×388 142 KB

The second puts the image in the same paragraph as the text which resolves the issue. In both cases, the reading view is unaffected.

image1801×386 149 KB

Quick Reference

Here is an updated list of all the flags currently in use:

Core Flags:

+side
+tape
+pin
+portrait
+landscape
+banner
+hr

Orientation Modifier Flags:

-left
-right

Size Modifier Flags:

-thumb
-sm
-med
-lg
-huge
-full

Border Modifier Flags:

-border1
-border2
-border3
-bround1
-bround2
-TLround
-TRround
-BLround
-BRround
-bthick
-bthin

Shadow and Glow Modifier Flags:

-shadow
-glow
-glow2