help with modifications please (bookmarks panel)
-
@adacom Step 2 is wrong. You are not inspecting the UI…
https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
Read carefully and follow directions to inspect UI.
edit: F12 doesn't work for inspecting UI, you have to right-click a clickable element in the UI (not webpage) and select "inspect".
-
@luetage thanks - see that on F12 and had tried it your way but all to no avail
if i click inspect in the bookmarks area i can see the panel is 220px wide in the elements and if i change that the width changes but i still cannot get the code to run so again
1 - open vivaldi with the dev switches [or whatever its called]
2- right click on the bookmarks area
3 - enter code into console - i get no errors
4 - press enter - nothing happens - i get the comment - undefined under the codei am being extremely stupid i think but i just dont see it
-
@adacom
undefined
is the expected outcome, we all get that. But the size does change, if you select "separate width" on the bookmarks panel icon with right click. -
@luetage said in help with modifications please (bookmarks panel):
@adacom
undefined
is the expected outcome, we all get that. But the size does change, if you select "separate width" on the bookmarks panel icon with right click.thanks for your [infinate] patience - so simple when you know how - i got there in the end - i knew of the separate width button but in was not obvious to press it - sometimes the blindingly obvious is not easy for someone new to a project
-
The help here is great so can i go back to my original list - i have tried but as yet got nowhere
how do i reduce the vertical spacing of items on the bookmarks bar
-
Screen No.1
Screen No.2
I noticed that if I use
.panel .vivaldi-tree .tree-row label img { margin-left: 0px !important
the margin-left value from both bookmarks (main level and sub level) change to the same value. Is there a way to decrease both values by a certain amount rather than giving both an absolute value. In this case for example I would like to decrease both by 32px so that Screen No.1 shows 16px and Screen No.2 shows 0px.
-
@Slim08 This example is to make the margin ½ of original (works only until 9th level — if you have more, you have to expand that) (in this case it'd be shorter when only one selector used for both (by removing
.expand-icon
and all first blocks of the pair)).I don't know why there's no way to decrease sizes (width, height, padding, margin, border etc.) easier with CSS…
/* The system should be: - top level: 0px/16px - nested bookmarks and non-expandable folders: +32px - nested expandable folders: +16px */ /* Top level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 16px"] { margin-left: 8px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] { margin-left: 0px !important; } /* Second level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 32px"] { margin-left: 16px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 16px"] { margin-left: 8px !important; } /* Third level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 48px"] { margin-left: 24px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 32px"] { margin-left: 16px !important; } /* Fourth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 64px"] { margin-left: 32px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 48px"] { margin-left: 24px !important; } /* Fifth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 80px"] { margin-left: 40px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 64px"] { margin-left: 32px !important; } /* Sixth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 96px"] { margin-left: 48px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 80px"] { margin-left: 40px !important; } /* Seventh level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 112px"] { margin-left: 56px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 96px"] { margin-left: 48px !important; } /* Eighth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 128px"] { margin-left: 64px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 112px"] { margin-left: 56px !important; } /* Ninth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 144px"] { margin-left: 72px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 128px"] { margin-left: 64px !important; }
Edited
-
@potmeklecbohdan I appreciate your fast and comprehensive answer. I'm sorry for asking prematurely but I totally glanced over the fact that even sub folders are not shown correctly. Your code does exactly what I was asking for. By removing the expand icons to reduce the overall space on the left side it just messes too much other spacings up. I guess it is the same story as with tabs and their sizes and spacings. I solved it for me with this primitive workaround
.panel .tree-row { padding-left: 0px !important } .panel-group .panel.panel-bookmarks span.expand-icon { opacity: 0 !important }
that way all the tree spacings stay intact and I gain almost the amount of space that I wanted.
-
@Slim08 I think that could also be solved by adding
+ svg
at the end of every second (expandable folder) selector like this:.panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] { margin-left: 0px !important; }
will be
.panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] + svg { margin-left: 0px !important; }
-
@potmeklecbohdan To be honest I don't understand it fully but for some reason and with some tinkering I got it to work for me exactly how I like it - much better than what I ever could do.
Thx potmeklecbohdan.
-
if i understand this correctly the principal is redefining a setting that cannot be changed by 'normal' css - margin or padding etc - could this principal be used for the vertical spacing of items in the bookmarks panel which is said to be hard coded
.panel-bookmarks .vivaldi-tree .tree-item
.tree-row label > .expand-icon:first-child[style*="margin-left: 48px"] {
margin-left: 0px !important;
}is there a value in the bookmarks panel that controls the height as the one used here i.e.
.tree-row label > .expand-icon:first-child[style*="margin-left: 48px"]
-
@adacom Yes, there is, but it doesn't allow you to show bookmarks that aren't in the HTML.
-