Quote design CSS

[DownPW]

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

[phenomlab]

@DownPW Something like this ?

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]

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

@phenomlab said in Quote design CSS:

@DownPW Something like this ?

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

[DownPW]

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

@DownPW This

[DownPW]

Ak ok
Thanks Mark !!!

[DownPW]

@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

[phenomlab]

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

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

[phenomlab]

@DownPW is this in production ?

[DownPW]

@phenomlab nope

[DownPW]

PM to you

[DownPW]

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

[phenomlab]

@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