Vivaldi MODS [CSS/JS]

Just an article which links several vivaldi mods — as modding section is growing up a lot.

I won’t link everything – almost impossible – but most useful mods found in forum, usually from modding section (sometimes from other forum areas).

Mods are chosen under a “non conflictual criteria”.
So I won’t usually link mods which could break other mods, never tested or broken by recent snapshot updates.
There are several mods: some are just CSS, some others are JS, some are CSS+JS and some others again could be CSS+JS+html with or without a “companion” extension. But you should find any info following the links.
Before start modding, you have to read and understand the pinned thread.
And all the info in the mod thread, or it will likely fail.
Now, we have an additional way to hook mods, if you prefer to avoid fiddle to much with browser.html.
Of course, you’ll still need to hook the injector there.
TIP: Don’t be tempted to hook every mod. Just choose the ones that are most useful to you.

 

 

[BOOKMARK MODS]


[Bookmark bar text on two rows]

[Bookmark bar mod (text on folder / icon on bookmark)]

 

[CHROMIUM (core) MODS]


[Chromium scrollbars in vivaldi style]

[Chromium pages skin (extension)]

[var(–Color) injector] (will expose vivaldi color themes variables when provided (eg: Linkspanel)

 

[EXTENSION AREA MODS]


[Change extensions icons with CSS]

[Disable extension buttons (via CSS)] (If you are not using toggle JS mod)

[Extension toggle mod] – [V2 (Show/Hide/Hidden] – [V3 Sets]

[Extensions on footer] (statusbar)

 

[FOOTER MODS]


[Footer mod (show as tool menu)]

[Footer on top] (aka known as status bar)

 

[PANELS/WEBPANELS]


[Move all panel buttons on top]

[Move hide/show panel button to right (if panel is on right)]

[Links Panel]

[Notes panel enhancement]

[Open panel on button mouseover]

[Panel overlay] (if you use floating panel, just use mode above)

[Semi-Transparent background on favicons]

[Session Panel mod]

[Webpanel zoom]

 

[SPEEDDIAL MODS]


[Transparent speed dial folders]

Scaling mods: speed dial handling is complex and not always work as expected, so I’ll leave the various configurations made below. You can test them ONLY one by one. By default, they rely on a fixed UI scale. Not meant to be dynamic.

[Pure CSS mod to have smaller dials (110% UI)] (Most used mod)

[Pure CSS hack to have smaller dials] (A big css hack to trick vivaldi UI. Built around 50% UI)

[JS/CSS mod for smaller dials] (Another experiment about speed dials)

 

[TABBAR MODS]


[Audio Icon Mod] (Only Windows)

[Active tab bold]

[Animated (reload) favicon on tab load]

[Background image visibility on dark backgrounds]

[Flash On tab Title Change]

[Hide tab bar when only one tab is opened]

[Pinned tab with custom indicator (for sidetabs)]

[Pinned tab with content (pin icon)]

[Scroll on top hovering .tab .title]

[Semi-Transparent background on favicons]

[Stacked Tabs mod]

[Tabs loading with color highlight]

[Tabs under urlbar]

[Tabs under bookmarkbar]

[Trash button near add button]

[Two rows of text on tabs] (need v2 RC version)

 

[TOOLBAR MODS]


[Background on urlbar buttons]

[Bookmark button (Urlbar)] (This will actually hide the bookmark bar)

[Change toolbar icons with CSS (via background image)]

[Change toolbar icons with CSS (via SVG path)]

[Hide add-bookmark preview (Urlbar)]

[Hide home button]

[Hide text in padlock by default (show on hover)]

[Incognito Button (Urlbar)]

[Move v button to toolbar] – [Left] – [Right]

[Sync button in urlbar (from tabbar)] (experimental, may not work)

 

[UI MODS (ENHANCEMENTS)]


[Alternative find-in-page bar]

[Compact panel sizes] (test)

[Confirm close mod]

[Transitions with window accent]

[Vivaldi://experiment color fix (“theme safe”)]

[Vivaldi focus theme]

[Vivaldi Mod for RGB cases] (sadly I can’t test this)

[White Flash Fix]

 

[USER FILES MODS] (Page Actions)
These mods are for webpages and should be placed under user_files. You can then access to them with <> icon in footer. Could be erased at any update, so keep a copy somewhere else.


[Follower tabs] (Method 2)

[Increase video player size]

Lascia un commento