Vivaldi Forum mod



  • @mib2berlin For this, I’d use

    [component="post"] {
        position: relative;
    }
    

    and in the original CSS, replace the margin-right line with

        position: absolute;
        left: 10px;
    


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


Log in to reply
 

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