help with modifications please (bookmarks panel)



  • i understand the principal of modding the css and am sort of ok with code but am struggling

    bookmarks sidebar is a mess imo - its too wide and there lots of wasted space - with help elsewhere have got a few things changed but am now stuck

    so

    1 - the space at the left side of entries in a dir - how do i reduce that - DONE
    2 - normal bookmarks - again how do i reduce the space on the left - DONE
    3 - vertical spacing - how do i reduce that
    4 - width - i can make it wider but the minimum width is too wide - so how do i reduce that - DONE

    any help appreciated - i have looked at and played with the css code but got nowhere with the above

    0_1565105432226_MaxthonSnap20190806160923.jpg

    the pic below is my modified bookmarks bar from another browser - it works for me and what i am trying to achieve or as near as possible

    another question - can the folder icons have colour

    0_1565106461398_MaxthonSnap20190806164513.jpg


    modedit Added target of modification to title


  • Vivaldi Translator

    I played around with the CSS a bit and this is what I found:

    1. and 2. Difficult as the folders aren't actually nested in the HTML tree. Instead different rows simply have different margin values depending on how "deep" they are, and you can't identify the depth using only CSS. You can use a style like the one below to move everything in the panel left by X pixels. But reducing the indent each level adds would be difficult even with Javascript (since it only loads the bookmarks that are visible on the screen).
    /* Move all bookmarks and folders left */
    .panel-bookmarks .vivaldi-tree .tree-row label {
    	margin-left: -X px;
    }
    
    1. Tried to do it via CSS, but it caused the bookmark panel to flicker when I scrolled, some bookmarks became invisible, etc. Using Javascript is, again, difficult since not all bookmarks are loaded at once (so reduce line height -> there will be empty space below the bookmarks because only X are loaded in but the window now fits Y).

    2. I have no idea how to change this, so someone else will have to chime in on that one.



  • @Komposten - thanks for the mod - thats more useful than it looks at first glance if the folder lists cannot be moved left - with a value of -30 it hides the folder icons and reduces other blank spaces so works well



  • 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/6

    I'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



  • @adacom

    .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


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.