Vivaldi Forum mod
-
@Ornorm Not 100% convinced by the picture used (transparent hole at bottom left before scrolling down) but it's already better than before...
-
@hlehyaric said in Vivaldi Forum mod:
Night is the best time to tinker the forum
Aka... Working in the shadows
-
-
@hlehyaric Really nice work! Thank you for sharing.
-
Just sharing the code of the theme I now use if someone is interested.
I did take a bit of CSS code of the theme called "Mod" (only theme that has no attribution so I presume it was created by @luetage - thank you!)You can easily change the background gif by the picture of your choice if the moving waves are too distracting (personally, I like to see the sea )
The screen capture below gives you an overview of the result :
And the code is
Edit: the code has been updated with the new mods that have been published as replies to this post./** Theme based on the community theme "Mod" by luetage **/ /** Global theme background and colors **/ /* set background image of theme, the main panel part handles background with narrow screen widths */ body, main#panel.slideout-panel { background-image: url("https://media.giphy.com/media/xTiQykLdYMyX2UAxj2/giphy.gif") !important; color: #2a363b; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: 100% 100%; } /* Panel color - applicable for tiled forum tabs where one tab is too small to display the background image or when window width is smaller than 1199px */ @media (max-width: 1199px) { body, main#panel.slideout-panel { background-color: transparent; background-image : url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.o5YXHARzLud2KBeUpC_5ZQHaNK%26pid%3DApi&f=1") !important; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; } } /* transparency setting for the content + adjusted spacing */ #content { background-color: rgba(217,247,249,0.55); padding-right: 25px !important; padding-left: 25px !important; } .topic .posts>li a:hover { color: white; } /* category + various other hover backgrounds */ .categories>li:hover, .category>ul>li:hover, .notifications-list li:nth-child(even), #content .nav>li:not(.active)>a:focus, #content .nav>li:not(.active)>a:hover { background-color: rgba(20,139,224,0.35) !important; } .notification-list li.unread { background-color: rgba(20,139,224,0.35) !important; } .table-striped>tbody>tr:nth-of-type(even):hover { background-color: transparent; } /* change color of grey text */ .timeago { color: #e0f3f9; } .stats small { color: #e0f3f9; } .tag-item { color: #e0f3f9; } .tag-topic-count { color: #750750; } /* buttons */ #new_topic { background-color: #338dba; } #new_topic.active, #new_topic.focus, #new_topic:active, #new_topic:focus, #new_topic:hover { background-color: #71afc4; border-color: #0a7193; } .btn-default { color: #edf6f9; background-color: #71afc4; border-color: #0a7193; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { color: #edf6f9; background-color: #0bb2ea; border-color: #0bea86; } /* Menu (resized window) */ /* Menu background color and transparency */ @media (max-width: 1199px) { .slideout-menu { background-color: transparent; background-image: linear-gradient(145deg,rgba(11,70,165,0.9),rgba(41,111,146,0.7)); } /* Menu profile cover added at the top of the menu - update the number before "-profilecover.jpeg" with the number of your user ID */ .menu-profile { background-image: url("https://forum.vivaldi.net/assets/uploads/profile/110234-profilecover.jpeg"); background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; } } /** Header **/ /* Vivaldi Logo */ #vivaldilogo { background: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bc6b7c24-7748-4c6c-9171-107578bb927d/dakqp9y-ff2b13b5-2b08-4b9b-8c35-85fa6bdaebcb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYmM2YjdjMjQtNzc0OC00YzZjLTkxNzEtMTA3NTc4YmI5MjdkXC9kYWtxcDl5LWZmMmIxM2I1LTJiMDgtNGI5Yi04YzM1LTg1ZmE2YmRhZWJjYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.gjR74Q2IzDqZU9SoX9Lr4BcSxvl3ILlsiVF5n0ZFBjI") no-repeat; background-size: 50px 50px; position: inherit; margin-top: 5px; } #vivaldi-header #vivaldilogo, #vivaldi-header #vivaldilogo img { position: absolute; display: block; width: 50px; height: 50px; z-index: 98; } #vivaldilogo img { display: none !important; } /* Navigation bar */ #vivaldi-header>.row { padding: 0px 20px; width: 1200px; max-width: 100%; margin: auto; } /* Position adjustment of login menu in the header */ #vivaldilogin { top: 10px; } /* Adjustment of Vivaldimenu position and size */ #vivaldimenu a, #vivaldimenu li, #vivaldimenu a:hover, #vivaldimenu a:visited, #vivaldimenu a:focus, #vivaldimenu a:active { padding: 0px 15px 0px 15px; font-size: 15px; line-height: 64px; } #vivaldimenu li a:hover { background-color: #3779ce; color: white; } /* Add background image to submenu */ #submenu { background-color: transparent; /* background-image: linear-gradient(45deg, black, transparent); */ background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.xenosysusa.com%2Fimages%2Fhome%2Funder.png&f=1&nofb=1"),linear-gradient(rgba(35,111,219,0), rgba(120,181,201,1)) !important; background-blend-mode: darken; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; } /* Modify background color of quick search drop-down */ #quick-search-results.dropdown-menu.quick-search-results { background-color: #99c6db; } /* Modify background of notifications on hover */ ul.notification-list li:hover { background-color: #99c6db; } /** Miscellaneous **/ /* Bottom chat profile picture */ .taskbar .navbar-nav li.taskbar-chat a, .taskbar .navbar-nav li.taskbar-chat a:hover { background-size: contain; } /* Necro posts color change */ .topic .necro-post { color: rgba(17,127,127,.5); } /* Panels (search results) */ .panel { background: linear-gradient(rgba(255,255,255,0.5), transparent); }
-
@Ornorm I see you are busily
not sleeping
once again. You've caught the modding bug bigtime! -
@Steffie Following the country that doesn't exist market in the meantime... (ooooops)
-
@Ornorm That is soooooooo mean that i'd cry... if only i were real.
-
@Steffie Of course it is mean. I cry for myself as well and... I'm real
-
@Ornorm Oh wow, thatβs exactly why I created the theme It should serve as example for creating themes with transparency.
-
@Ornorm Wow! Breathtakingly awesome .
C'est autre chose que l'original trash-pourravissimesque-quelconque.
-
@Ornorm Sorry, I had to change the theme a bit because I didn't tell you the entire story...
I like to see the sea
It's true, but I also like to see the countryside when I feel small (small window or with tiled tabs).
It gives the possibility to have another background when the window is smaller (see picture below) :To have the same kind of result with the pictures of your choice, just add the following code to your theme and change the image source.
/* Panel color - applicable for tiled forum tabs where one tab is too small to display the background image or when window width is smaller than 1199px */ @media (max-width: 1199px) { body, main#panel.slideout-panel { background-color: transparent; background-image : url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.o5YXHARzLud2KBeUpC_5ZQHaNK%26pid%3DApi&f=1") !important; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; } }
-
@Ornorm Grandiose! Awesome!
Perfect, I like windmills and I like electric poles too! -
@hlehyaric I like traffic lights...
-
@Steffie Railway signals, yes. Traffic lights, no thanks.
-
-
@Steffie Silly me . I should have knownβ¦
-
@Ornorm Sorry again, I couldn't resist to go a bit further...
This update only concerns the menu when the window has a size smaller than 1199px.
- profile cover added to the top of the "resized" menu (I don't know if there is an easy way to find the user # (I had to use Inspect to find it out) but if you change the
url
number preceding-profilecover.jpeg
with your #ID, it will work (otherwise, just put the picture url of your choice. (I made a test with the #ID of another user (guess who?) and it worked )
- modification of color and transparency to be more in line with the global theme colors
The code :
/* Menu (resized window) */ /* Menu background color and transparency */ @media (max-width: 1199px) { .slideout-menu { background-color: transparent; background-image: linear-gradient(145deg,rgba(11,70,165,0.9),rgba(41,111,146,0.7)); } /* Menu profile cover added at the top of the menu - update the number before "-profilecover.jpeg" with the number of your user ID */ .menu-profile { background-image: url("https://forum.vivaldi.net/assets/uploads/profile/110234-profilecover.jpeg"); background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; } }
The code of the original post has been updated accordingly
- profile cover added to the top of the "resized" menu (I don't know if there is an easy way to find the user # (I had to use Inspect to find it out) but if you change the
-
@Ornorm For the love of humanity, someone intervene -- he's totally outta control now!
-
@Ornorm I'm shocked! It's atrociously appallingly scandalous. I thought you were a gentlemen. .
Well done. It's pretty addictive, isn't it?