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…
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    3k Views
    Sala
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    173k 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.
  • tag icon in front of tags

    Solved Customisation css
    5
    3 Votes
    5 Posts
    2k Views
    crazycells
    @phenomlab said in tag icon in front of tags: @crazycells Are you using Font Awesome Free ? If so, try this span.tag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; margin-right: 5px; margin-left: 5px; font-weight: 900; } yeap, this worked thanks a lot.
  • [NODEBB] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    12k Views
    DownPW
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • 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.