Skip to content

Visual enhancement to best answer

Moved Let's Build It
  • As much as I dislike Stack Overflow (see the below video for examples - it’s one of reasons why I created Sudonix in order to establish a fairer experience. This is an issue that sadly, has been rife on SA for years - in essence, it’s something of a toxic experience)

    However, I do like the way they show accepted answers to posts

    Below is an example

    c6cc51fa-90cf-4947-8d11-f690895aa2dc-image.png

    Simplistic, but effective. I also like the way it’s presented in NodeBB, so decided to create something of a “mash-up” to share with others.

    Here’s the default NodeBB experience

    7c14f469-bda4-4ba8-a567-680f7f916bc7-image.png

    It’s effective - green border, with “solution” clearly stamped on it. Let’s take this a bit further with how we do this on Sudonix

    66f96dd4-4d2f-489b-9b7c-e681c19fd6e4-image.png

    Snazzy eh ?? 🙂

    In reality, this isn’t difficult to do at all. Essentially, we just use the CSS :after technique like below

    .posts [component=post][data-index="-1"].isSolved:before {
        border-radius: 4px;
        top: -0.25rem;
    }
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 400;
            color: #77B300;
        }
    

    Note that I’m using the Pro version of Font Awesome here, so if you want to use Font Awesome Free, you’ll need to substitute the block as below

        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Free";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 900;
            color: #77B300;
        }
    

    As I’m also using an absolute placement here, it’s important I define two viewport classes, so

    @media (min-width: 1200px) {
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 43px;
            right: 35px;
            font-size: 3rem;
            font-weight: 400;
            color: #77B300;
        }
    }
    

    And for mobile

    @media (max-width: 767px) {
        .isSolved .clearfix.post-header {
            margin-left: 5px !important;
            margin-top: 20px;
        }
        .isSolved:after {
            content: "\f058";
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 14px;
            right: 97px;
            font-size: 2rem;
            font-weight: 400;
            color: #77B300;
        }
    }
    

    This means that in mobile view, I get the below

    e1a4443c-407f-4749-ba31-ac8d97327b60-image.png

    And when you combine CSS, imagination, code blocks, and real answers for real people, you get something like this

    ece7dabc-81ea-45ac-8711-e4411c573290-image.png

    Enjoy…

  • phenomlabundefined phenomlab moved this topic from Announcements on
  • Looks very great !!

    Good job Mark and Thanks for sharing 🙂

  • I have test your code on my forum @phenomlab

    And I have this problem with police block content :

    8a1b7e9b-9fe8-4bfc-934b-be772ae49114-image.png

    I resolv it by adding padding bottom on content with this code:

    .isSolved .content {
        padding-top: 25px!important;
    }
    

    And I use this code for desktop :

    .isSolved:after {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        padding-left: 10px;
        padding-bottom: 10px !important;
        top: 40px;
        right: 40px;
        font-size: 2.5rem;
        font-weight: 400;
        color: #5cb85c;
    } 
    

    And this for Mobile:

    @media (max-width: 767px) {
    .isSolved .clearfix.post-header {
        margin-left: -8px !important;
    }
        
    .posts [component=post][data-index="-1"].isSolved:before {
        margin-right: -10px;
    }
     
    .isSolved:after {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        top: 40px;
        right: 30px;
        font-size: 2.5rem;
        font-weight: 400;
        color: #77B300;
    }
    }
    

    RESULT:

    Desktop:

    d90f682c-a432-4b05-96a9-ae72e9ec47d9-image.png

    Mobile:

    0c7db06d-5b42-4f23-908a-5761d83b08b5-image.png

    Thanks Mark

  • @DownPW yes, I actually hide the welcome message on topics so I never factored this in 👍

  • Me too, disabled on mobile.

  • @DownPW Just reviewing this, as I just experienced the same symptoms as you. I decided on the below CSS, which might work better

    @media (min-width: 1200px)
    .isSolved p {
        width: 95%;
    }
    }
    

    Some examples of how this looks.

    On shorter messages, you don’t really notice the lesser width. Essentially, we go from this

    921d63b9-bc02-4f28-947c-df696d88b33e-image.png

    to this

    7ef5465c-e75d-40fe-b856-494f10211a81-image.png

    On larger messages, it looks as below

    3168cd33-9984-4553-9c56-dd9fc9972a44-image.png

    Because we only target the p element, and nothing else, the text width gets reduced, but other elements remain unchanged, so you don’t really notice the width being reduced 🙂

  • Oh yeah great 🙂

  • phenomlabundefined phenomlab moved this topic from Guides on

Related Topics