Vivaldi Forum mod



  • @potmeklecbohdan
    Ah thanks, this is working.
    I will try to find out for other OS as well.

    @luetage
    May I can ask if you are interested to include this to your forum mod in one of the next versions?
    I know it is more work to do as position of the icon change with different themes of the mod, for example.

    Thank you both, I will look in to CSS next days if I find out how to manage it for all OS.
    Have a nice day, mib



  • @mib2berlin The category number is included category links; to get the icon:

    1. inspect it
    2. its parent element has background-color in its style
    3. its ::before (expand the <i> to see it) has the content set via normal CSS.

    You have to include all subcategories, I guess you want the color and icon only from the OS top category.



  • @potmeklecbohdan
    Yep, was wondering why you have four category lines.
    Will play around a bit.

    win.png

    Cheers, mib



  • Was fun, seams to work now in all OS threads.
    I am not sure about the colors, depends on your theme.

    ### Icon setting for Android forum ###
    .page-topic-category-136 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-147 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-150 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-151 [component="post"]:not(.deleted) .post-tools::before {
        content: "\f17b";
        color: #a4c639;
        position: absolute;
        left: 30px;
        vertical-align: middle;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 17px;
        text-rendering: auto;
        
    }
    ### Icon setting for Linux forum ###
    .page-topic-category-35 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-112 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-139 [component="post"]:not(.deleted) .post-tools::before
    
    {
        content: "\f17c";
        #color: #3786d9;
         position: absolute;
        left: 30px;
        vertical-align: middle;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 17px;
        text-rendering: auto;
        
    }
    
    ### Icon setting for Windows forum ###
    .page-topic-category-32 [component="post"]:not(.deleted) .post-tools::before
    
    {
        content: "\f17a";
        color: #3786d9;
         position: absolute;
        left: 30px;
        vertical-align: middle;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 17px;
        text-rendering: auto;
        
    }
    
    ### Icon setting for OSX forum ###
    
    .page-topic-category-34 [component="post"]:not(.deleted) .post-tools::before
    
    {
        content: "\f179";
        #color: #3786d9;
         position: absolute;
        left: 30px;
        vertical-align: middle;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 17px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    

    Cheers, mib



  • @mib2berlin Yeah sure, why not. But I don’t think it makes sense to put this under every post, we could just let it float at the right end of the navigation bar.



  • @luetage
    Hehe OK, thinking of the dullest user like me need it in every post.
    I donΒ΄t understand, wich navigation bar?

    Mib



  • @mib2berlin The one that lets you navigate and is always visible at the top of the forum, it’s blue in standard theme.



  • @luetage
    Ah OK.



  • @mib2berlin I forgot about one thing, all that code can be shortened:

    /*### Icon setting for Android forum ###*/
    .page-topic-category-136 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-147 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-150 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-151 [component="post"]:not(.deleted) .post-tools::before {
        content: "\f17b";
        color: #a4c639;
    }
    
    /*### Icon setting for Linux forum ###*/
    .page-topic-category-35 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-112 [component="post"]:not(.deleted) .post-tools::before,
    .page-topic-category-139 [component="post"]:not(.deleted) .post-tools::before {
        content: "\f17c";
        color: #3786d9;
    }
    
    /*### Icon setting for Windows forum ###*/
    .page-topic-category-32 [component="post"]:not(.deleted) .post-tools::before {
        content: "\f17a";
        color: #3786d9;
    }
    
    /*### Icon setting for OSX forum ###*/
    .page-topic-category-34 [component="post"]:not(.deleted) .post-tools::before {
        content: "\f179";
        color: #3786d9;
    }
    
    /*### Common style for all the icons ###*/
    [component="post"]:not(.deleted) .post-tools::before {
        position: absolute;
        left: 30px;
        vertical-align: middle;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 17px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    


  • @potmeklecbohdan
    Very nice code cleanup, I will use this until @luetage have something to test.
    I guess I will use both, per post icon and navigation bar icon.
    To many times I post answers in the wrong forum.

    Cheers, mib



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

    VivaldiMod2.gif



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

    91946a02-bc18-499f-b6c9-1d0e14a80560-image.png



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

    68c1e886-c84b-43f9-848c-a0bb451a3a00-image.png



  • @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 πŸ˜€.

    2020-11-10_17-53-01-min.jpg

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


Log in to reply
 

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