Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Browser
    • Mail
    • News
    • Community
    • About
    • Register
    • Login
    • Search
    HomeBlogsForumHelpThemes
    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Desktop
    3. Desktop Feature Requests
    4. Combine Window Title and Address Bar when Tabs are on the Side

    Combine Window Title and Address Bar when Tabs are on the Side

    Desktop Feature Requests
    address bar tab bar in progress
    37
    64
    5154
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mathiasbr last edited by LonM

      Hi,
      I love to have the tabs on the (left) side. However, with side tabs there is the mostly empty window title bar shown above the address bar.
      This is not the case when tabs are on the top (and the Vivaldi button is chosen as menu position), where the tabs, the Vivaldi button and the window max/min/close buttons are combined into a single bar.

      Similarly, in order to kind of harmonize the appearance of side and top tabs, and to avoid wasting precious vertical space, I suggest to combine the window title and the addresss bars when tabs are on the side and the Vivaldi button is chosen as menu position.

      So this:
      0_1541068537778_title-and-address-bars.png
      Should look like:
      0_1541068543234_title-and-address-bars-combined.png

      I am using this awesome CSS mod to achieve this but have to redo the mod after every update: https://github.com/Sporif/CustomHooks/blob/master/hooks/combine-header-toolbar.css

      bimlas dodger michacassola V 4 Replies Last reply Reply Quote 104
      • bimlas
        bimlas @mathiasbr last edited by

        I like the idea, but with a little modification:

        0_1554791253874_a0a0e0e0-6b95-4066-825c-15da16b7ef74-image.png

        If only the address field is in the tab bar, there will be more room for tabs. Buttons (back, forward, refresh) can be hidden if you set up a shortcut or mouse gesture to toggle the (original) addressbar.

        0_1554791805392_4b15e1b1-04f8-431f-a43f-4d2f39f27c56-image.png

        Since the buttons can already be freely moved, I don't see a big obstacle to putting the addressfield in the tab bar.

        My modifications

        scw1611 1 Reply Last reply Reply Quote 6
        • yians
          yians last edited by yians

          @mathiasbr this is exactly what i wanted! although it doesn't work if the window isn't maximised. any fixes for that?

          S Vadiken 2 Replies Last reply Reply Quote 2
          • S
            Slim08 @yians last edited by

            I'm also using the 'combine-header-toolbar.css'

            div#header {
                margin-bottom: -25px !important;
                z-index: 5 !important;
                pointer-events: none !important;
            }
            
            div.toolbar-addressbar {
                padding-left: 34px !important;
                padding-right: 135px !important;
            }
            
            div#pagetitle {
                display: none !important;
            }
            
            .toolbar .button-toolbar {
                height: 35px !important;
            }
            
            .button-toolbar > button[title="Suchmaschine ändern"] {
                transform: translate(0,0) !important;
            }
            
            .sdwrapper .iconmenu-container.searchfield {
                height: 36px !important;
            }
            
            .addressfield {
                transform: translate(0,-1px) !important;
            }
            
            .toolbar-insideinput button {
                transform: translate(0,7px) !important;
            }
            
            .tabs-right#browser.win.win10 .tabs-bottom#browser.win.win10 .tabs-left#browser.win.win10, #browser.win.win10 #header #titlebar .window-buttongroup button {
                height: 34px !important;
            }
            
            #browser.win.win10 .window-buttongroup button {
                width: 44px !important;
            }
            
            #browser.win .window-buttongroup button.window-close {
                margin-right: 0 !important;
            }
            

            and I would like to be able to drag the window at the vivaldi button

            Screenshot_19.png

            I usually open the vivaldi menu via hotkey and there for disabled the 'pointer-events' on that button

            .vivaldi {
                pointer-events: none !important;
            }
            
            #titlebar > button > span.application-icon > svg > path:nth-child(1),
            #titlebar > button > span.application-icon > svg > path:nth-child(2) {
            	display: none !important;
            }
            
            #titlebar > button > span.application-icon > svg {
                width: 22px !important;
                height: 22px !important;
                transform: translate(0,2px) !important;
                background-image: url(data:image/png;base64, 'very long base64 string' ) !important;
            }
            

            does anyone know how to make the button or rather the background-image able to drag the window from?

            1 Reply Last reply Reply Quote 3
            • Vadiken
              Vadiken @yians last edited by

              @yians said in Combine Window Title and Address Bar when Tabs are on the Side:

              @mathiasbr this is exactly what i wanted! although it doesn't work if the window isn't maximised. any fixes for that?

              Any fix for this one work not only in maximize mode?

              1 Reply Last reply Reply Quote 1
              • ChimeraLove
                ChimeraLove last edited by

                Hi, does anybody have an updated version of the mod? for me on latest vivaldi snapshot version it's not working, thanks!

                1 Reply Last reply Reply Quote 0
                • dodger
                  dodger @mathiasbr last edited by dodger

                  @mathiasbr

                  Blockquote Combine Window Title and Address Bar when Tabs are on the Side

                  Not for the Side position only, but for Tabs on Bottom position too! 👇🏻
                  It's very annoying the Title bar on top.
                  alt text

                  1 Reply Last reply Reply Quote 0
                  • baris.sehri
                    baris.sehri - Ambassador - last edited by

                    I couldn't make it work, needs an update?

                    Snapshot macOS
                    Online Portfolio • Vivaldi Blog

                    1 Reply Last reply Reply Quote 0
                    • scw1611
                      scw1611 @bimlas last edited by

                      @bimlas Can you share this css code

                      1 Reply Last reply Reply Quote 0
                      • geektbee
                        geektbee last edited by

                        The code at
                        https://github.com/Sporif/CustomHooks/blob/master/hooks/combine-header-toolbar.css
                        was working perfectly wonderful for me for almost the past year. But, today..... I clicked Update on my browser to bring it up to 3.3.2022.36, and now, it looks silly. The Vivaldi Menu and Minimize, Maximize, and Exit buttons are overlaying on top of some of the other items. I attempted to modify the code on my side to see about fixing it, but to no avail, b/c I'm no programmer/developer. If any one has any insight to get this back to proper appearance, I would not be sad for you to take a crack at it.

                        After failing at modifying the css, I thought to try to customize the toolbar, and add spacers to each end of the toolbar itself, but couldn't find how to do that. Otherwise, that'd've been a reasonable solution.
                        Thanks everyone!

                        1 Reply Last reply Reply Quote 0
                        • Steffie
                          Steffie last edited by

                          I have been using @LonM's piece of magic since 5/6/20, & it continues to work brilliantly for my Snapshots & Stables.

                          https://forum.vivaldi.net/post/375845

                          https://forum.vivaldi.net/topic/47673/move-v-menu-to-bar-below-then-eliminate-entire-wasted-row-space/7?_=1591365308113

                          ♀ 🇦🇺

                          geektbee 1 Reply Last reply Reply Quote 0
                          • geektbee
                            geektbee @Steffie last edited by geektbee

                            @Steffie
                            I just tried that, thanks, but the V icon (and the hamburger) are still laying on top of the Back button.

                            92329e93-28b4-4a05-8719-6ba3143685a0-image.png

                            d1aec705-f431-475e-99ad-64105cce3512-image.png

                            Steffie 2 Replies Last reply Reply Quote 0
                            • Steffie
                              Steffie @geektbee last edited by Steffie

                              @geektbee

                              4f285b93-7055-440c-bc3c-cb1892ca5f61-image.png

                              0311f9e9-8702-4398-8a57-e46e2cf78406-image.png

                              ♀ 🇦🇺

                              1 Reply Last reply Reply Quote 0
                              • Steffie
                                Steffie @geektbee last edited by

                                @geektbee said in Combine Window Title and Address Bar when Tabs are on the Side:

                                the V icon (and the hamburger) are still laying on top of the Back button

                                Aha, now i see what you mean, but it's simple to work around via a kludge.

                                1. I temporarily disabled Native Window & relaunched so i could see what's happening -- this showed me:what you said is true & i'd not noticed before, coz i long ago customised this bar.
                                2. So i Shift-dragged a useless-to-me icon up from the Status Bar, & placed it where the V will end up.
                                  a151b033-c92d-4bd2-8f5f-4bb3e3e489c1-image.png
                                3. Re-enabled NW then relaunched.
                                4. Huzzah!
                                  83265032-1e61-406b-a2b4-233841976df1-image.png

                                ♀ 🇦🇺

                                geektbee 1 Reply Last reply Reply Quote 0
                                • geektbee
                                  geektbee @Steffie last edited by

                                  @Steffie
                                  Yeah, that's takes care of the left side.... but not the right 😞 Minimize, Restore, & Exit are overlaying the end of the address bar, Profile options, and Extension Expander. I can't win.....

                                  342655c5-8da7-4f8d-90a5-68cc612ff77e-image.png

                                  Steffie T 2 Replies Last reply Reply Quote 0
                                  • Steffie
                                    Steffie @geektbee last edited by

                                    @geektbee I'm not seeing that effect here, so i'll bow out. Good luck.

                                    ♀ 🇦🇺

                                    1 Reply Last reply Reply Quote 0
                                    • T
                                      tellah @geektbee last edited by

                                      @geektbee I'm using the same css as you and getting the same issue (both left and right). Did you find any fix?

                                      1 Reply Last reply Reply Quote 0
                                      • zo1d
                                        zo1d last edited by zo1d

                                        @geektbee @tellah

                                        I've also been using the script from the first post for a long time and it stopped working with 3.3. The reason is that some of the elements in the browser were renamed.

                                        I just had a look, and for me, the fix was as simple as replacing all instances of the following in the base script:

                                        .toolbar.toolbar-addressbar
                                        

                                        with:

                                        .UrlBar.toolbar.toolbar-mainbar.toolbar-large
                                        

                                        Now (everything that I use) looks just like it did before 3.3.

                                        I hope that helps you both.

                                        scampbll C 3 Replies Last reply Reply Quote 3
                                        • scampbll
                                          scampbll @zo1d last edited by scampbll

                                          @zo1d

                                          This kept them from completely overlapping, thanks.

                                          They were still pretty crowded, but tweaking padding-left from 24px to 40px under "Reduce toolbar size for vivaldi button" gave them a comfortable margin. Probably dependent on screen resolution.

                                          1 Reply Last reply Reply Quote 1
                                          • C
                                            chiefsucker @zo1d last edited by

                                            @zo1d Unfortunately this doesn’t work on macOS. Is there any way to merge the window title & address bar into one on the Mac?

                                            hlehyaric 1 Reply Last reply Reply Quote 0
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            • Reply as topic
                                            Log in to reply
                                            • 1
                                            • 2
                                            • 3
                                            • 4
                                            • 1 / 4
                                            • First post
                                              Last post

                                            Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.

                                            Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status