Skip to content

answers appearance css code request

Solved Customisation
11 2 4.1k 1
  • wrote on last edited by
    #1

    Hello !!!

    I think the way to post our answers in the topics is very great!!

    What’s good is that it only does it in the answers and not in the first POST if you are the author.

    Is it possible to share this code or is it too abused?

    2f651f90-a31e-4608-8011-29892c8ad517-image.png

    😉

  • Hello !!!

    I think the way to post our answers in the topics is very great!!

    What’s good is that it only does it in the answers and not in the first POST if you are the author.

    Is it possible to share this code or is it too abused?

    2f651f90-a31e-4608-8011-29892c8ad517-image.png

    😉

    wrote on last edited by
    #2

    @DownPW Sorry - I think I know what you mean, but could you elaborate in case I’m wrong ?

  • @DownPW Sorry - I think I know what you mean, but could you elaborate in case I’m wrong ?

    wrote on last edited by
    #3

    @phenomlab said in answers appearance css code request:

    @DownPW Sorry - I think I know what you mean, but could you elaborate in case I’m wrong ?

    Like the screenshot.
    Our answer is differnt like other replies on Post 😉

  • @phenomlab said in answers appearance css code request:

    @DownPW Sorry - I think I know what you mean, but could you elaborate in case I’m wrong ?

    Like the screenshot.
    Our answer is differnt like other replies on Post 😉

    wrote on last edited by
    #4
  • wrote on last edited by
    #5

    hmm i will test if it’s that

  • hmm i will test if it’s that

    wrote on last edited by
    #6

    @DownPW I think it is - let me know.

  • wrote on last edited by
    #7

    nope, none effect

  • nope, none effect

    wrote on last edited by
    #8

    @DownPW odd. That’s definitely the CSS.

  • wrote on last edited by DownPW
    #9

    hmmmm I’m obliged to add this code @phenomlab :

    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: #ccc;
    }
    }
    
    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"]) {
        background: #ccc;
        padding: 30px;
        border-radius: 4px;
        border-top-left-radius: 0px;
    }
    }
    

    But the result is odd :

    101cbb6f-3126-417a-84c9-162ddfb94db7-image.png

  • wrote on last edited by
    #10

    Better with this code:

    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: #ccc;
    }
    }
    
    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"]) {
        background: #ccc;
        padding: 30px;
        border-radius: 4px;
        border-top-left-radius: 0px;
        margin-left: 50px;
        margin-right: 20px;
    }
    }
    
    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid #ccc;
        top: 60px;
        content: "";
        position: absolute;
        left: 30px;
    }
    }
    

    05a141cf-6340-4871-b42d-e26fba4ddccb-image.png

  • Better with this code:

    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: #ccc;
    }
    }
    
    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"]) {
        background: #ccc;
        padding: 30px;
        border-radius: 4px;
        border-top-left-radius: 0px;
        margin-left: 50px;
        margin-right: 20px;
    }
    }
    
    @media (min-width: 1200px) {
    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid #ccc;
        top: 60px;
        content: "";
        position: absolute;
        left: 30px;
    }
    }
    

    05a141cf-6340-4871-b42d-e26fba4ddccb-image.png

    wrote on last edited by phenomlab
    #11

    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.

  • DownPW DownPW has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycells
    @phenomlab yes, it is thanks a lot…
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    168k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • Bug Navbar CSS

    Solved Customisation navbar css
    3
    1 Votes
    3 Posts
    2k Views
    DownPW
    Not better way. Thanks.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.