Vivaldi Forum mod

[luetage]

Install (chrome web store)
Github

Over the last years the community has been working on an extension for Vivaldi Forum, giving you the ability to adapt the website’s look and functionality with themes and modifications. Vivaldi Forum mod tries to do for the forum, what Vivaldi does for the browser – providing you with the tools to make it your own.

---

Themes

Default Themes

We give you the option to keep using Vivaldi’s default light and dark theme together with all the modifications and improvements the extension provides. Choose either theme on the options page, then visit the forum settings, choose default skin for the light theme, or dark skin for the dark theme and hit »Save Changes« on the bottom of the page, then reload. When using a custom theme, make sure to keep the default skin selected.

Theme Machine

The inbuilt theme machine lets you design themes by defining 7 colors, similarly to the theme interface Vivaldi provides in its browser settings. Make sure all foreground colors (Foreground, Highlight, Link, Code) have sufficient contrast to your background color. You can import and share/export themes by copying and pasting the theme code. Here the default ones:

Theme Codes

{"themeName":"Ayu","colorBg":"#fafafa","colorFg":"#5c6773","colorHi":"#36a3d9","colorAc":"#d9d8d7","colorLi":"#f29718","colorCo":"#86b300","colorDd":"#f0eee4"}

{"themeName":"Dracula","colorBg":"#282a36","colorFg":"#f8f8f2","colorHi":"#50fa7b","colorAc":"#44475a","colorLi":"#ff79c6","colorCo":"#bd93f9","colorDd":"#6272a4"}

{"themeName":"Everforest Light","colorBg":"#efebd4","colorFg":"#5c6a72","colorHi":"#f57d26","colorAc":"#8da101","colorLi":"#8da101","colorCo":"#dfa000","colorDd":"#bdc3af"}

{"themeName":"Everforest Dark","colorBg":"#232a2e","colorFg":"#d3c6aa","colorHi":"#e69875","colorAc":"#a7c080","colorLi":"#a7c080","colorCo":"#dbbc7f","colorDd":"#56635f"}

{"themeName":"GitLook Light","colorBg":"#ffffff","colorFg":"#24292f","colorHi":"#fd8c73","colorAc":"#dbe9f9","colorLi":"#0969da","colorCo":"#2da44e","colorDd":"#e6e6e6"}

{"themeName":"GitLook Dark","colorBg":"#0d1117","colorFg":"#c9d1d9","colorHi":"#e37861","colorAc":"#13233a","colorLi":"#58a6ff","colorCo":"#99c8ff","colorDd":"#161b22"}

{"themeName":"Iceberg","colorBg":"#e8e9ec","colorFg":"#33374c","colorHi":"#6869ec","colorAc":"#757ca3","colorLi":"#2d5396","colorCo":"#3f83a6","colorDd":"#cad0de"}

{"themeName":"Kanagawa","colorBg":"#1f1f28","colorFg":"#dcd7ba","colorHi":"#6a9589","colorAc":"#2a2a37","colorLi":"#658594","colorCo":"#e6c384","colorDd":"#223249"}

{"themeName":"Palenight","colorBg":"#292d3e","colorFg":"#a6accd","colorHi":"#ff869a","colorAc":"#3b4084","colorLi":"#82b1ff","colorCo":"#c3e88d","colorDd":"#333747"}

{"themeName":"PaperColor Light","colorBg":"#eeeeee","colorFg":"#444444","colorHi":"#d75f00","colorAc":"#005f87","colorLi":"#005faf","colorCo":"#d70087","colorDd":"#005f87"}

{"themeName":"PaperColor Dark","colorBg":"#1c1c1c","colorFg":"#d0d0d0","colorHi":"#afd700","colorAc":"#5f8787","colorLi":"#00afaf","colorCo":"#ff5faf","colorDd":"#5f8787"}

{"themeName":"Rigel","colorBg":"#002635","colorFg":"#e6e6dc","colorHi":"#00cccc","colorAc":"#1c8db2","colorLi":"#1c8db2","colorCo":"#7eb2dd","colorDd":"#517f8d"}

{"themeName":"Solarized Light","colorBg":"#fdf6e3","colorFg":"#586e75","colorHi":"#af8700","colorAc":"#eee8d5","colorLi":"#268bd2","colorCo":"#2aa198","colorDd":"#eee8d5"}

{"themeName":"Solarized Dark","colorBg":"#002b36","colorFg":"#93a1a1","colorHi":"#af8700","colorAc":"#073642","colorLi":"#268bd2","colorCo":"#2aa198","colorDd":"#073642"}

{"themeName":"Tokyo Night","colorBg":"#1a1b26","colorFg":"#a9b1d6","colorHi":"#ff9e64","colorAc":"#2f334d","colorLi":"#f7768e","colorCo":"#7aa2f7","colorDd":"#1f2335"}

{"themeName":"Zenburn","colorBg":"#3f3f3f","colorFg":"#dcdccc","colorHi":"#8faf9f","colorAc":"#2e3330","colorLi":"#ffd7a7","colorCo":"#dca3a3","colorDd":"#2c2e2e"}

Theme previews

When sharing a theme on the forum it will be visible to users of the Vivaldi Forum mod as SVG, while the theme code itself will be hidden. Surround the code with 3 backticks ``` to display it in a codeblock, or it won’t work. Upon clicking on this representation, the theme is automatically imported to your install and activated. This makes it easy to try out a bunch of themes to see whether you like one. Click on one of the themes above to try out this feature.

Scheduled Themes

Similar to Vivaldi browser you can set a custom schedule for automatic theme changes. This can come in handy, just be aware it might fail should your computer go to sleep and miss the scheduled change. Reloading the tab will enable the schedule again and update your theme.

---

Modifications

User CSS

Input CSS code to modify Vivaldi Forum. This lets you write simple fixes and modifications. Here an example:

#vivaldilogin .tooltip {
    display: none !important;
}
code, kbd, pre, samp {
    font-family: monospace;
}

We also give you the ability to target specific themes. The name of the theme will be added as class to the body of the website upon load. Look up a theme’s class by hovering its name on the options page. Saving the User CSS will immediately load it on Vivaldi Forum, no need to reload the page!

.vfm_PaperColor_Dark #submenu li>a {
    color: pink;
}

It’s possible to use the .vfm-standard class to create your own custom theme this way, but you might as well copy your code into the standard.css file directly and enable it on the options page.

Default

Modification	Description
Menu entry for options page	Just a link to trigger VFM options.
Copy All Code Button	A button to copy all code when hovering a code element.
Link Button	A link button in post tools, which copies the link to the current post to the clipboard.
Theme Previews	Previously mentioned.
Unofficial Discord and Contribute links in footer	Just useful links.
Miscellaneous fixes	Numerous and too small to be worth the mention. Take a look at default.css.

Selectable

Select any number of modifications to adapt Vivaldi to your needs and preferences.

Modification	Description
Advanced formatting	Adds an emote picker and extra formatting buttons. Allows you to drag to reorder, remove from and add to the formatting toolbar when editing your forum posts.
Auto-Hide Header on Scroll	Hides the header when you scroll down, shows it when you scroll up.
Compact posts	Removes margin between user name and content. May break layout with large font sizes.
Bookmarks in Navigation	Displays a link to the bookmarks page in the main navigation for easy access.
Custom Notification Icons	Displays font icons in the header's notification dropdown to quickly distinguish one type of notification from another.
Show User IDs	Shows UIDs when hovering the username at top of a post and when hovering a user's avatar on their profile.
Signature mod	Hides all signatures and replaces each with a button. When clicked, the signatures of individual posts will be displayed.
Square avatars	Square avatars everywhere!
Use System Emoji	Use emoji font provided by the operating system instead of Vivaldi Forum emoji.

---

Translations

Vivaldi Forum mod 2.0 introduced translations. Following languages have been released and are being worked on actively:

• Czech
• French
• German
• Italian
• Japanese
• Russian
• Spanish
• Vietnamese

Want to help out? You can by deciding to

---

Contribute

Any input is appreciated. If you want to find out more about how to contribute, please take a look at the README section on Github.

A special thank you @

• bariton
• burbuja
• greenenemy
• Hadden89
• hlehyaric
• Isildur
• LonM
• nomadic
• pafflick
• potmeklecbohdan
• Rexfahrer
• Semenov-Sherin
• shifte
• sjudenim
• tam710562
• wiiija
• Zalex108

for writing code / helping out / translating the project.

---

Community Creations

A collection of themes and modifications developed for Vivaldi Forum

User	Theme/Modification
barbudo2005	Card view for forum boards and topics
bariton	{"themeName":"GitLook","colorBg":"#0d1117","colorFg":"#c9d1d9","colorHi":"#e37861","colorAc":"#13233a","colorLi":"#58a6ff","colorCo":"#99c8ff","colorDd":"#161b22"}
dude99	Vertical pagination
	Compact pagination block
	Autohide header alternative
	Alert loop animation
	Ergonomic composer
hlehyaric	{"themeName":"Leaves","colorBg":"#000000","colorFg":"#cdcdcd","colorHi":"#9c515c","colorAc":"#b63e62","colorLi":"#b9b9b9","colorCo":"#ffccd4","colorDd":"#040404"} + CSS
luetage	{"themeName":"Blau","colorBg":"#23273b","colorFg":"#d4efff","colorHi":"#ffffff","colorAc":"#1b2f4b","colorLi":"#96ffe0","colorCo":"#68a2f2","colorDd":"#223b5e"}
	{"themeName":"Private","colorBg":"#23234f","colorFg":"#c0c0f1","colorHi":"#fde25d","colorAc":"#404076","colorLi":"#5d78fd","colorCo":"#fd5d78","colorDd":"#3f3f8d"}
	{"themeName":"Zenburn","colorBg":"#3f3f3f","colorFg":"#dcdccc","colorHi":"#8faf9f","colorAc":"#2e3330","colorLi":"#ffd7a7","colorCo":"#dca3a3","colorDd":"#2c2e2e"}
	{"themeName":"Palenight","colorBg":"#292d3e","colorFg":"#a6accd","colorHi":"#f07178","colorAc":"#333747","colorLi":"#82aaff","colorCo":"#c3e88d","colorDd":"#333747"}
	{"themeName":"Rose-Pine","colorBg":"#191724","colorFg":"#e0def4","colorHi":"#ebbcba","colorAc":"#31748f","colorLi":"#f6c177","colorCo":"#9ccfd8","colorDd":"#26233a"}
potmeklecbohdan	{"themeName":"Everforest light","colorBg":"#f8f0dc","colorFg":"#5c6a72","colorHi":"#dfa000","colorAc":"#8da101","colorLi":"#8da101","colorCo":"#dfa000","colorDd":"#fdf6e3"}
	{"themeName":"Everforest dark","colorBg":"#2b3339","colorFg":"#d3c6aa","colorHi":"#dbbc7f","colorAc":"#a7c080","colorLi":"#a7c080","colorCo":"#dbbc7f","colorDd":"#2f383e"}
	{"themeName":"Beach flower","colorBg":"#464038","colorFg":"#d3bda5","colorHi":"#c49a93","colorAc":"#b4a377","colorLi":"#b4a377","colorCo":"#c49a93","colorDd":"#4b453d"}
shifte	Opened search field
sjudenim	Theme Dark‐Grey and Light‐Grey
wiiija	Theme Sprucey Bonus Dark

---

This is a feedback thread, constructive criticism is welcome. You can request features, report inconsistencies and share themes. Let me know what you think and have fun!

Easter Egg

[Gaëlle]

Huge congrats @luetage ! This is really amazing. We tested it internally and love it!
Thank you
Here's one of my favorite:

[Steffie]

@luetage You are seriously good! Thanks for this community gift.

[mib2berlin]

Yes, thank you very much.

Cheers, mib

[mib2berlin]

@Gwen-Dragon, hi, I don´t understand what you are talking about.
My englisch is a bit rusty.

Cheers, mib

[mib2berlin]

All clear now.

Cheers, mib

[luetage]

@Gwen-Dragon On the dashboard it isn't called developer's website, but "Link to website for your item", that's why I assumed for an extension it should be the site it is running on?

But no idea, If you think linking to Vivaldi forum looks malicious I'll take the link down.
lol

[luetage]

Oh yeah, I have to admit I never clicked this link on any extension before. It turns out most developers link to a webpage dedicated to the extension. Since this would be useless for a forum extension I'll just take it down.

[CheVe11e_191]

Awesome thanks

[zaibon]

Sweet - now reading with dark background - I really love it

[sjudenim]

Submitting DarkGrey and updating LightGrey

[dannilundgren]

Amazing! Thank you very much.

[zaibon]

There is one thing that irritates me a bit. When I click on "Reply" after the last post or hit reply to the last post and the text field pops up I can scroll down below the last post in the forum anymore. Most times I need this to quote some part of a post or reread something.

Without the extension this does work - or I screwed up the extensions settings that could be an option too.
I've set the forum mod to Sprucy Bonus Dark; Autohide header at scroll; Last Edit Time Stamp.

Any ideas?

EDIT: pics to show what I mean - both times I clicked on the reply button to my own post - than scrolled down as much as possible.
EDIT 2: Oh, I made some pics for ants - sorry for that. I fear you'll need to enlarge them to see something

[luetage]

Yeah, thanks for reporting this. It has nothing to do with auto-hide header on scroll, it works if you set the theme to standard. But it doesn't work if you select any of the custom themes. I don't know yet what is causing it, since the standard theme is also loaded from the extension. Will look into this a bit later. For now you can simply click the round composer button at the bottom right, which will hide the whole composer. There will be an update to the extension soon, hopefully I find out what is causing this by then.

[zaibon]

@luetage
No need to hurry just wanted to know if this is a bug or not - and yeah I forgot again about the blue button -.-' ehrm... thanks for reminding me ^^

[luetage]

Ok, found the problem. This will be fixed in the next update, likely today.

[luetage]

Update should be live now. However, I don't really know how fast the chrome store pushes these.

New in 0.52
-Theme DarkGrey by @sjudenim
-Logo animation by @wiiija
-Improvements to LightGrey and Sprucey Bonus Dark, bugfixes.

A big thank you @sjudenim for making such wonderful themes! The logo animation was pulled out of the Sprucey theme and made available as separate option for all themes. As a result you have to reenable it in options, if you want to keep using it in this theme.

[zaibon]

@luetage
Update is there - a thanks a lot for the instant fix

[zaibon]

I don't know how much time you want to spend to fix minor bugs especially if they are only of cosmetic nature with no functionality limited.
In case you plan to do so:

The one I found actually happens only with the following themes:

• DarkGrey
• LightGrey
• Sprucey Bonus Dark

When you hit the button to show Replies - the up-and-downvote buttons of the original post are cut by about a quarter.

[luetage]

@zaibon That's probably an easy fix. If you check it with developer tools you will notice that the reply simply overlaps the buttons -- even on the standard Vivaldi theme. You just don't notice it because the background is transparent there.