Skip to content

Quote design CSS

Solved Customisation
  • b9ed974b-9f21-43ef-ae64-02f2841139d6-image.png

    Hi I would like to change quote on my forum like this because I find it more logical but I break my head for not much with blockquote:after

    Any help would be appreciated 🙂

    Thanks in advance

  • b9ed974b-9f21-43ef-ae64-02f2841139d6-image.png

    Hi I would like to change quote on my forum like this because I find it more logical but I break my head for not much with blockquote:after

    Any help would be appreciated 🙂

    Thanks in advance

    @DownPW Something like this ?

    a09ccec1-5560-4924-8f75-9b63e71b0bef-image.png

    Here’s some CSS you can play with

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    
  • @DownPW Something like this ?

    a09ccec1-5560-4924-8f75-9b63e71b0bef-image.png

    Here’s some CSS you can play with

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    

    @phenomlab If you’d like the effect I use here, that’s this chunk of CSS code (but of course applies to posts directly)

    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid var(--response);
        top: 60px;
        content: "";
        position: absolute;
        left: 186px;
    }
    
  • @DownPW Something like this ?

    a09ccec1-5560-4924-8f75-9b63e71b0bef-image.png

    Here’s some CSS you can play with

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    

    @phenomlab said in Quote design CSS:

    @DownPW Something like this ?

    a09ccec1-5560-4924-8f75-9b63e71b0bef-image.png

    Here’s some CSS you can play with

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    

    yes exactly that 😉

  • phenomlabundefined phenomlab has marked this topic as solved on
  • @phenomlab If you’d like the effect I use here, that’s this chunk of CSS code (but of course applies to posts directly)

    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid var(--response);
        top: 60px;
        content: "";
        position: absolute;
        left: 186px;
    }
    

    @phenomlab said in Quote design CSS:

    @phenomlab If you’d like the effect I use here, that’s this chunk of CSS code (but of course applies to posts directly)

    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid var(--response);
        top: 60px;
        content: "";
        position: absolute;
        left: 186px;
    }
    

    What does he does ?

  • @phenomlab said in Quote design CSS:

    @phenomlab If you’d like the effect I use here, that’s this chunk of CSS code (but of course applies to posts directly)

    li.self-post .content:not(.isSolved [component="post/content"]):after {
        border-left: 20px solid transparent;
        border-top: 20px solid var(--response);
        top: 60px;
        content: "";
        position: absolute;
        left: 186px;
    }
    

    What does he does ?

    @DownPW This

    a2a8a94c-bd7e-435c-a356-00191f91f4be-image.png

  • Ak ok 😉
    Thanks Mark !!!

  • phenomlabundefined phenomlab referenced this topic on
  • @phenomlab said in Quote design CSS:

    blockquote:after {
    border-top: 20px solid #eee;
    top: 9px; /* changes to top position negates original bottom /
    content: “”;
    position: absolute;
    left: -19px; /
    changes to left position negates original right /
    }
    blockquote {
    font-size: inherit;
    border-left: 5px solid #eee;
    background: #eeeeee;
    border-radius: 6px;
    margin: 0 auto 40px;
    padding: 15px;
    position: relative;
    margin-left: 50px; /
    move to the right to allow space for speech bubble */
    }

    @phenomlab

    I can’t move the blockquote:after to the left 😞

    cb76027f-026a-4f5a-838d-1659bc114865-image.png

    6220f944-1394-42c2-b10d-ab4b3f6bfea9-image.png

  • @phenomlab said in Quote design CSS:

    blockquote:after {
    border-top: 20px solid #eee;
    top: 9px; /* changes to top position negates original bottom /
    content: “”;
    position: absolute;
    left: -19px; /
    changes to left position negates original right /
    }
    blockquote {
    font-size: inherit;
    border-left: 5px solid #eee;
    background: #eeeeee;
    border-radius: 6px;
    margin: 0 auto 40px;
    padding: 15px;
    position: relative;
    margin-left: 50px; /
    move to the right to allow space for speech bubble */
    }

    @phenomlab

    I can’t move the blockquote:after to the left 😞

    cb76027f-026a-4f5a-838d-1659bc114865-image.png

    6220f944-1394-42c2-b10d-ab4b3f6bfea9-image.png

    @DownPW did you add this line into blockquote ?

    margin-left: 50px; /* move to the right to allow space for speech bubble */
    

    You have to change this margin otherwise the :after sudonym won’t display as it needs to occupy the space left by the above CSS change.

  • @DownPW did you add this line into blockquote ?

    margin-left: 50px; /* move to the right to allow space for speech bubble */
    

    You have to change this margin otherwise the :after sudonym won’t display as it needs to occupy the space left by the above CSS change.

    @phenomlab

    If I use your code :

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    

    I have this :

    d2924d30-19d3-4946-a478-6a2953ed8d6b-image.png

  • @phenomlab

    If I use your code :

    blockquote:after {
        border-top: 20px solid #eee;
        top: 9px; /* changes to top position negates original bottom */
        content: "";
        position: absolute;
        left: -19px; /* changes to left position negates original right */
    }
    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 50px; /* move to the right to allow space for speech bubble */
    }
    

    I have this :

    d2924d30-19d3-4946-a478-6a2953ed8d6b-image.png

    @DownPW is this in production ?

  • @DownPW is this in production ?

    @phenomlab nope

  • PM to you

  • It’s Ok with this code 🙂

    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 20px; /* move to the right to allow space for speech bubble */
    }
    
    blockquote:after {
        border-left: 20px solid transparent;
        border-top: 20px solid #eee;
        top: 10px;
        content: "";
        position: absolute;
        left: -20px;
    }
    
  • It’s Ok with this code 🙂

    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 6px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
        margin-left: 20px; /* move to the right to allow space for speech bubble */
    }
    
    blockquote:after {
        border-left: 20px solid transparent;
        border-top: 20px solid #eee;
        top: 10px;
        content: "";
        position: absolute;
        left: -20px;
    }
    

    @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 🙂


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • 3 Votes
    6 Posts
    766 Views
    @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
    12
    1
    3 Votes
    12 Posts
    610 Views
    @crazycells ah, I see. That makes sense.
  • hover link effect

    Solved Customisation
    18
    1
    6 Votes
    18 Posts
    1k Views
    @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.
  • CSS3: Gradient Generator

    Development
    1
    1 Votes
    1 Posts
    242 Views
    No one has replied
  • Fontawesome 5

    Unsolved Customisation
    14
    1 Votes
    14 Posts
    996 Views
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • Multiple link on one ico non Navbar

    Solved Customisation
    7
    1
    2 Votes
    7 Posts
    589 Views
    yeah you’re right @phenomlab. Problem of NodeBB Version
  • Bug Navbar CSS

    Solved Customisation
    3
    1 Votes
    3 Posts
    399 Views
    Not better way. Thanks.
  • New "quote" feature added

    Announcements
    12
    1
    3 Votes
    12 Posts
    1k Views
    @phenomlab Inquiring minds will be curious. See my reply in the “Miscellany” thread, eh?