Setting Zoom at startup

Share & showcase Workflows & Templates
2

More Detailed Notes on Zoom Issue

How To

  • Create the file ~/PATH_TO_VAULT/.obsidian/snippets/zoom.css.
  • make it look like this:
  •   :root { --custom_zoom: 120%;}
  div.prompt { zoom: var(--custom_zoom); }
  div.menu-scroll { zoom: var(--custom_zoom); }
  div.modal { zoom: var(--custom_zoom); }
  div.horizontal-main-container { zoom: var(--custom_zoom); }
    ```

Go to Settings->Appearance and enable your new CSS file:

image
image950×185 9.22 KB

Now changes to --custom_zoom immediately affect your running obsidian instance and are persisted between restarts.

How I worked this out

  • started with this post which recommends setting zoom level for the whole of obsidian like this 
    • body { zoom: 120% }
  • but realised that zooming the whole page caused the editor ... menu to pop up further to the right for each level of zoom and quickly disappear outside of the window frame
  • So Hit Ctrl-Shift-I to bring up debug mode and then move the mouse around the Elements pane to work out which classes we want to zoom. I found the following:
    • div.menu-scroll:- the drop down menus, but NOT their frame div.menu this is the critical change as zooming div.menu causes the shift-right problem
    • div.prompt:- the command palette
    • div.modal:- modal dialogues except command palette
    • div.horizontal-main-container:- the main page, all panes
  • NOTE: this may not be a comprehensive list so if you find anything else that needs zooming then apply the steps above again

Useful References

After doing the above I found this which walks through how to find UI elements