How to get all CSS Snippets working in editor mode

Custom CSS & Theme Design
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