help with modifications please (bookmarks panel)
-
The labels appear to be relative to the icons, try this
.panel-group .panel.panel-bookmarks span.expand-icon, .panel .vivaldi-tree .tree-row label img, .panel-group .panel.panel-bookmarks label svg { margin-left: 0 !important }
-
@sjudenim - thanks - i now have a choice - both suggestions work well
if i or someone can reduce the width of the bookmarks bar that would be perfect
-
Reducing the line spacing (vertical spacing) was attempted by @pafflick The code can be found here:
https://forum.vivaldi.net/topic/15039/modify-the-bookmark-panel-ui-i-lost-something/6I'm hoping someone can figure out the remainder of code required to make this work as well. There's lots of wasted space there and would make it much more user-friendly for people who use the keyboard to scroll thru their bookmarks with up/down/pgup/pgdn/home/end keys.
-
@adacom said in help with modifications please:
another question - can the folder icons have colour
.vivaldi-tree .tree-row svg {fill: var(--colorHighlightBgAlpha)};
Pick a color you like, just be aware that to keep it all compatible with Vivaldi's theming you should pick a fitting color from this page:
vivaldi://themecolors
.colorHighlightBg
is being used for highlighting rows, so the alpha version is at least visible in that case. -
@luetage said in help with modifications please:
@adacom said in help with modifications please:
another question - can the folder icons have colour
.vivaldi-tree .tree-row svg {fill: var(--colorHighlightBgAlpha)};
Pick a color you like, just be aware that to keep it all compatible with Vivaldi's theming you should pick a fitting color from this page:
vivaldi://themecolors
.colorHighlightBg
is being used for highlighting rows, so the alpha version is at least visible in that case.thanks - is it possible to change the highlight colour on the rows - the blue shouts at me - i like subtle
-
.vivaldi-tree .tree-row[data-selected], .theme-dark .vivaldi-tree .tree-row[data-selected] { background-color: pink !important; }
-
@luetage excellent thanks - am learning a bit as i go - not knowing how things are controlled means its a bit slow - add to that am not sure what can be changed so hit and miss
-
@adacom https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
You gotta find the selector of the element you want to change and then you simply write commands to it.
-
@luetage thanks have been doing that - obviously not too well otherwise would not have asked all the questions above
answers have helped me see better how it all works
but i cannot see how to reduce the width of the bookmarks bar - there seems to be a max and min width setting but [for me] they do nothing
i can make it disappear but there is an under lying space - i am guessing thats js - there i have not a clue
-
@adacom said:
but i cannot see how to reduce the width of the bookmarks bar - there seems to be a max and min width setting but [for me] they do nothing
Paste this into devtools console and change the width to what you want, then press enter (I added 34 because the width includes switch width)
chrome.storage.local.get('REG_PANEL_LIST', function (pl) { let lst = pl.REG_PANEL_LIST; lst.forEach(function(panel) { if (panel.id === "bookmarks") panel.width = 34 + 50; }); chrome.storage.local.set({REG_PANEL_LIST: lst}); })
-
@potmeklecbohdan said in help with modifications please (bookmarks panel):
chrome.storage.local.get('REG_PANEL_LIST', function (pl) {
let lst = pl.REG_PANEL_LIST;
lst.forEach(function(panel) {
if (panel.id === "bookmarks")
panel.width = 34 + 50;
});
chrome.storage.local.set({REG_PANEL_LIST: lst});
})thanks - i think i understand but am getting errors in the dev console
when i open it
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
and after i post your code
Uncaught TypeError: Cannot read property 'local' of undefined at <anonymous>:1:16
i have been playing with code so it might well be me - will do a clean install and try again
-
I don't get it, why not reduce the width of the bookmarks panel with the mouse by dragging? If you right click on the bookmarks panel icon and select separate width before you change the width, it will be independent of the width of your other panels.
-
@luetage said in help with modifications please (bookmarks panel):
I don't get it, why not reduce the width of the bookmarks panel with the mouse by dragging? If you right click on the bookmarks panel icon and select separate width before you change the width, it will be independent of the width of your other panels.
i want the bookmarks panel narrower than the minimum that is allowed now - the separate width button is useful but will not allow anything narrower than default i believe
-
@adacom Oh wow, well the minimum is already really narrow, but yeah, then you need to mess with it.
-
@luetage said in help with modifications please (bookmarks panel):
@adacom Oh wow, well the minimum is already really narrow, but yeah, then you need to mess with it.
see my opening post - i like narrow - other than that its just dead space - next bit i want to mod is the address bar and tabbar - far too wide for me - just preference - we all see things differently
-
@adacom You have to use the browser console (not site's one) — open devtools like if you'd want to inspect the UI.
-
@potmeklecbohdan said in help with modifications please (bookmarks panel):
@adacom You have to use the browser console (not site's one) — open devtools like if you'd want to inspect the UI.
thats what i am doing but get the errors as above - as said i might have messed with something so will try a clean install later
-
@adacom The errors shown when you open the console are normal… The last one is strange. Try writing (slowly to see return values of
chrome
etc.)chrome.storage.local.get(console.log)
and look at the return value below. If there's no error, press enter. Do you see a “tree” when you expand the top item (if there's any)? -
@potmeklecbohdan said in help with modifications please (bookmarks panel):
@adacom The errors shown when you open the console are normal… The last one is strange. Try writing (slowly to see return values of
chrome
etc.)chrome.storage.local.get(console.log)
and look at the return value below. If there's no error, press enter. Do you see a “tree” when you expand the top item (if there's any)?way out of my knowledge base - all i can do is post what i see
if i post the code above i get the initial error as stated
if i run it i get
VM433:1 Uncaught TypeError: Cannot read property 'local' of undefined at <anonymous>:1:16 (anonymous) @ VM433:1
if i click on VM433.1 that opens up sources and part of the 1st line is underlined in red - theres a red X at the end of that line - so i read that as the code is wrong in some way
chrome.storage .local.get('REG_PANEL_LIST', function (pl) {
the bold italic is the code underlined in a wavy red line
-
@adacom The storage is not available only for pages AFAIK. Just to make sure that you use the correct console:
- Go to
vivaldi://inspect/#apps
- Click the first “inspect”
- Go to Console tab
- Paste the code
- Go to