XF 2.1 A way to create a QUOTE bb code

[DCMS]

Hello,
in Xenforo there is by default a bb code for Quote, with a pretty left side colored border and very light background color.

I want to make a different modes of the Quote for many puropose, one with red colors, one with green colors, yellow etc...
For do this i know that i have to create a newq custom BB code.
But i don't know the code for cloning the Quote of xenforo.

Can you help me please?

 

[DCMS]

build it :

<div style="border: 1px solid; border-color: #e0e0e0; margin: 0; border-left-width: 2px; border-left-color: red; background: #feeded; border-radius:0px;">
    <div style="padding:10px;">{text}</div>
</div>

 

[DCMS]

ok i have a problem now, this is my definitive code:

<div style="border: 1px solid; border-color: #e0e0e0; border-left-width: 2px; border-left-color: red; background: #fef6f6;">
    <div style="padding:10px 15px 10px; font-size:10pt">{text}</div></div>

the result, is a strange margin tob and bottom my div. i tried to inserti a custom margin-top and bottom but...no way...it remain in this mode.
Blue is the Xenforo default Quote.
Red is mine custo BB code.

 

[Paul B]

Try this:

 

[DCMS]

Try this:

View attachment 233535

Oh man.... mm.. and where is it?

 

[Paul B]

Advanced options for the bb code.

 

[DCMS]

Advanced options for the bb code.

Very very cool, it work!
thanks.
The result is this :


EDIT: NOPE, i had put a margin-bottom:10px yesterday, i forgot this.
the real result without margin css is this:



Ia have to re-put margin-bottom 10px css...

 

[Paul B]

The default quote bb code has a bottom margin.

 

[DCMS]

Yes, i see before.
But it not function for my code, i need to use top margin and all is great with and without mixing the original and custom quotes.
this is my definitive code for a Custom Quote in BB code:

<div style="margin-top:10px; border: 1px solid; border-color: #e0e0e0; border-left-width: 2px; border-left-color: red; background: #fef6f6;">
<div style="padding:10px 15px 10px; font-size:10pt">{text}</div></div>