Bookmarks in Address Bar Mod
-
@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/3Do 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?
-
@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