Vivaldi Forum mod
-
So, the guy finally decided to learn to fly by himself by using the "User CSS" of this awesome mod. And the guy is tired because it's very very late here... When you start, you never finish... Go to bed now! Stop flying.
-
@Ornorm said in Vivaldi Forum mod:
the guy
Huh, wonder who that might be, heehee. You must be exhausted... but it's now so late that it's early, hence no longer worth going to sleep. So, coffee-up, & keep going!
-
@Ornorm Wow! Awesome! Yes, it's a little bit addictive .
BTW, where does the picture come from? I mean: I'm able to use a background image (Transparent Texture), but I never managed to be able to use one from my computer.
-
@hlehyaric It's a gif (might be distracting for some)
https://media.giphy.com/media/xTiQykLdYMyX2UAxj2/giphy.gif
To replace the Vivaldi logo, I tried to use one from my computer but, indeed, I didn't find the right way to do it so, I had to use an internet link as well. -
@Ornorm Thanks my friend . So you use a picture from an external source as I do.
You might want to get rid of that blue nav barβ¦ (yes, I'm a bad guyβ¦)
replace the Vivaldi logo
Do you mean go back to the red icon?
-
@hlehyaric It's a work in progress so I could change the nav bar next time (tonight? ).
Nope, I used my own "home made" icon.
-
@Ornorm I thought you were trying to revert to the red icon. My mistake.
Night is the best time to tinker the forum .
-
This guy tries to emulate the other one .
WIP. A lot of things to address. Looong night in sight .
Background pic: unsplash.
-
@hlehyaric I'm actually trying to change the
#submenu
based on your suggestion to change the nav bar. I can change the color without any problem but I couldn't add abackground-image: linear-gradient
. I see you have a picture. How did you handle it? (sharing our deepest secrets )Edit: sorry, the picture you've used isn't on the
#submenu
but on#vivaldi-header
... but my question remains open if you have a solution... -
@Ornorm Mine is transparent.
#submenu { background-color: transparent; }
Then the picture is the main pic.
-
@Ornorm Here's an example (from sjudenim's dark theme):
background-image: linear-gradient(135deg, rgba(10, 10, 10, .5) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .5) 50%, rgba(10, 10, 10, .5) 75%, transparent 75%, transparent) !important;
-
Hey youβ¦ youβ¦ you tireless tinkerers! Hereβs the right way to get rid of the ugly blue menu
Ignore the dark, it's Dark Reader.
(PS: don't understand me seriously )
-
@potmeklecbohdan said in Vivaldi Forum mod:
don't understand me seriously
Certainly not. You didn't even need to mention it. Your tone was obvious for me
@hlehyaric
Thank you guys, I'm finding something. I think I messed up a bit with the spacebar... it's working now. Just have to find the correct gradient or the picture I'll use. -
@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)