Address Bar at very top
-
@luetage, the 1st code of topic
@retoree said in Address Bar at very top:
Here the code:
/* Address Bar on Top */ #browser.address-top.tabs-top #titlebar, #browser.address-top.tabs-off #titlebar { z-index: 1; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), #browser.address-top.tabs-off .vivaldi, #browser.address-top.tabs-off #header #titlebar .window-buttongroup button:not(.vivaldi) { height: 34px!important; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-off .vivaldi { padding: 1px 0; } #browser.address-top.tabs-top #titlebar #pagetitle, #browser.address-top.tabs-off #titlebar #pagetitle { display: none; } #browser.address-top.tabs-top #tabs-container.top { top: 34px; padding-left: 0; padding-right: 0; position: relative; z-index: 1; padding-top: 0; } #browser.address-top.tabs-top #main { margin-top: -30px; } #browser.address-top.tabs-off #main { margin-top: -25px; } #browser.address-top.tabs-top .toolbar-addressbar { padding: 0 140px 30px 34px; } #browser.address-top.tabs-off .toolbar-addressbar { padding: 0 140px 0 34px; } .urlSearch, .dialog-add-bookmark, .extensionaction { z-index: 999999999999999999; }
Ask me if you need help with this again or you didn't understand my bad English
-
@gerticular As you can see the code is written for tabs-top/tabs-off. You gotta remove or change that, or it can't work. The solution @sjudenim provided works with tabs on left or right, you might wanna try that one.
-
@luetage ok, i'll try.
sorry, i'd never tried in CSS and it's hard to me to understand it. -
@gerticular said in Address Bar at very top:
it's not work with right/left-attached tabs.
This modified code from @retoree works with tabs on the right. If you have them left, then just change right to left in the code.
/* Address Bar on Top */ #browser.address-top.tabs-top #titlebar, #browser.address-top.tabs-right #titlebar { z-index: 1; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), #browser.address-top.tabs-right .vivaldi, #browser.address-top.tabs-right #header #titlebar .window-buttongroup button:not(.vivaldi) { height: 34px!important; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-right .vivaldi { padding: 1px 0; } #browser.address-top.tabs-top #titlebar #pagetitle, #browser.address-top.tabs-right #titlebar #pagetitle { display: none; } #browser.address-top.tabs-top #tabs-container.top { top: 34px; padding-left: 0; padding-right: 0; position: relative; z-index: 1; padding-top: 0; } #browser.address-top.tabs-top #main { margin-top: -30px; } #browser.address-top.tabs-right #main { margin-top: -25px; } #browser.address-top.tabs-top .toolbar-addressbar { padding: 0 140px 30px 34px; } #browser.address-top.tabs-right .toolbar-addressbar { padding: 0 140px 0 34px; } .urlSearch, .dialog-add-bookmark, .extensionaction { z-index: 999999999999999999; }
//MODEDIT: Moved the code into the code block
-
@travward check this page for icon changes
-
@kallon use markdown for code looks much better
-
This its my setting to make it look more classic like old opera and firefox with tabs below, menu and address bar
put it at the end of common.css
.button-toolbar.next{ display: none; } .button-toolbar.home{ display: none; } /*file menu*/ #header { min-height: 0 !important; z-index: auto !important; height: 24px !important; } /*tabs*/ .topmenu+#tabs-container.top { border-bottom: 0px; position: relative; top: 30px; width: 100%; z-index: 1 !important; } /*address bar background*/ .address-top .toolbar.toolbar-addressbar { padding-bottom: 30px !important; border-bottom: 0px; } #tabs-container.bottom .tab, #tabs-container.top .tab, #tabs-container .newtab, #tabs-container .toggle-trash { height: 30px !important; border-bottom: 0px; }
//MODEDIT: Moved the code into the code block
-
@eilegz said in Address Bar at very top:
put it at the end of common.css
don't, it's better to edit custom.css for custom mods.
-
@ian-coog Just an aclaration:
Its the same, except the common.css will get updated, in which case you would use the old backuped version.Of course, you are right, but if you just edit the common.css, you dont have to care about the backup of browser.html
-
I added the code to have the address bar at the top from the first page to custom.css but it doesn't do anything. Native Windows is disabled, custom.css only contains this code and I've added the necessary line browser.html Vivaldi version is 1.16
Can anyone help me?Edit: it works now, but the window buttons are transculent and partially covered by the back and forward buttons.
-
That code is bit problematic, especially since I see you are trying to use @luetage's tabs under the address bar which requires the tab bar on the bottom to be selected. The code on the first page is only for tabs on top. Further into this thread is a solution that works better with @luetage's code
Try this one
-
Hi, is there a topic to request a feature like this one in this forum? If yes, I would like to upvote for this feature comes true. (Tried to search for it, but didn't find it)
-
-
Hate to resurrect an old thread, but until very recently, @retoree's styles worked flawlessly. Starting with build 2.0.1296.3, the address bar drop down -- and in fact the dropdowns for bookmarks extensions -- all fall behind the tab strip again.
-
-
@luetage, thanks for the suggestion. Tried it, doesn't work for me. I've rolled back to the latest stable release, 1.15.1147.64.
-
@tzedekh This will only be a very temporary solution, stable will jump to 2.0 quite soon I assume.
-
I think you've done something wrong on your end. The code I provided works fine on the stable and today's snapshot
There is a better way though if you don't mind running a
js
file with somecss
. It's a cleaner solution. The code in this thread places things in absolute positions, thejs
file will move them to the element so the buttons move with it -
Well Vivaldi 2.0 and now the tab below address bar custom css its not working as it should the address bar now its stays behind the tab bar, very bad. i still wonder why vivaldi team cant add an simple option since they are already giving it to move the tab bar to many places from right to left top or below...
-
@eilegz First of all you shouldn't edit common.css… And yeah, this could be implemented by the team, but which features get priority is for them to decide – it's probably not important enough. The advantage of Vivaldi is that we can mod and do such small features ourself. Tabs below address bar is still working, I just tested it. Could use a little refinement though, seems like the code has changed a little.