Hey! I’m trying the snippet “pub-Image Flags.css” from Lithou “sandbox”.
My objective was to get IMAGE URLS SIDE-BY-SIDE, namely with imgur urls, but it seems it only works with images from the vault - ![[]] … 
Any help?
Murf published in the #css-themes channel a simple bit of CSS code to manipulate panels vertically and horizontally, a bit like a work of bricks, or masonry as he calls it.
I have added this to to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Panes.md and click on it to open.
Enjoy.
I had someone reach out to me to ask if it was possible to use the image flags with other plugins that use the same “alt” section such as the image caption plugin.
The short answer is: “not with css”
The long answer is: The image flags will play nice with the plugins since it is looking specifically for the flags. The plugin, however, will display the flags as part of the caption. To change this, you would need to change the plugin code to filter out the flags.
Here are two ways of doing this with the image-caption plugin specifically. I couldn’t find any forum posts for that specific plugin which is why I’m posting here.
First way:
This will take whatever is used before the first “+” used in the alt text. If a caption has a “+” in it, then whatever comes after it will get cut off.
This would be the easiest way to do it without having to conver things since you probably have the captions already in front of your image flags.
To enable this, navigate to the main.js file of the image caption plugin then replace the following code (should be around line 58):
const caption_text = mutation.target.getAttribute("alt");
With this:
const alt = mutation.target.getAttribute("alt");
const caption_text = alt.split("+", 1);
Save the main.js file then reload obsidian. Note: if you update the mod, the custom changes will be overwritten.
Second way
The second way is to use a flag for captions at the end. This will look for a specific call of “-cap” followed by a space. Anything that comes after that is your caption. That includes flags so put the -cap call at the end.
To do this, replace the same original text as the previous method, but use this code instead:
const alt = mutation.target.getAttribute("alt");
const pattern = new RegExp('\-[cC][aA][pP]\s');
const alt_array = alt.split(pattern);
const caption_text = alt_array[1];
Note: you can modify the flag you use by editing the RegEx variable which is currently set to \-[cC][aA][pP]\s.
@1dan , The image flags was designed for internal linked images. Given the way that internal and external links are displayed, the code won’t work out of the box for external links. I’ll look at the code for you though and see if there is a way to add support for external links.
— Edit —
I’ll haven’t done testing for all of the flags, but this will work for the “+side” and the size modifiers. That will work to display images side by side and change their size.
Currently the CSS selectors look like this:
span[alt*="+side"]
span[alt*="-lg"]{
You will want to keep the call for the span elements since that is how embedded images are displayed. You will also want to add the same call but for the ‘img’ element. However, this will apply the styling twice to internal images since they are ‘img’ elements inside of a ‘span’ element. So you want to select ‘img’ elements that are not immediately inside a span.
Both internal and external embeds have an immediate parent of a ‘p’ element. so you can call each as the immediate child of a ‘p’ element. You can use a comma between them which functions as an “OR” statement. The end result would look like this:
p>span[alt*="+side"],p>img[alt*="+side"]{
p>span[alt*="-lg"],p>img[alt*="-lg"]
Make a similar change to any flags you want to use.
I’ll do some more testing and do an update to the official code for the ones that work and comments on which ones won’t work. For most use cases though, you shouldn’t have a problem.
Here is an example of how it looks (preview on the left. Obsidian default theme)
1 Like
A number of people have embraced Live Preview, even though it is still under development. It is already an impressive piece of work.
LP hides the header hashes when the line is not active. Some people prefer to keep the hashes visible in order to see what level header they are dealing with when they encounter it.
@NothingIsLost has kindly provided code (“hacky code”, according to himself), which I have added to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Headers.md and click on it to open, and scrll all the way down.
Enjoy.
1 Like
Hi,
I was just wondering how (or if) I can make external links italic in both edit/preview mode (or whatever it’s called these days…) I want it in all modes.
@DitchComfort try this:
for Edit mode:
.cm-link, .cm-s-obsidian span.cm-url {
font-style: italic;
}
and for Reading (= Preview) mode:
a.external-link {
font-style: italic;
}
Thank you! 
Simple CSS snippet to change the background color for the preview popup.
.markdown-embed {
background-color: DarkSlateGray;
}
1 Like
I’m really excited about this one, hoping others will enjoy it too!
4 Likes
That is really pretty. Excellent work! Thanks.
@zremboldt this will undoubtedly make some people happy. Is there a possibility to make it render in Live Preview too?
Hey all, need a little help here, I would like to have the font reduce in size according to indentation level (so the more indented a bullet point is, the smaller the text becomes). If anyone here with better CSS skills feels like giving it a go I would very much appreciate it!
@Iv3llios : I have no idea how to do this, but maybe someone else will reply. In case you are not aware of it, I just want to say that if you get any answers, or not satisfactory one, try the #appearance channel on Obsidian Discord. There are some amazing CSS wizards there.
1 Like
Hi @Iv3llios,
I would like to have the font reduce in size according to indentation level (so the more indented a bullet point is, the smaller the text becomes).
For Live Edit mode:
You can change the size of the text on the indent by changing this:
.cm-s-obsidian .HyperMD-list-line-1 {
font-size: 1em;
}
You need to do that for each level though, in other words you will need multiple entries with the number 1 changed to the level number.
.cm-s-obsidian .HyperMD-list-line-1 { font-size: 1em; }
.cm-s-obsidian .HyperMD-list-line-2 { font-size: .9em; }
.cm-s-obsidian .HyperMD-list-line-3 { font-size: .8em; }
.cm-s-obsidian .HyperMD-list-line-4 { font-size: .7em; }
If you go say 4 levels deep the 5th level will start the size selections all over again, so level 5 will be the size of level 1, level 6 will be the size of level 2, etc.
You can also change the color of the text as well, I feel that makes the list easier for me to brows through quickly.
For Read view:
I have only been able to find out how to change all the lines under the 1st line, not each individual one. They do scale down for each level but I can’t control how much.
div ul > li {
font-size: 1em;
}
/* all other level items of the list */
div ul ul > li {
font-size: .95em;
}
Below is the CSS for and screenshots of how mine currently look. If you have found a better way please let me know. If anyone has any suggestions to do better or clean it up some I would appreciate it.
Here is what my lists look like in Live Edit:
Here is what they look like in Reading:
Here is the CSS to get that gives me that:
/* Lists
alltagsverstand https://forum.obsidian.md/t/css-code-to-change-color-and-size-of-bullet-points/15230/7
entropic https://forum.obsidian.md/t/custom-colors-for-lists-symbols-and-or-text-editor-only/11185
*/
/* Lists - text color for both ul and ol in Edit view */
.cm-s-obsidian .HyperMD-list-line-1 {
font-family: var(--font-family-editor);
font-size: 1em;
color: var(--TextColorBodyEditor);
}
.cm-s-obsidian .HyperMD-list-line-2 {
color: #acb19899;
font-size: 1.em;
}
.cm-s-obsidian .HyperMD-list-line-3 {
color: #acb19888;
font-size: .95em;
}
.cm-s-obsidian .HyperMD-list-line-4 {
color: #acb19877;
font-size: .9em;
}
.cm-s-obsidian .HyperMD-list-line-5 {
color: #acb19877;
font-size: .9em;
}
.cm-s-obsidian .HyperMD-list-line-5 {
color: #acb19877;
font-size: .9em;
}
.cm-s-obsidian .HyperMD-list-line-6 {
color: #acb19877;
font-size: .9em;
}
/* Lists - Unordered list dots Edit view */
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1 { color: yellow !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-2 { color: #FDB777 !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-3 { color: #FDA766 !important;}
.HyperMD-list-line.HyperMD-list-line-4 .cm-formatting-list-ul.cm-list-1 { color: #FD9346 !important;}
.HyperMD-list-line.HyperMD-list-line-5 .cm-formatting-list-ul.cm-list-2 { color: #FD7F2C !important;}
.HyperMD-list-line.HyperMD-list-line-6 .cm-formatting-list-ul.cm-list-3 { color: #FF6200 !important;}
/* Lists - Ordered list dots Edit view */
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 { color: yellow !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-2 { color: #FDB777 !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-3 { color: #FDA766 !important;}
.HyperMD-list-line.HyperMD-list-line-4.CodeMirror-line .cm-formatting-list-ol.cm-list-1 { color: #FD9346 !important;}
.HyperMD-list-line.HyperMD-list-line-5.CodeMirror-line .cm-formatting-list-ol.cm-list-2 { color: #FD7F2C !important;}
.HyperMD-list-line.HyperMD-list-line-6.CodeMirror-line .cm-formatting-list-ol.cm-list-3 { color: #FF6200 !important;}
/* Lists - Padding in Edit view */
.cm-s-obsidian .HyperMD-list-line {
padding-top: 0.1em;
min-height: 1.5em;
/* Defaults from app.css v0.3.19
.cm-s-obsidian .HyperMD-list-line {
padding-top: 0.3em;
min-height: 1.5em;
}*/
}
/* Lists - text color for both ul and ol in Reading view */
/* **first** level items of a list */
div ul > li {
color: var(--TextColorBodyEditor);
font-size: 1em;
}
/* all other level items of the list */
div ul ul > li {
color: #acb19899;
font-size: .95em;
}
2 Likes
Change colour of external links and highlight not-existing notes
I only found out about CSS recently and this feature makes my notes much tidier, love it! Thanks @Klaas for this collection.
The instructions to add a CSS snipet.
However, some of it doesn’t work completly as I would wish:
- It only works in edit mode, not view.
- Changing the internal link colour does not seem to work the same way
.cm-s-obsidian span.cm-hmd-internal-link {
color: #6d7df2;
}
.cm-s-obsidian span.is-unresolved {
color: #e44949;
opacity: 1 !important;
}
.is-unresolved::after {
content: "⚠";
}
.cm-s-obsidian span.cm-link {
color: #81f26d;
}
1 Like
Thanks for this and the Github files. I’ve learned heaps.
Is there any notation/documentation/place for css snippets that are for use with the new LivePreview editor? For example: “this css works with LivePreview editor.” “This is for legacy editor (pre-LivePreview), use this syntax now.” I’ve seen individual posts explaining the changes but it’s always hard to tell what is the current agreed upon syntax vs old.
I had a bunch of css snippets stop working with the switch to LivePreview, but I think I’ve got everything mostly sorted out now.
Anyway, thanks again.
1 Like