• Home
  • Categories
    • All Categories
    • Individual Categories
  • Recent
  • Popular
  • Tags
  • Users
  • Groups
  • Solved
Collapse
Sudonix

Sudonix DEV

Quote design CSS

Scheduled Pinned Locked Moved Solved Customisation
cssquote
15 Posts 2 Posters 179 Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #1

    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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #2

    @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 */
    }
    
    phenomlabundefined DownPWundefined 2 Replies Last reply
    1
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to phenomlab on last edited by
    #3

    @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;
    }
    
    DownPWundefined 1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab on last edited by
    #4

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

    This is my test signature

    1 Reply Last reply
    1
  • phenomlabundefined phenomlab has marked this topic as solved on
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab on last edited by
    #5

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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #6

    @DownPW This

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

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #7

    Ak ok 😉
    Thanks Mark !!!

    This is my test signature

    1 Reply Last reply
    0
  • phenomlabundefined phenomlab referenced this topic on
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #8

    @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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #9

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

    DownPWundefined 1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab on last edited by
    #10

    @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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #11

    @DownPW is this in production ?

    DownPWundefined 1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab on last edited by
    #12

    @phenomlab nope

    This is my test signature

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #13

    PM to you

    This is my test signature

    1 Reply Last reply
    1
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #14

    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;
    }
    

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    1
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #15

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

    1 Reply Last reply
    0

  • Login

  • Login or register to search.
  • First post
    Last post
0
  • Home
  • Categories
    • All Categories
    • Individual Categories
  • Recent
  • Popular
  • Tags
  • Users
  • Groups
  • Solved