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 code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • how to hide "moved" badge with CSS?

    Solved Customisation nodebb
    12
    1
    3 Votes
    12 Posts
    4k Views
    phenomlab
    @crazycells ah, I see. That makes sense.
  • 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
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • Bug Navbar CSS

    Solved Customisation navbar css
    3
    1 Votes
    3 Posts
    2k Views
    DownPW
    Not better way. Thanks.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.