Tabs and Bookmark Bar centered
-
I think that the interface should be centered since our look and our attention is focusing commonly to the center of the webpage, more the web pages are designed according to this way now even if they are coded from the topleft border. So far, the user would feel more comfortable. This centering should concern and be a paradigm for all the interface. I've make a style script for the most importants for example, I've centered tabs (doesn't work since 3.6) and bookmark bar. Look :
(this is a from a suggested feature)
/*Bookmark centered*/ .bookmark-bar .observer { justify-content: center; }
edit : this following code about tab centering doesn't work since new tab managment from 3.6 serie indeed :
/*Tab centering*/ .tab-strip { display: flex; justify-content: center; } .tab-position { position: relative; left: 0 !important; } #tabs-container .newtab { position: relative !important; left: auto !important; top: auto !important; }
-
Excuse me, but where should I put this code exactly? I managed to make my bookmarks centered with a code "------.bookmark-bar .observer { justify-content: center;------" somewhere in the middle of the file and it worked even if I don't completely understand what I'm doing. I'm very superficially familiar with CSS unfortunately.
So, bookmarks were very easy to center, but with tabs I wasn't so lucky. I tried to put this code in the end of the file and it just made my tabs big (with previews) and nothing else. Really need help with this. -
You put the code in a
css
file that you save in the same folder thatbrowser.html
is locatedhttps://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1
-
@sjudenim I made a custom.css file inside the style folder as it was mentioned there, copy pasted this code above and again it only made my tabs bigger. They are still not centered.
I kinda found the solution to this, used padding 250px to move all tabs slightly to the right, so they would be closer to the center. Anyway, thank you for the reply. -
It's not a perfect centering since tabs are centered according to tab container which doesn't spread to the long of the window : the trash area is for instance not considered.
-
For centering address bar : how-to-center-address-bar
-
Works beautiful. Thank you.
-
@mykeil
If you like, please upvote the feature linked : Centering Interface to the Webpage/ Tabs and Bookmark Bar Centering. -
im using a similar mod that keeps my tabs the full width of my tab bar and stretches the tabs width, would it be possible to center the currently active tab similar to this mod?
-
If each tab are stretched in order to full the tab bar width, if you have one or more tabs, centering becomes useless, isn't it ?
-
Hey there,
i usually use JavaScript to display my bookmarks in the address bar. Until now I could center the bookmarks using the above command in my CSS , but now that doesn't work anymore. Unfortunately I don't know much about JS/ CSS, can you help me?This is how it currently looks like:
the script im using:
(function() { function addStyle() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'bookmarkStyle'; style.innerHTML = ` .UrlBar.toolbar .bookmark-bar { height: 34px; border-top-width: 0; border-bottom-width: 0; order: 0; width: 700px; background: transparent; } .UrlBar.toolbar .bookmark-bar button { background: white; color: inherit; } `; document.getElementsByTagName('head')[0].appendChild(style); }; function move_bb () { if (!document.getElementById('bookmarkStyle')) { addStyle(); } const ab = document.querySelector(".UrlBar.toolbar"); const bb = document.querySelector(".bookmark-bar"); ab.insertBefore(bb, document.querySelector('.UrlBar-UrlField').nextSibling); }; var appendChild = Element.prototype.appendChild; Element.prototype.appendChild = function () { if (arguments[0].tagName === 'DIV') { setTimeout(function() { if (this.classList.contains('bookmark-bar')) { move_bb(); } }.bind(this, arguments[0])); } return appendChild.apply(this, arguments); }; var removeChild = Element.prototype.removeChild; Element.prototype.removeChild = function () { if (arguments[0].tagName === 'DIV' && arguments[0].classList.contains('bookmark-bar')) { document.querySelector('.bookmark-bar').remove(); } else { return removeChild.apply(this, arguments); } }; })();
-
My code justifies all flex elements of the normal bookmark bar flexbox . Your code wants to center one element of the toolbar flexbox, this that you've created : the new bookmark bar.
I try some tests using your code, but I think my beginner css level is not enough. Maybe a flexbox specialist could help you more. I think you should have a look to this mod thread which is more adequate for your need I suppose.
Anymore, I don't understand the purpose to get the new bookmark bar centered into the main toolbar, since then this means that the address bar is reduced.
But if the aim is to get a larger visible bookmark bar, then using flex grow property of the toolbar flexbox allows to reduce the address bar, and to have all bookmark menu headers visible then. -
@Seasonly
Thanks for your answer! I read through the thread you linked but still couldnt find a solution.You are right the address bar would be reduced by a lot but i dont mind, it would be part of the look i try to achieve, i know thats strange
Thanks for trying to help me out!
-
Is there a working function for this now with the second tab bar?
Tried this one but doesn't seem to work anymore. -
The code for bookmark is still running but indeed the code about tab centering doesn't anymore.
-
@Seasonly Yes, took out that part and use it stand-alone, I like it very much. Thanks for that. Good looking stuff.
-
@seasonly I want to have the bookmark bar centering in Ver. 4(Mac), but it does not apply. Which file should I edit for the Mac version? I was able to do this until Ver. 3.7.
-
@izacks I've tried with my windows 4.0 version and it still works for bookmark bar part. I don't know what to say more except remembering that I dropped the .css made file into /resources/vivaldi and added this declaration line into same-folder filename browser.html :
<link rel="stylesheet" href="FileNameForBookmarkBarCentering.css" />