Vivaldi Forum mod

[hlehyaric]

Btw, now, usercss modifications apply directly without having to refresh the page.

[barbudo2005]

For those who like the cards view I suggest my Stylus CSS style for Vivaldi Forum for use it in User CSS.

/* FOR TOKYO NIGHT THEME */

/* THREAD LIST */

/* Outline */

li.row.clearfix.category-item

{outline: rgba(169,177,214,0.2) solid 2px !important;} /*Foregound color */

/* Outline and Highlight on Hover */

li.row.clearfix.category-item:hover

{outline: rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/* Separation of Threads */

.categories>li, .category>ul>li

{margin-bottom: 30px !important;}


/*Alternate color */

li.row.clearfix.category-item:nth-child(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/


li.row.clearfix.category-item:nth-child(odd)

{background-color: rgba(26,27, 38, 1.0) !important;} /*Background color */




/* POSTS LIST */

/* Outline */

ul.posts li

{outline: rgba(169,177,214,0.2) solid 2px !important; /*Foregound color */
margin-bottom: 30px !important;  /* Separation */}
	

/* Outline and Highlight on Hover */

ul.posts li:hover

{outline:  rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/*Alternate color */

ul.posts li:nth-of-type(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/

I do it for Tokyo Night theme. You can modify it accord your theme modifying the RGB colors:

THREAD LIST

Without CSS:

With CSS:

POSTS LIST

Without CSS:

With CSS:

Enjoy.

[A Former User]

The theme I apply everywhere recently:

{"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"}

[shifte]

Translation, "Land of the Rising Sun" is better than "Tokyo Night".

[hlehyaric]

@juanvase Here's the code:

body {
    background-image: url("https://xxxxxxxxxxxxxxxx");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: xxxx xxxx;
}

You have to choose a picture (mine comes from unsplash).
You have to play with center, bottom & top for background-position, e.g. center top or bottom left.

You may want to set the navbar as transparent:

#submenu {
    background-color: transparent;
}

Depending on the picture, you may have to put the same code in header.

#vivaldi-header {
    background-image: url("https://xxxxxxxxxxxxx");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: xxxx xxxxx;
}

[hlehyaric]

@juanvase Here we are:

/* Leaves */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:  #f6f6f6 !important;
    background-image: url("https://images.unsplash.com/photo-1599540017148-25049bd49fcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
}

/* Header */

#vivaldi-header {
    background-image: url("https://images.unsplash.com/photo-1599540017148-25049bd49fcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
}

#vivaldimenu a.current, #vivaldimenu a:hover,
.topic .posts>li .post-footer a:hover, .topic .posts>li .post-header a:hover, .posts-list .posts-list-item .topic-title:hover, a:hover, a:focus, .breadcrumb a:hover, .stats.text-muted {
    color: #cdcdcd;
}

#vivaldimenu a, #vivaldimenu a:hover {font-weight: 800}

#vivaldimenu > li:nth-child(2), #vivaldimenu > li:nth-child(3),  #vivaldimenu > li:nth-child(4),  #vivaldimenu > li:nth-child(5),
.dropdown-menu .badge {
    display: none;
}

a.dropdown-toggle,
a.dropdown-toggle img,
a.dropdown-toggle:active,
.navbar-default .navbar-nav>.open>a,
#search-form #search-button {
    color: #aed8f1  !important;
    background-color: transparent;
}

a.dropdown-toggle:focus,
a.dropdown-toggle img:focus,
a.dropdown-toggle:active,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
    color: #1c8db2 !important;
    background-color: transparent;
}

.unread-count:after {
    position: absolute;
    left: 23px;
    top: 6px;
    text-align: center;
    font-size: .9em;
    border: 0;
    color: #f6f6f6;
    background:transparent;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
button.btn.btn-link:hover {
    color: #75f0ff !important;
}

.dropdown-menu {
    margin: 0;
    border-radius: 4px;
}

.dropdown-menu>.top-divider {
    margin: -5px;
}

.dropdown-menu>.bottom-divider {
    margin: 0;
}

.dropdown-menu>li>a {
    padding: 1px 13px;
    line-height: 2.5;
}

.header .notif-dropdown-link {
    border-top: 1px solid #1c8db2;
}

li.divider {
    background-color: #1c8db2 !important;
    margin: 5px 10px !important;
}

/* Submenu */

#submenu {
    background-color: transparent;
}

#submenu li>a {
    color: #15bbd0 !important;
}

#submenu a:focus, #submenu a:hover,
#submenu li.active>a:hover, #submenu li.active>a {
    color: #ffffff !important;
    background-color: transparent;
}

span.visible-xs-inline.showmenutext:not(.slideout-menu) {
    display: none !important;
}

/* Content */

#content {
    background-color: rgba(0,15,26,0.2);
    border-radius: 10px;
    padding-top: 15px !important;
    margin-top: 40px !important;
}

.account .initialised, .account .cover {margin-top: 70px;}

.categories>li .content h2, 
.categories .category-children, 
.categories .description, 
.category .category-children, 
.category .description, 
.subcategory .category-children, 
.subcategory .description {
    margin-left: 0;
}

.categories>li .card, 
.category>ul>li .card, 
.category>ul>li:not(.unread) .card {
    border-left: 1px solid #9ea0a0 !important;
    border-radius: 4px;
}

.category>ul>li:nth-child(odd),
.subcategory>ul>li:nth-child(odd),
.category .category-item:nth-child(odd), 
.topic .topic-item:nth-child(odd) {
    background: rgba(0,102,133,0.1) !important;
    border-radius: 4px;
}

.categories>li,
.category>ul>li {
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}

.categories>li:hover,
.category>ul>li:hover, {
    background-color: transparent !important;
}

.category-children a small:hover {
    color: #b4b4b4 !important;
}

.page-categories .teaser.hidden-xs {
    position: absolute;
    right: 0;
} 

div.shadow-box3, .topic .topic-header, .topic-list-header, 
#search-button {
    background: transparent !important;
}

.topic-list-header, .input-group-addon,
.chat-modal [component="chat/composer"] [component="chat/input"], 
.chats-full [component="chat/composer"] [component="chat/input"] {
    border: none !important;
}

hr,
.topic .topic-info,
.topic .posts>[component=post], 
.topic .timeline-event {
    border-color: #858585 !important;
}

.topic .posts>[component=post] .avatar, .topic .timeline-event .avatar,
.form-control:focus {
    box-shadow: none;
}

.topic .posts>[component=post]:first-child {
    padding-top: 12px;
}

.topic .posts>[component=post]:last-child {
    padding-bottom: 15px;
}

.posts-list .posts-list-item .topic-category a, 
.posts-list .posts-list-item .post-info .post-author span.timeago, 
.stats small, .breadcrumb .fa, .tag-item, 
.account .profile .account-stats .stat-label, 
.account .profile .profile-meta span {
    color: #cdcdcd;
    opacity: 1 !important;
}

small.pull-left a {color: #b9b9b9 !important;}

.avatar.avatar-xs,
.page-categories .hidden-sm.hidden-xs.stats,
.topic .pagination-block,
.categories-title,
.subcategory>p,
.categories>li .content .icon, 
.category>ul>li .content .icon,
li.deleted {
    display: none;
}

#vivaldifooter a {
    background: transparent;
    color: #f6f6f6 !important;
}

#vivaldifooter p {color: #9ea0a0;}

/*  Divers */

.answered {
    border: 1px solid #f18a97;
    border-radius: 4px;
    color: #f18a97;
}

.topic [component="topic/labels"] .answered {
    color: #f18a97;
    border-radius: 4px;
}

.posts [component=post][data-index="-1"].isSolved {
    background-color: rgba(137,78,86,0.2);
    border: none !important;
    border-right: none !important;
    border-left: 5px solid #894e56 !important;
    border-radius: 4px;
}

.unanswered {
    border: 1px solid #9c515c;
    border-radius: 4px;
    color: #9c515c;
}

.topic [component="topic/labels"] .unanswered {
    color: #9c515c;
    border-radius: 4px;
}

span.votes .upvoted .fa-chevron-up::before {
    color: #01ab31 !important;
}

.topic .votes [component="post/vote-count"] {
    background-color: none;
    color: #75f0ff !important;
}

blockquote {
    background-color: rgba(0,56,77,0.3);
    color: #f6f6f6;
    border-radius: 4px;
}

blockquote, .topic [component="post/replies"] {
    border-left: 5px solid #ff7375 !important;
}

.notifications-list li:nth-child(odd), 
.notifications-list li.unread:nth-child(odd) {
    background-color: rgba(26,39,49,0.8) !important;
    border-radius: 4px;
}

.notifications-list li:nth-child(even), 
.notifications-list li.unread:nth-child(even) {
    background-color: rgba(51,63,72,0.8) !important;
    border-radius: 4px;
}

code {
    background-color: transparent !important;
    color: #ffc8cf !important;
    border: 1px solid #bd5172;
    border-radius: 4px;
}

pre code, div.content pre code  {
    background-color: rgba(28,28,28,0.8) !important;
    color: #f5b0c4 !important;
    border-radius: 4px;
    border: 1px solid #009e82;
}

pre {
    border-radius: 4px;
    background-color: rgba(26,26,26,0.8);
}

/* Usercard */

.persona-usercard {
    background-color: #007a00;
    border-radius: 4px;
}

.persona-usercard .usercard-picture {
    color: #b63e62;
    border-radius: 4px;
}

.usercard-info small {
    color: #ffd7e5;
    opacity: 1;
}

.fab.btn-morph.plus>span>span, .btn-morph {
    background-color: #040404;
    border-radius: 4px;
}

.fab.btn-morph.heart>span>span {background-color: #f5b0c4 !important;}

.btn-morph.fab.plus {
    background-color: #f5b0c4;
    border-radius: 4px;
}

/* Alert */

#reconnect-alert.alert.alert-dismissable.alert-warning.clearfix {
    background-color: rgba(4,4,4) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border-left: solid #ff368f !important;
    box-shadow: none !important;
}

.alert.alert-danger, .alert.alert-info, .alert-window .alert.alert-info {
    background-color: rgba(4,4,4,0.8) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border: none;
}

.alert-window .alert.alert-success {
    background-color: rgba(4,4,4,0.8) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border-left: solid #009682 !important;
}

.alert.alert-success::before {
    background-color: #009682 !important;
}
    
.alert.alert-warning {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0px 0px 5px 0px #15bbd0;
    border-radius: 4px;
    color: #15bbd0;
}

.alert-window .close {
    color: #b63e92;
    opacity: 0.4;
}
.alert-window .close:hover, .alert-window .close:focus {
    color: #b63e92;
    opacity: 0.85;
}

/* Buttons */

a.btn.btn-xs.btn-default.hidden-xs {
    padding: 3px 8px !important;
    color: #ececec !important;
    font-size: .8em;
}

.btn-primary, .btn-primary[disabled], .account .cover .indicator, .account .cover .save, .btn-danger, .btn-success, a.list-group-item {
    border: 1px solid #b86c7e  !important;
    background-color: #b63e62;
    color: #fbfbfb !important;
    border-radius: 4px;
}

.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary, .account .cover .indicator:hover, .account .cover .save:hover, a.list-group-item:focus, a.list-group-item:hover {
    background-color: #b63e62;
    border-radius: 4px;
}

.btn-primary.form-control, .btn-info, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, 
.open>.dropdown-toggle.btn-info, .btn-danger:hover, .btn-danger:focus, .btn-success:hover, .btn-success:focus, 
a.btn.btn-xs.btn-default.hidden-xs:hover {
    background-color: #b63e62 !important;
    border: 1px solid #b86c7e !important;
    color: #fbfbfb !important;
    border-radius: 4px;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .open>.dropdown-toggle.btn-default {
    background-color: transparent !important;
    border-color: #00a1a1 !important;
    color: #00a1a1;
    border-radius: 4px;
}

.btn-default:hover,
.btn.btn-default,
.topic .posts .content .toggle,
.btn-primary:active,
.btn-primary:focus {
    background-color: transparent;
    border: 1px solid #ececec !important;
    color: #ececec;
    border-radius: 4px;
}

.btn-group.account-fab .fab, .taskbar .navbar-nav li.taskbar-composer a, .taskbar .navbar-nav li.taskbar-composer a:hover, .taskbar .navbar-nav li.taskbar-composer a:focus {
    background-color: #b63e62;
    border-radius: 4px;
}

/* Composer & Form */

html.composing .composer {
    left: 0%;
    width: 100%;
}

.composer .resizer .trigger i {
    border-radius: 4px;
}

.composer, .form-control, #inputAboutMe, #inputSignature,
.search .post-search-item .bootstrap-tagsinput {
    background-color: rgba(8,13,33,0.4);
    color: #ffd4e4;
    border: none;
    border-top: none !important;
    border-radius: 4px;
}

.composer .write {
    color: #ffd4e4;
    background-color: #000f1a;
    border-color: #67485a;
    border-radius: 4px;
}

.composer .write:focus {
    border: 1px solid #ffccd4 !important;
}

.composer .preview {
    background-color: #04121b;
    border-color: #b86c7e;
    color: #f6f6f6;
    border-radius: 4px;
}

.composer .formatting-bar .formatting-group li:focus, .composer .formatting-bar .formatting-group li:hover {
    background-color:  transparent !important;
    color: #458c68;
}

#quick-search-results.quick-search-results, 
#quick-search-container.quick-search-container {
    display: none !important;
}

#advanced-search .panel, #advanced-search .panel-heading, .panel, .well {
    background-color: transparent;
    border-radius: 4px;
}

.fa-ellipsis-v, 
.taskbar .navbar-nav li.taskbar-chat a i, 
.taskbar .navbar-nav li.taskbar-composer a i 
    {color: #ffffff !important;
}

/* Pagination */

.pagination>li>a, .pagination>li>span {
    background-color: transparent;
    border: none !important;
    color: #188a97 !important;
}

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    background-color: #458c68;
    color: #f7f1db !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #116418 !important;
    color: #c5f7f7 !important;
}

.pagination>.disabled>a, .pagination>.disabled>span {
    background-color: transparent;
    color: #46b542 !important;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: #01213b;
    border-radius: 4px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color: #009e82;
    color: #ececec !important;
    border-radius: 4px;
}


/* Chat */

.taskbar .navbar-nav li.taskbar-chat a, .taskbar .navbar-nav li.taskbar-chat a {
    border-radius: 4px;
}

{"themeName":"Leaves","colorBg":"#000000","colorFg":"#cdcdcd","colorHi":"#9c515c","colorAc":"#b63e62","colorLi":"#b9b9b9","colorCo":"#ffccd4","colorDd":"#040404"}

I'm afraid you might experience some inconsistencies as I've also slightly moded custom.css in extension folder (where I put a lot of border-radius: 4p; for example). Edit: All necessary code is in userCSS above.
Btw, there's also a lot of transparency…

Edit: I forgot, here's the original picture.

[luetage]

@barbudo2005 When you write code for a specific theme, you can use the theme’s class in the body of the site to target it specifically. This has the advantage that you can leave all your code active when switching themes. Like so:

/* FOR TOKYO NIGHT THEME */

/* THREAD LIST */

/* Outline */

.vfm_Tokyo_Night li.row.clearfix.category-item

{outline: rgba(169,177,214,0.2) solid 2px !important;} /*Foregound color */

/* Outline and Highlight on Hover */

.vfm_Tokyo_Night li.row.clearfix.category-item:hover

{outline: rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/* Separation of Threads */

.vfm_Tokyo_Night .categories>li, .category>ul>li

{margin-bottom: 30px !important;}


/*Alternate color */

.vfm_Tokyo_Night li.row.clearfix.category-item:nth-child(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/


.vfm_Tokyo_Night li.row.clearfix.category-item:nth-child(odd)

{background-color: rgba(26,27, 38, 1.0) !important;} /*Background color */




/* POSTS LIST */

/* Outline */

.vfm_Tokyo_Night ul.posts li

{outline: rgba(169,177,214,0.2) solid 2px !important; /*Foregound color */
margin-bottom: 30px !important;  /* Separation */}
	

/* Outline and Highlight on Hover */

.vfm_Tokyo_Night ul.posts li:hover

{outline:  rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/*Alternate color */

.vfm_Tokyo_Night l.posts li:nth-of-type(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/

The class name can be looked up when hovering the theme name on the options page.

[A Former User]

@luetage Hmm… looking at the code a lil bit, could you add --*-rgb vars as well? I mean, you could do crazy stuff like

--color0: #dfddc8; --color0-rgb: 223, 221, 200; --color0-r: 223; --color0-g: 221; --color0-b: 200;--color0-h: 55; --color0-s: 26; --color0-l: 83;

but I think -rgb should be enough.

[luetage]

@hlehyaric Just as with Vivaldi modding where you shouldn’t edit common.css, in VFM you shouldn’t edit custom.css. The code will be replaced on update and you can’t simply save your version and implement it again, because there will likely be changes to the file. Make your adjustments in User CSS, it’s the code that runs last and will override everything else. It’s meant to serve your use case exactly.

[hlehyaric]

@luetage Yes, you're right. I know I shouldn't. It's just laziness, to spare me from writing lines in usercss… Btw, I have a back up of the moded file, just in case.

[barbudo2005]

@luetage What would be nice for those that use the User CSS is the possibility to use :

.vfm_Tokyo_Night li.row.clearfix.category-item:hover

{outline: var(--colorCo) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    

Is it possible?

[luetage]

@potmeklecbohdan I looked at this some time ago and thought about doing the whole thing in hsla when I redid the color calculations. But I noticed I didn’t really need transparency, other than for text where opacity can be set separately.

[luetage]

@barbudo2005 Yes, if you don’t have vfm-standard active you can use the color variables. They are visible in the elements/styles tab in developer tools. There you will find the calculated colors too, it’s 20 variables overall.

[Hadden89]

As VFM was revamped, it would be nice to have a separate thread for usercss mods. They are easy to lose here mixed with the extension itself feedback ^^

[A Former User]

@luetage I meant them just for the user CSS – see, @barbudo2005 and @hlehyaric are both using transparency, & for semi-transparent elements opacity doesn’t really work.

[luetage]

@hadden89 This would get confusing in a separate topic too, because at some point it will be filled with outdated mods and support questions. It’s the same situation as with Vivaldi Modding, separate topics would have to be created for each modification. We could collect both themes and modifications as links from the original post. Don’t know.

[A Former User]

One thing that I’ve been putting off – why are you using non-generic fonts? I want just sans-serif, that’s why I’ve spent time configuring a lot of things to use it.

[luetage]

@potmeklecbohdan You mean on the options page? It’s the same string as on the forum to keep it consistent, but this could be changed to just sans-serif of course. Personally I tackle this with font substitutions on linux. You can edit your local.conf file in etc/fonts and start substituting generic fonts like, Helvetica/Neue, Georgia, Verdana, Times New Roman, etc. with nice open source substitutions from your own font collection. For example I substitute all fonts in the common string Menlo,Monaco,Consolas,"Courier New" with Fira Mono, to have a nice monospaced font everywhere on the web (as long as webfonts aren’t being used, in which case they hopefully use something decent).

[A Former User]

@luetage said in Vivaldi Forum mod:

You mean on the options page?

Yes.

It’s the same string as on the forum to keep it consistent, but this could be changed to just sans-serif of course.

Damn web designers. But since you have a reason for it, keep it.

Personally I tackle this with font substitutions on linux. You can edit your local.conf file in etc/fonts file and start substituting generic fonts like, Helvetica/Neue, Georgia, Verdana, Times New Roman, etc. with nice open source substitutions from your own font collection. For example I substitute all fonts in the common string Menlo,Monaco,Consolas,"Courier New" with Fira sans, to have a nice monospaced font everywhere on the web (as long as webfonts aren’t being used, in which case they hopefully use something decent).

Thanks for reminding me of that

[code3]

@luetage said in Vivaldi Forum mod:

Personally I tackle this with font substitutions on linux. You can edit your local.conf file in etc/fonts file and start substituting generic fonts like, Helvetica/Neue, Georgia, Verdana, Times New Roman, etc. with nice open source substitutions from your own font collection

Thanks!