XF 2.0 How to call colour palette elements in simple BBCode?

[Matthew S]

I have light and dark styles on my forum. I'd like to call a particular colour component rather than hard code a colour for, for example, a border.

For example, using the box bbcode example in the tutorial:

If I start with this

<div style="background-color: {option}">{text}</div>

and then make it this

<div style="background: {option}; border: 1px solid #176093; padding: 4px; font-size: 13px">{text}</div>

it works fine with the hard coded border colour.

If I try something like this

<div style="background: {option}; border: 1px solid @xf-borderColorLight; padding: 4px; font-size: 13px">{text}</div>

it doesn't work.

I'm not sure if I'm doing it wrong (most likely) or if it's not possible.

 

[Arty]

{{ property('borderColorLight') }}

 

[Matthew S]

Thanks @Arty but I still don't think I'm doing it right. Anything I replace the colour with just gets ignored. The rest of the code works.

<div style="background: {option}; border: 1px solid {{ property('borderColorLight') }}; padding: 4px; font-size: 13px">{text}</div>

 

[Arty]

Maybe style properties aren't available in bbcode. Try using class name instead and adding styling to css.

 

[SyTry]

Thanks @Arty but I still don't think I'm doing it right. Anything I replace the colour with just gets ignored. The rest of the code works.

<div style="background: {option}; border: 1px solid {{ property('borderColorLight') }}; padding: 4px; font-size: 13px">{text}</div>

Hello,

I think you can use your EXTRA.less template for this :

<div class="myClassCSS">{text}</div>

And EXTRA.less :

.myClassCSS {
    border: 1px solid @xf-borderColorLight;
    padding: 4px;
    font-size: 13px;
}

 

[Matthew S]

Thank you, @SyTry. It is exactly as you wrote. It works perfectly.