Bookmarks in Address Bar Mod
-
@potmeklecbohdan Yes, I do. Both are at the top.
-
@madonnaragu I'm out of ideas thenβ¦
-
@madonnaragu I don't understand...
Yes, it will show one button, that when is pressed, it will create a dropdown menu with all your bookmarks.
I thought that that was the topic of this whole thread.. -
@kurevska_registracia said in Bookmarks in Address Bar Mod:
- Install CSS mod
- Show bookmarks bar on top
- Change width of bar or other things in CSS for your needs
- 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;
}@embryo It looks like it's showing bookmarks there?
-
Hello.
Great modThanks a lot for that.
. . .
I had to add the z-index to make it work :
#browser.bookmark-bar-top > #main > .bookmark-bar{ width: var(--bar-width); position: absolute; left: 0; height: 32px; z-index: 10; }
-
@madonnaragu OK, I was referring to this:
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);
Sorry for the misunderstanding...
-
@LCG YES! That worked. Thank you so much.
-
To get the bookmarks to work in css, I'm adding <link rel="stylesheet" href="style/bookmark.css" /> to the browser file. I don't know what to add to make the js work though, anyone?
-
@Viryu You need to add
<script src="custom.js"></script>
(replacecustom.js
with path to the file), usually it's added on the line above</body>
-
@potmeklecbohdan Thank you. It did read the js file I think, it doesn't exactly work. Any ideas?
-
When I saw the new version of Vivaldi allows editing the menus, I was hoping that also meant you could edit the tool bars to do what this mod does, but it doesn't seem to.
-
@Spyderr Thank you SO MUCH for that. Great fix!
-
Does anyone knows why the js code (in this post) broke with the last update?
From this:
it turned to this:
I think that it has to do with the toolbar selector:
toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
@Spyderr I tried to replace the
div.toolbar-addressbar
with your suggestion (.UrlBar
) but it didn't change anything..EDIT: My bad!
I forgot to re-copy the fixed code...
@Spyderr It does work. Thanks allot! -
UrlBar fixed the css code, but I still can't seem to get the js version to work instead. Could someone please post a ready js file with bookmarks button on the left of the adress bar?
-
The
js
file has the wrong selectortoolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
I haven't tested it but try replacing that with
.UrlBar
-
This is now BROKEN in 5.3.2679.38. How can we fix it?
-
@Spyderr Thanks so much, this seems to work.
The update broke my layout of address bar - extensions - bookmarks in the same row, but this now works. Thanks so much for your help! :_)
-
Thank you all for inputs on the JS code. I prefer this alternative, rather than the CSS one as it allow to put the menu where I want, even if itβs slightly more invasive than using the CSS feature that is natively available.
For vivaldi 5.4, I had to make some changes to have the bookmark button just before the urlbar.
For those that are new to this change, you have to add a script reference in the browser.html file:
diff -rNu vivaldi.orig/resources/vivaldi/browser.html vivaldi/resources/vivaldi/browser.html --- a/opt/vivaldi/resources/vivaldi/browser.html 2022-09-04 08:38:05.202590870 +0200 +++ b/opt/vivaldi/resources/vivaldi/browser.html 2022-09-04 08:37:02.999154000 +0200 @@ -12,5 +12,6 @@ <script src="vendor-bundle.js"></script> <script src="background-common-bundle.js"></script> <script src="bundle.js"></script> + <script src="vivaldi-bookmarks-toolbar.js"></script> </body> </html>
Then, use this javascript (in the new file called in browser.html of course), in my case:
/opt/vivaldi/resources/vivaldi/vivaldi-bookmarks-toolbar.js
setTimeout(function wait() { bookmarkbar = document.querySelector("div.bookmark-bar"); if (bookmarkbar != null) { // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button bookmarkbar.style.width = 0; } toolbar = document.querySelector("div.mainbar > div.toolbar"); urlbar = document.querySelector("div.mainbar > div.toolbar > div.UrlBar-AddressField"); morebookmarks = document.querySelector("div.bookmark-bar button.bookmarkbarItem.chevron"); if (toolbar != null && urlbar != null && bookmarkbar != null && morebookmarks != null) { // create button container bookmarksdiv = document.createElement("div"); bookmarksdiv.classList.add("button-toolbar"); // Move "More bookmarks" button from bookmarkbar to toolbar, before urlbar toolbar.insertBefore(bookmarksdiv, urlbar); bookmarksdiv.appendChild(morebookmarks); // 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);
And the result:
-
@guilc I really like your version of the Bookmark button, and think it looks the most "official"
But one thing I'm trying to figure out is what part should I change to move its position from to the left of the address bar to just to the right of the search bar (and more the buttons for extensions)...
I know you said your version allows you to "put the menu where you want", so I'm trying to figure out how to change its position
-
@jmaeshawn Itβs easy
Just replace
urlbar = document.querySelector("div.mainbar > div.toolbar > div.UrlBar-AddressField");
by
urlbar = document.querySelector("div.mainbar > div.toolbar > div.toolbar-extensions");
It will insert the new bookmark button right before the div that contains all the extensions icons instead of before the address field