Bookmarks in address bar Mod



    1. Install CSS mod
    2. Show bookmarks bar on top
    3. Change width of bar or other things in CSS for your needs
    4. Enjoy!

    CSS:

    /*width of bookmarks bar*/
    :root {
    	--bar-width: 200px;
    }
    @media  (max-width: 700px) {
    	:root {
    		--bar-width: 22px;
    	}
    }
    
    /*bookmarks bar in address bar*/
    #browser.bookmark-bar-top > #main > .toolbar-addressbar{
    	padding-right: var(--bar-width);
    }
    #browser.bookmark-bar-top > #main > .bookmark-bar{
    	width: var(--bar-width);
    	position: absolute;
    	right: 0;
    	height: 35px;
    }
    
    /*hide folder icons*/
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon{
    	display:none
    }
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon+span{
    	margin-left: 0px;
    }
    

    0_1518102757108_bookmarks-adres.png

    0_1518102764099_bookmarks-adres2.png



  • Good idea, for me personally (testing this without any other mods running), the bookmarks bar overlaps with the last extension icon in the address bar. Otherwise I like the css only approach, would be far easier with js obviously, but this is simpler and easier on resources.



  • Adding a simple .extensions-wrapper::after {content:""; width: 24px;} to your code fixes this.



  • cool idea, I'll try it for sure



  • @luetage this for me only add useless space.



  • @kurevska_registracia Hmm, seems like your variable does the same thing but doesn't work on macOS. Probably needs an !important or something, but I'm too lazy to look at it again right now.



  • Nice, this is exactly what Vivaldi is lacking, good job. Is it possible to make that button appear on the left of the adress bar?



  • Attempt at bookmarks button in JavaScript:

    setTimeout(function wait(){
    
        toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        bookmarkbar = document.querySelector("div.bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
    
        if (bookmarkbar != null){
            // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button
            bookmarkbar.style.width = 0;
        }
    
        if (toolbar != null && bookmarkbar != null && morebookmarks != null){
            // Move "More bookmarks" button from bookmarkbar to toolbar,...
            toolbar.appendChild(morebookmarks);
            // style it like a toolbar button,...
            morebookmarks.classList.add("button-toolbar");
            // and remove the rest of the bookmarkbar
            bookmarkbar.remove();
            // Make a bookmarks icon (copied from the bookmarks panel)
            morebookmarks.firstElementChild.firstElementChild.setAttribute("d", "M7 22.5l6-3.5 6 3.5v-16.5h-12v16.5zm2-3.5v-11h8v11l-4-2.2-4 2.2z");
            morebookmarks.firstElementChild.setAttribute("viewBox", "0 0 26 26");
            morebookmarks.firstElementChild.setAttribute("height", "26");
            morebookmarks.firstElementChild.setAttribute("width", "26");
    
        } else {
            setTimeout(wait, 100);
        }
    }, 100);
    

    bookmarks button in action



  • @wea0 This even works better for me, just don't try to hide bookmarks bar or Vivaldi will show the splash screen and has to be closed and restarted =)
    Maybe it's better to add a check if it's visible or not.



  • setTimeout(function wait(){
    
        toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        bookmarkbar = document.querySelector("div.bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
    
        if (bookmarkbar != null){
            // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button
            bookmarkbar.style.width = 0;
        }
    
        if (toolbar != null && bookmarkbar != null && morebookmarks != null){
            // Move "More bookmarks" button from bookmarkbar to toolbar,...
            toolbar.appendChild(morebookmarks);
            // style it like a toolbar button,...
            morebookmarks.classList.add("button-toolbar");
            // and hide the rest of the bookmarkbar
            bookmarkbar.style.display = "none";
            // Make a bookmarks icon (copied from the bookmarks panel)
            morebookmarks.firstElementChild.firstElementChild.setAttribute("d", "M7 22.5l6-3.5 6 3.5v-16.5h-12v16.5zm2-3.5v-11h8v11l-4-2.2-4 2.2z");
            morebookmarks.firstElementChild.setAttribute("viewBox", "0 0 26 26");
            morebookmarks.firstElementChild.setAttribute("height", "26");
            morebookmarks.firstElementChild.setAttribute("width", "26");
    
        } else {
            setTimeout(wait, 100);
        }
    }, 100);
    

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser. If you really want showing and hiding the bookmarks button as a feature, then you will have to make a different script that runs all the time. For me, just setting it up once at the start was enough.
    [Also: You still can't create a new folder from the bookmarks button without messing up the browser. I suspect this one requires... a bookmarks bar. Just use the panel to manage your bookmarks instead.]



  • @wea0 said in Bookmarks in address bar Mod:

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser.

    This way is really better, it's preferable if it doesn't hang the browser. Cheers.



  • @wea0 said in Bookmarks in address bar Mod:

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser. If you really want showing and hiding the bookmarks button as a feature, then you will have to make a different script that runs all the time. For me, just setting it up once at the start was enough.
    [Also: You still can't create a new folder from the bookmarks button without messing up the browser. I suspect this one requires... a bookmarks bar. Just use the panel to manage your bookmarks instead.]

    This is great. Can the button be moved to the left (before the Back button)?



  • @ovalseven toolbar.insertBefore(morebookmarks, toolbar.firstChild);



  • @luetage said in Bookmarks in address bar Mod:

    @ovalseven toolbar.insertBefore(morebookmarks, toolbar.firstChild);

    Perfect. Thank you.

    This is off topic now, but if I could just put a New Tab button to the right of the Home button, I'll have a perfect replacement for Pale Moon. Is that even possible?



  • @ovalseven Hmm, that's possible, you could just move the new tab button from the tab bar into the address bar. You can actually do this right from this very script, just find the selector, assign a variable and append to toolbar. But you probably have some adjusting to do concerning the format, size and alignment of the button to get a perfect result.



  • @wea0 After adding your JS (which works fine), it makes my home button visible again, which I have hidden with CSS, using:
    https://forum.vivaldi.net/topic/6249/remove-home-button/3

    Do I need to add JS to do that instead? And what would that be? :)



  • @jack9 This can't happen, the home button isn't being touched by the mod – something else must be going wrong for you.



  • @jack9 Just an Idea: Check your browser.html header, where you put the link to your custom.js. May be you forgot there some " or to close the tag...



  • @luetage You're correct. Something else got changed at the same time I added the JS. Sorry and thanks! Mods can delete these last posts to keep the thread clean.



  • Nice, thanks but how can i move bookmark bar before addons icons?
    0_1528906024113_vivaldi1.jpg


Log in to reply
 

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