Meta Post - Common CSS Hacks

Share & showcase
611

Neat code blocks

image
image745×341 9.03 KB

Supports 25 languages. How to install (GitHub repo)

1 Like
613

Same here. Have you figured this out?

614

Kanban Redesign

Dark theme
Dark theme932×1030 71.5 KB

How to install (github.com)

3 Likes
615

Hey, I am relatively new to Obsidian and trying to “warp” the editor’s visuals to my needs. I am new to CSS and JS as well, but want to build at least some understanding of its syntax to do unassisted customizations and combine them in Obsidian.

As of now, I am trying to display blocks of my text in some sort of frame, similar to a chat bubble (see the image below). Blocks are separated by two line breaks (not one) – that is the low level “syntax” I am used to. As this is just to visually guide me, I need to use the feature in editor Mode in live preview.

When it comes to the blocks, I would be happy to just have a different backgroundcolor with no frame. A subtle frame plus rounded edges would be cool as well (see image) but I have no idea how to create them.

I did some research an guess I have to style every div.cm-line element that is not proceeded by two
elements. However, I am still struggling to come up with a code snipped that does the job, especially regarding its supposed to work in live preview (which I do not fully understand yet).

many thx in advance
Tim

CSS Example Forum Obsidian
CSS Example Forum Obsidian847×538 60.7 KB

616

CSS Cascading Style Sheets) is not a “hack” it is an integral part of styling electronic Hypertext documents.
These are the foundation of what started as the World Wed Web. Hypertext Markup Language (HTML) defines the structure and CSS describes the design.
Markdown was created to “hide” what many though was “ugly” HTML when bloggers
created and published their blogs to the web.
CSS and HTML can be very powerful ways to express ideas thoughts and knowledge. They are far from “hacks” and worth going deeply into.

Barry

2 Likes
617

Oversize your Mermaid Gantt chart

v1.1.9 Compatible

:root {
    --mermaid-gantt-text-fill: yellow;
}
.taskText, .taskTextOutsideRight, .taskTextOutsideLeft {
    fill: var(--mermaid-gantt-text-fill) !important;
    text-shadow: 0px 0px 2px rgb(0 0 0  / 80%) !important;
}
.exclude-range {
    fill: #888 !important;
}
.mermaid svg {
    max-width: 200% !important;
    width: 200% !important;
    height: auto;
    transform: translate(calc(-0.25 * 100%), 0) !important;
  }
text.titleText {
    fill: var(--mermaid-gantt-text-fill) !important;
}

You can’t see it from the screen shot, but this is scaled to 200% in Obsidian when rendered.

mermaid_screen_shot
mermaid_screen_shot2680×1186 365 KB

from: Ability to resize and align mermaid diagrams - #34 by Durant

2 Likes
618

Just implemented your clean-embeds-all snippet.

This does exactly what I needed - THANK YOU for your effort to develop this and make it available!

620

I made a repo for all my CSS snippet hacks here:

Including:

8 Likes
621

Is there a way to remove the Title with inline insertion by title?
To immediately have the text inside
image

622

it doesn’t work for me
its just ![12. Гармонический тип. Гармел]

image
image1068×594 46.2 KB

623

Have a look at SlRvb’s Embed Adjustments snippet. It has a bunch of options for hiding titles, headings, etc. in embeds.

1 Like
624

I also adjusted it a bit again, because I use the plugin Link Favicons and without the adjustment the size of the favicons was warped.

/*
Source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29
*/

.markdown-preview-view img:not(.link-favicon) {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%;  /* experiment with values */
  transition:transform 0.25s ease;
}

.markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2);    
}
625

Looks like what I needed, gratitude!

How is it supposed to work with the Obsidian Enhancing Export Plugin ?

And with the OSS publishing solutions?
See this for context and workflow Publishing your Obsidian Vault Online with Quartz.

Also with obsidian-digital-garden and Obsidian Mkdocs Publisher.

626

@Moonbase59 kindly confirm this is still supposed to work with 1.3.5.
Having trouble so far. Read and checked carefully.

628

Hello all, I’m currently using this to make my note width a thousand pixels, but it only works in reading mode, does anyone know how to fix it so it works in live preview and source mode?

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content .cm-line{
    max-width:1100px;
    margin: auto;
}

If I turn off the “readable line length” option it just widens to the full pane, and I don’t want that.

629

@TwoPointNo

If you’re using the default theme (and many others but not all), this should do with “readable line length” enabled in Settings > Editor:

body {
  --file-line-width: 1100px;
}
630

I did and it worked! Thanks

631

This css is pretty much for my personal use, so I didn’t add everything found in the Hider Plugin.
Basically, I went up to the app.css file of obsidian, extracted the classes which direct to some of the elements that the hider plugin hides, such as the sidebar toggle buttons, sidebar ribbons, etc., and created a custom css file to hide those elements in my obsidian setup, without needing to install the hider plugin.

Simply put, if you wanna have a setup like the one below:

Screenshot 2023-09-21 at 10.43.02 AM
Screenshot 2023-09-21 at 10.43.02 AM2476×1988 132 KB

Then here’s the css:

/* Vault Name */
.nav-folder.mod-root>.nav-folder-title {
    display: none;
}

/* Left Sidebar Toggle Button */
.sidebar-toggle-button.mod-left {
    display: none;
}

/* Tab-bar down arrow */
.mod-root .workspace-tab-header-tab-list>span {
    display: none;
}

/* Sidebar Ribbon */
.workspace-ribbon,
.workspace-tab-header-spacer {
    display: none;
}

.mod-left-split .workspace-tab-header-container-inner,
.mod-right-split .workspace-tab-header-container-inner {
    padding: 1px 8px 7px;
    margin: 6px 0 0 40px;
    gap: 3px;
}

/* File Explorer Buttons */
.nav-buttons-container {
    display: none
}

.nav-files-container {
    padding-top: 2px;
    margin-top: -6px;
}

I do realise that some of the padding and margin changes I made to the code, would probably not fit every screen sizes (I’m a css noob…unfortunately), but hopefully you can alter them to your needs. Please let me know if there’s anything I could improve here.

Nevertheless, the Hider plugin is certain a lot better to use if you don’t bother having more plugins.

2 Likes
632

Very nice! I initially didn’t use the ribbon but now I like having quick switcher as first and command palette as second option. It’s more peaceful to click quick switcher on the ribbon when you start working with your notes because you don’t have to instantly look for your keyboard and align your fingers there (that happens afterwards).

633

I was looking for a CSS solution for spoilers and secrets in my Obsidian notes, tried different options, researched plugins, etc., but nothing satisfied my simplest need to hide bits of text and be able to see them on mouse hover or something, so I came up with my own tiny CSS snippet solution and I’m pretty happy with the result.

Basically you use it as a callout with - [#] Secret text goes here... and all you need to do is to keep you mouse cursor in that callout while typing and then when you move your cursor out it hides the text behind this nice blur, to reveal it again you just put your mouse over the block, and Bob’s your uncle – your text is visible again! Works on mobile, BTW, by putting your text cursor into that line.

image
image1258×136 24.9 KB

image
image1240×106 18.3 KB

image
image1220×110 11.1 KB

Hope it can be useful for someone who was looking for a similar thing. Thanks.