Bookmarks in Address Bar Mod
-
@j1979958 You can define the addressbar as
adr = document.querySelector('.toolbar-addressbar.toolbar');
and then just append the bookmarks
adr.appendChild(morebookmarks);
-
so how will it wrap the code?
actually i use:
CSS:
/width of bookmarks bar/
:root {
--bar-width: 495px;
}
@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;
} -
@j1979958 No idea, the solution I provided is for the javascript mod. I thought the CSS mod shows at the end of addressbar anyway, so not sure what your problem really is.
-
Re: Bookmarks in Address Bar Mod
Okay so I added this, it creates the buttons but they are unclickable (and the whole bar is greyed out, can't click to open sites or see the rest with the >> button)
Any idea why? Running Vivaldi 2.6 on Windows 10 x64(green icon and 3 dots are normal addons, then the greyed out bookmarks)
EDIT: FIXED!
Replace this section in the css code (basically adding the z-index line):#browser.bookmark-bar-top > #main > .bookmark-bar{ width: var(--bar-width); position: absolute; right: 0; height: 35px; z-index: 10; }
Solution thanks to @RSD
-
I LOVE THIS MOD, better UI that the bookmarks bar.
-
@wadhah Adding Z-index helped, it stopped working after the update with the bookmarks.
I'm having trouble setting up the version with the java script though, I wanted it next to the adress bar. Should it also be put into /style folder? I really don't know what I might be doing wrong here.
-
This post is deleted! -
Using the js mod and is working very nice!
There is an annoyance though..The appearance of the button looks blank, like this:
The dropdown menu is white, too.
They don't understand the dark skin I use..
Is there a way to make them dark (by settings or CSS)? -
OK, found it..
Just addedmorebookmarks.style.background = "#666666"; morebookmarks.style.borderWidth = "0"; morebookmarks.setAttribute('title', "Bookmarks");
and got this:
Searching for the menu color solution now..
This looks like a global system (Windows) setting though... -
This post is deleted! -
I love this idea - but it does not seem to work any more?
-
@madonnaragu It does work here..
-
@embryo I can't get it to work here.
This is what I did:
- vivaldi://experiments/, tick "allow for using css modifications"
- vivaldi://settings/appearance/, choose folder to load CSS from
- place the OP's code in a text file within that folder
- restart
-
@madonnaragu Make sure the path to the
.css
file (including its name) doesn't contain spaces and that the file name really ends with.css
. -
@potmeklecbohdan Thanks. I did check that. The bookmarks bar is gone. It looks like the css code is trying to put it next to the extension icons, but there's nothing there, it's blank?
-
@madonnaragu I must add that I use the js version, not the css..
.. And this is my user.js that I have for a dark Vivaldi skin: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"); morebookmarks.style.background = "#666666"; morebookmarks.style.borderWidth = "0"; morebookmarks.setAttribute("title", "Bookmarks"); // 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", "24"); } else { setTimeout(wait, 100); } }, 100);
-
@embryo Ah, I see. From what I understand, this would only show a bookmark button. I was hoping to see all the bookmarks, which is what the CSS version should do. Am I wrong?
-
@madonnaragu If you have the bookmarks bar set to show icons only, you'll need to remove everything after
/* hide folder icons */
β¦though I haven't tested it now so there may be also other problems.
-
@potmeklecbohdan I tried that - it's still blank?
-
@madonnaragu Do you have both the address bar and the bookmarks bar at the top? (Otherwise this mod doesn't work)