• Community
    • Community
    • Vivaldi Social
    • Blogs
  • Forum
    • Vivaldi Forum
    • Categories
    • Recent
    • Popular
  • Themes
    • Vivaldi Themes
    • My Themes
    • FAQ
  • Contribute
    • Contribute
    • Volunteer
    • Donate
  • Browser
    • Vivaldi Browser
    • Latest News
    • Snapshots
    • Help
Register Login

Vivaldi

  • Community
  • Themes
  • Contribute
  • Browser

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Archive
    4. Address Bar at very top

    Address Bar at very top

    Scheduled Pinned Locked Moved Archive
    78 Posts 20 Posters 24.0k Views 10 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      travward
      last edited by

      Anybody know a way to move the address bar to the top, adjacent to the vivaldi menu button?
      0_1510917785203_9630b0d7-dd6f-455b-872a-81007b2055cf-image.png

      retoree
      R
      1 Reply Last reply
      Reply Quote 2
    • retoree
      R
      retoree @travward
      last edited by retoree

      @travward like this? 0_1510919038828_vivaldi_2017-11-17_16-43-46.png

      T
      luetage
      L
      2 Replies Last reply
      Reply Quote 1
    • T
      travward @retoree
      last edited by

      @retoree Yes! How?

      retoree
      R
      2 Replies Last reply
      Reply Quote 0
    • retoree
      R
      retoree @travward
      last edited by

      @travward give me some time, I'll try to fix all bugs. And if I success, I'll reply you again.

      1 Reply Last reply Reply Quote 0
    • luetage
      L
      luetage Supporters Soprano @retoree
      last edited by luetage

      @retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.

      github ◊ vfm

      retoree
      R
      1 Reply Last reply
      Reply Quote 0
    • retoree
      R
      retoree @luetage
      last edited by

      @luetage I use native hamburger menu button since 1.13. Yes, I surely will do it someday 🙂

      1 Reply Last reply Reply Quote 0
    • retoree
      R
      retoree @travward
      last edited by retoree

      @travward and it's done. I saved some time for myself so this code will only work with tabs and address bar on top. Oh and this is for Windows 10. If you're on another OS it may not work as you expected. If so, I'm sorry, but I can't help 😞 Also, this code do not include any other modifications I made for myself, so it will not looks like on screenshot above. Anyway it should looks native on Win10.
      Let's get started. First, read this guides, they will help you to apply the code:
      https://forum.vivaldi.net/topic/10549/modding-vivaldi/
      https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/
      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 😑

      T
      D0J0P
      D
      EHM
      E
      4 Replies Last reply
      Reply Quote 5
    • T
      travward @retoree
      last edited by

      @retoree Wow, Thanks! I'll let you know if I have any questions. Thanks you!

      1 Reply Last reply Reply Quote 0
    • T
      travward @retoree
      last edited by

      @retoree That worked! Thank you so much! Out of curiousity, does the custom.css file get blown away on updates? Or only the browser.html?

      retoree
      R
      luetage
      L
      2 Replies Last reply
      Reply Quote 0
    • retoree
      R
      retoree @travward
      last edited by retoree

      @travward they both will because the entire folder deleted on update.
      0_1510927137207_explorer_2017-11-17_18-58-48.png

      T
      1 Reply Last reply
      Reply Quote 0
    • luetage
      L
      luetage Supporters Soprano @travward
      last edited by

      @travward Your whole application gets replaced on update, this includes all changes and all files you add to it. But we have automatic batch scripts for all operating systems. if you use these, you are up and running in no time.

      github ◊ vfm

      1 Reply Last reply Reply Quote 0
    • T
      travward @retoree
      last edited by

      @retoree Now... I know you said this only works for tabs on top, but if I want to have an 'F-Key' that toggle tabs visible/non-visible the address bar drops down to where it was originally. What is making this do that? What are the limitations. {BTW, I am kinda green when it comes to coding.}

      retoree
      R
      1 Reply Last reply
      Reply Quote 0
    • retoree
      R
      retoree @travward
      last edited by

      @travward I updated the code in post above, try it.

      T
      1 Reply Last reply
      Reply Quote 0
    • iAN CooG
      I
      iAN CooG
      last edited by

      excellent, now that's the solution for those wanting the tab bar below the address bar.

      http://iancoog.altervista.org/
      --=[]=-----------------------------------------------------------------------=[]=--
      Windows10 64bits - 8core i9-9900K @ 3.60GHz - 16Gb RAM - nVidia GT1030

      1 Reply Last reply Reply Quote 0
    • T
      travward @retoree
      last edited by

      @retoree That's awesome. Thankyou!

      1 Reply Last reply Reply Quote 0
    • T
      travward
      last edited by

      @retoree BTW, the drop-down from the address bar shows up behind the tabs.
      0_1510930682994_80f3098e-89e5-4770-97f7-38586865e2e4-image.png

      1 Reply Last reply Reply Quote 0
    • retoree
      R
      retoree
      last edited by

      @travward this is really suspiciously. I don't have this problem. How about extensions pop-up's? I updated the code in post above again.

      iAN CooG
      I
      1 Reply Last reply
      Reply Quote 1
    • iAN CooG
      I
      iAN CooG @retoree
      last edited by iAN CooG

      @retoree it's now ok like this for me, address bar drop down, search bar dropdown and extensions popups are all drawn over the tab bar. You're really good at this.

      http://iancoog.altervista.org/
      --=[]=-----------------------------------------------------------------------=[]=--
      Windows10 64bits - 8core i9-9900K @ 3.60GHz - 16Gb RAM - nVidia GT1030

      1 Reply Last reply Reply Quote 0
    • T
      travward
      last edited by

      @retoree Awesome! That did it.

      burbuja
      B
      1 Reply Last reply
      Reply Quote 0
    • D0J0P
      D
      D0J0P @retoree
      last edited by D0J0P

      @retoree Thank you! I've been wondering how to put the address bar below the tab bar, and now I can do it! Here's how mine looks so far . . .

      Windows 10:
      0_1510988611668_d9649339-42d9-4555-adba-557c30583ccc.png

      Linux(Elementary OS):
      0_1510989345863_Screenshot from 2017-11-18 02.14.21.png

      Linux(Elementary OS w/Vivaldi in Native Window mode):
      0_1510989388915_Screenshot from 2017-11-18 02.14.48.png

      Would there be a way to also place tab stack indicators at the bottom of tabs? How about a way to place the V button and window control buttons on the address bar in Native Window mode? That would be perfect when I'm using Linux!

      I really love the way the address bar looks like on the top like with Safari, Brave, Midori/Epiphany, and the old FF. It just seems to make sense as it gives more screen real estate for the tab bar.

      Thanks for your contributions!

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

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