Automate Status Bar with CSS mod
-
@dude99 that's so much better! thanks!!!
Also, sorry, I thought this was the only css I had added. It was ages ago when I found this and added it. Next time I ask someone for help I'll definitely include the css I'm using!(was using this)
-
@delfick Seen your custom.css file, I suggest you should separate each mod better with
/* MOD TITLE */
& a few lines in between each mod. This will help you in maintaining 'em easier in the future as they grew in numbers, cuz some of 'em will brake after major update & you will need to update/fix 'em. -
@dude99 Unfortunately the code doesn't work, the status bar disappears.
-
-
Add
background-color: #0ff8;
under#browser > footer > .toolbar-statusbar::before
section to see the trigger zone. Point at the trigger zone to reveal the status bar. -
If it doesn't work, then try disabled other CSS/JS mod you're using, then test again with just this CSS mod install.
-
If this CSS mod doesn't work alone without other mod, then please post a screenshot of your browser without any mod install. I need to know your toolbar setup to figure out what went wrong.
-
-
@dude99 Ah in that case it works, the trigger zone is thin and in the middle. I was trying to trigger it outside of the designated zone, near the right side of the window, and thought it wasn't working.
-
@dynamix You can move it to the right side by follow instruction in customization 2. Then if you need a bigger trigger zone you can increase the trigger zone height by increasing
height: 12px;
value in the same section. -
@dude99 Greetings. Is it possible to adapt this .css code of yours to the current Vivaldi browser? This mod does not work like this anymore. My address line is at the bottom.
/* Statusbar On Top */ .panel#downloads .DownloadItem-ActionButton.reveal svg { fill: white; border-radius: 10px; background: limegreen; box-shadow: 0 0 0px 1px limegreen; } .panel#downloads .DownloadItem-ActionButton.remove svg { fill: white; border-radius: 2px; background: tomato; box-shadow: 0 0 0 0.7px tomato; } #header { order: -1; } .toolbar-statusbar { order: -1; border: none !important; } /*#browser.color-behind-tabs-off*/ .toolbar-statusbar { background: var(--colorAccentBg); } .toolbar-statusbar .button-popup-arrow--above:before { top: -10px; bottom: unset; border-top: none; border-bottom: 10px solid var(--colorBgLight); } .toolbar-statusbar .button-popup-arrow--above { bottom: unset; top: 30px; }
-
@stardepp Sorry, I don't really understand your request. What do you want to accomplish with the CSS you posted? My guess is it relocate the statusbar to the top, & below the header? Do you want me to automate the statubar to move upward when you don't need 'em, or something else?
It's not really possible for me to do anything if I don't know your current toolbars setup, you should post a screenshot of your browser, & then let me know clearly what exactly you wanted.
Also, the first 2 block of code (before
#header
) seems like it's for the download panel's button, they have nothing to do with statusbar. -
@dude99 I remembered who wrote this mod, @Hadden89. He also updated this mod. And that also works for me.
https://forum.vivaldi.net/topic/38827/5-0-statusbar-on-top/2
-
@stardepp Uh, I still don't know what you want. Are you saying the code you posted no longer work with 5.5 stable, & you want me to make it to work, or something else?
-
-
@stardepp Ok, so you want me to automate it so that it will hide when you don't need it, correct? Just to be sure that's your request before I start write you a custom code for your specific setup...
How do you want it to autohide? Shrink into just a clock or hidden completely?
Also, do you want it to be floating (so not affecting the webpage position when autohide/show), or anchor in place as it is (will move the webpage up/down when autohide/show).
-
@dude99 All good, I'm happy with how it looks now, see my last screenshot, I don't need any help from you right now, but I really appreciate your help.
-
I tried putting the bar on the right and it doesn't work following your tips on the homepage what to do?
-
Putting the bar on the right isn't working following the instructions either. I even tried copying and pasting the code right from your instructions. It just positions itself to the left
-
-
@dude99 Got it to work no problem this time. Thanks!
-
@Balentay OP code updated again to made compatible with Compact Popup Page Zoom Gauge Control CSS mod.
-
I really like this mod for screen space but i would like to see link on hover like we have with status overlay. Any recommendations?
-
@Stormscion This CSS mod do show hover link's URL on the bottom left corner. Pls test this mod without other mod. If it's still doesn't work as expected, then pls show a pic of your browser setup (I need to see your toolbar setup) & state your Vivaldi version. Also, my mod only support stable version & not tested snapshot.