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...

    VivHeader.gif



  • @hlehyaric said in Vivaldi Forum mod:

    Night is the best time to tinker the forum

    Aka... Working in the shadows

    Aka...
    https://www.youtube.com/watch?v=IAZEWtyhpes



  • @Ornorm To answer your request, here we are. No more Fuji, windmills instead. Everywhere so blue.

    new forum .jpg

    new forum a.jpg



  • @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 :

    ec839695-1288-46ed-9e27-08336c325d34-image.png

    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 😢

    Picsou



  • @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) :

    385ff680-f5be-49d7-ac1e-1e6d1d6e5ed7-image.png

    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.

    dfdc920d-5c25-4274-a29a-59a16e2d34be-image.png

    • 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 ⬇ )

    ae2e7658-fe98-431d-86ef-2984b446f8d7-image.png

    • 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



  • @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?


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.