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
  • Widget | CSS customization

    Solved WordPress css
    53
    17 Votes
    53 Posts
    19k Views
    phenomlab
    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • 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.
  • 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
    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.
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • [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.
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    10k Views
    RiekMedia
    @phenomlab okay