CSS for left sidebar width and font

Questions & Help
1

Hello,
Can anyone propose custom css code to increase the width of the left sidebar and ideally also make the font smaller? This would help enormously in being able to read more of the titles of favorite pages. Right now the view truncates to about 25 characters, which is not much when using namespaces.
Thanks!

2 
:root {
    --ls-left-sidebar-width: 246px;
}
3

Thanks for the quick response! Unfortunately this didn’t seem to change anything when I pasted it into the custom css (I changed the value a couple of times and restarted logseq each time). Maybe I am missing something? Css is new for me.

4

Here is an (inferior) alternative:

.cp__sidebar-left-layout.is-open .left-sidebar-inner {
    width: 123px;
}
#main-container.is-left-sidebar-open {
    padding-left: 123px;
}

It doesn’t need a restart. Just paste it in its own line (with a different value, e.g. 492px), click back (for the file to be saved), and the change should apply in a second. Make sure that you paste plain text (sometimes copying carries special characters that silently break css).

1 Like
5

Wonderful!
For whatever reason, I had to include the first bit of code in order for the second to work. So for other noobs who might need this, using ctl-shift-v to paste as plain text, I pasted the following code into the custom css (available through the settings menu). Changing the value 246px does not seem to do anything, but having it there allows the next command to work (the value 500px in my example).

:root {
–ls-left-sidebar-width: 246px;
}

.cp__sidebar-left-layout.is-open .left-sidebar-inner {
width: 500px;
}

#main-container.is-left-sidebar-open {
padding-left: 200px;
}

6

For others using this, the only thing to watch out for is that the sidebar now stays the same width regardless of the size of the logseq window. So if I use a split screen instead of a full screen view, I go back to the custom css change the value of width in
.cp__sidebar-left-layout.is-open .left-sidebar-inner {
width: 500px;