Automate Status Bar with CSS mod
-
@reyn Sorry it doesn't work for u, I guess u have to use the much longer codes, try replace 2nd line of
/* autohide buttons */
with this:#footer:not(:focus-within):not(:hover) .statusbar-left, #footer:not(:focus-within):not(:hover) .statusbar-right {visibility:hidden !important; transition: visibility 0s .51s !important;}
If this still doesn't work, then I'm out of idea.
-
With the latest Snapshot this CSS no longer applies. The HTML structure has changed.
#footer
no longer exists. -
@r3volution11 Thanks for the headup.
Guess i will have to do it all over again when stable version go public. :face_with_cold_sweat: -
If they keep what they have it's going to be a fun one. Elements aren't contained as well.
Perhaps they'll bring the structure back. They should!
-
OP codes r updated for v2.4!
-
@dude99 cheers mate, you are the best
(I still really don't get why this is not given as a native option - it doesn't seem that complicated to implement it and it really does make sense this way)
-
@sirien-neiris Most software UI are designed to be foolproof, in other words it need to be easily understand by ALL user in plain view - especially the dumb user.
Invisible/hidden user interactive element usually are consider taboo for software GUI design because it required much higher learning curve than visible elements for average user. Most user in general can only understand what they can see on the screen, & get confuse when certain feature activate without any visual cue (button or icon).
Best example would be the infamous removal of windows 8 Start button, replace by a few invisible pixels at the bottom left edge of the screen, it cause massive backslash because most windows user were confused by the lack of Start button to access the Start menu. Then with heavy promotion of TOUCH functionalities over this new changed in Microsoft launch campaigns, this massive oversight turn windows 8 launch into a PR nightmare that kill such useful UI design - MS later patched it with an annoying fake overlay Start button that constantly popup by accident when the pointer is somewhere near the lower left edge of the screen...
Such invisible/hidden UI design usually will need a good introduction to most user beforehand in order to teach them how to deal with the invisible/hidden GUI. Like the swipe gesture in iphone, Apple have to heavily promote it to teach the masses about this "revolutionary" feature when it's first introduced, & now it's a common feature in every smartphone!
-
Amazing CSS mod. 5 stars!
-
@dude99 well, actually - Vivaldi DOES have the option for disappearing Status bar and for no status bar but showing info overlay. It's both in settings. My original problem was, that there is no shortcut for switching between showing info overlay and showing status bar (only for switching status bar on/off).
The behavior of this mod is way better than "showing info overlay" option from standard settings. My complain above was, that I don't get why this is not the default behavior of status bar for this "info overlay" option, not why it is not default as such.
-
well, actually - Vivaldi DOES have the option for disappearing Status bar and for no status bar but showing info overlay. It's both in settings. My original problem was, that there is no shortcut for switching between showing info overlay and showing status bar (only for switching status bar on/off).
I did made similar request like yours ages ago but it never got pick up by V team. Luckily, I learn to mod Vivaldi with CSS later, so I decided to try DIY, & eventually end up with something even better than what I initially wanted. LOL
\The behavior of this mod is way better than "showing info overlay" option from standard settings. My complain above was, that I don't get why this is not the default behavior of status bar for this "info overlay" option, not why it is not default as such.
I think my previous post have address this, the behavior of invisible/hidden GUI is too unpredictable for most user (thus it need a lot of education & promotion to be adopted by masses successfully); & it's also not TOUCH friendly so it will cause problem for those who rely on touchscreen to interact with apps. Mobile is the norm for accessing the Internet now & touch screen is getting more common for laptop & desktop, so modern browser GUI design will always need to be touch friendly.
Anyway, you can made a request about this in the request forum & point 'em to this mod. Hopefully some dev will see this & adopt this mod as overlay mode behavior. But I won't hold my breath waiting for it...
-
@dude99 hey. I've just updated to 2.11.1811.33 and now the mod doesn't show the info for URL in bottom left corner on link overlay, but in bottom right (where, of course, it stays invisible...); any chance of update for this mod? <dog eyes>
-
@sirien-neiris Updated 1st post, now it should work as before.
-
@dude99 can I hold any hopes for "2.11.1811.49" update?
(how high-level CSS knowledge is required to adjust (not create, just adjust) mod like this? I feel I must be somewhat annoying coming here to bother you every time it stops working properly, if it was reasonably complicated I could try to learn to do it myself...)
-
@sirien-neiris I just tested it on Vivaldi 2.12.1867.3 and it works. And it's generally not complicated fixing CSS code, which has already been written. Normally the problem is that a classname has changed or similar. You just need to inspect the UI, figure out the cause and adjust the code. On the other hand, if you've never written CSS, it makes little sense to learn it just to fix one modification.
-
@luetage does it? I have now colored line on the bottom (shouldn't be there) and all controls from the bar moved to the left (which is for some reason less comfy / intuitive than it was on the right). Also, the whole bar now shows up (previously it was only the right part with controls)
-
@sirien-neiris Hi there. Are you happen to use other CSS mod, which might affecting statusbar? I have checked my latest posted code, it still work properly in Windows latest stable version. I don't do snapshot because it's too much work & I only can do windows platform cuz I don't use Mac & Linux.
Maybe u can try copy & paste the code from 1st post to your custom.css again? Hope this help.
EDIT: You can learn CSS yourself just like me by Google CSS beginner tutorial, then pick some free courses to follow. Or you can do what every newbie did & start from here: https://www.w3schools.com/css/.Normally it will take about 2 weeks to learn most of the basic (if you put in a few hours learning & practicing everyday). Then you will be able to start coding & modding various website or any CSS related software such as Vivaldi GUI & Stylus extension.
I think now is a good time to learn CSS if you are also affected by Wuhanvirus lockdown. You probably can become a pro by the end of this crisis... LOL
Stay home, Stay safe.
-
@dude99 hm. I officially declare myself to be a moron, sorry for bothering you, I of course should have tested my own mistakes first.
(I've just successfully tested what happens when you take the new "link" line and instead of inserting it AFTER the first link line in "browser" you insert it BEFORE the it. Obviously, it doesn't work as it is supposed to.)
2 weeks doesn't look that bad... I'm now learning some other stuff in InDesign, but may be I'll manage to master that soon enough to look at this as well - the ability to mod a little the UI in browser and websites seems it might come handy.
-
@sirien-neiris Hi, do you know now Vivaldi do support CSS mod via experiment feature?
-
Go to vivaldi://experiments/
-
Checked Allow for using of CSS modifications, then restart browser.
-
Go to Settings > Appearance > Custom UI modifications, create a folder to store the custom.css (outside of Vivaldi installed folder)
-
restart & now Vivaldi will apply all custom.css stored inside that folder, no need to reapply the mod by editing browser.html after every upgrade.
-
-
@dude99 I obviously do not
...and it seems to work great, thanks a lot again mate
I might miss those moments of my "coding heroism" after every Vivaldi update, though
-
Updated 1st post code & for alternative version with Clock button, go here: https://forum.vivaldi.net/post/380804