How to get all CSS Snippets working in editor mode

Custom CSS & Theme Design
1

I really appreciate snippets in Obsidian. However, them turning off when I switch to editing mode is really irritating.

For example the “Dashboard” and “dashboard-ReadLineLength” snippets turning off in editing mode and custom H1 text such as below:

.homeheading h1 {
font-size: 3.5em; /* adjust this value as you like */
text-align: center;
}

Is there any way I can make it so all CSS Snippets also work in editor/source mode.

Thank to whoever answers this and have a nice day.

2

It seems you are talking about TfTHacker’s Dashboard++ snippet :smiling_face: . The horizontal layout achieved by the snippet will only work in Reading View.

The CSS selectors used in Editing and Reading views are quite different, but there are some custom properties/variables that cover both views.

For adjusting line width (Editing & Reading Views) using most themes:

body {
    --file-line-width: 1200px;
}

Replace body with .full-width (a cssclass of your choosing) to restrict it to individual notes. You can also replace the px with %, so 1200px → 100% for max width.

For adjusting h1 font-size and alignment with your homeheading cssclass (Editing & Reading Views):

.homeheading :is(.HyperMD-header-1, h1) {
    font-size: 3.5em;
    text-align: center;
}

Have a look over:

1 Like
3

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.