XF 1.3 Can I get the RGB values of colours in the color palette?

[Stuart Wright]

I want to set the opacity of the background colours to various values. E.g. rgba(red value, green value, blue value, .5). Are there @ variables which contain the RGB values which I can use?

 

[Paul B]

The RGB value is shown here:


Or here:

 

[Stuart Wright]

Thanks Brogan, but I'm asking if there are any variables which can be used for the rgb values instead of @primaryMedium etc.

 

[Paul B]

I don't understand the question.

The @property is how you refer to the RGB values in the templates.

Can you perhaps explain what it is you are trying to do?

 

[Stuart Wright]

In the CSS, I want to set the colour and opacity of the background of a div.
The background is one of the colours in the color palette.
I will have to use the background-color:rgba(198,159,57,.5) but rather than hard code the r g and b numbers, I was wondering if they were available from the color palette in a way which can be used in the rgba format.

 

[Russ]

In the CSS, I want to set the colour and opacity of the background of a div.
The background is one of the colours in the color palette.
I will have to use the background-color:rgba(198,159,57,.5) but rather than hard code the r g and b numbers, I was wondering if they were available from the color palette in a way which can be used in the rgba format.

Don't believe there's a way of calling an existing color palette and change the opacity in a template.

But have you thought about creating new color palette properties and using that for the transparent color?

 

[Paul B]

As Russ said, it's easier to create your own properties.

It's very simple - see this resource as an example: http://xenforo.com/community/resources/cta-extra-colours.1/

 

[Stuart Wright]

Well not really. What I'm doing is creating a score bar 1 through 10 for product reviews. The reviewed products are in one of 4 product categories, home cinema, movies, games and tech. Each category has it's own colour.
So home cinema product reviews have blue elements on the page
http://www.avforums.com/review/benq-w1400-3d-dlp-projector-review.10238
Movie reviews have a red colour throughout
http://www.avforums.com/review/Hobbit-Desolution-Smaug-Blu-ray-review.10242
Gaming is purple and Tech is a mustardy colour.

What I want to do is change the colours of the score bars 1 through 10. They currently go from red through green for all the reviews. I want them instead to be the colour of the corresponding category, but with opacities of .1, .2, .3 through to 1.

In order to achieve this with dedicated colours for each, I would need to create 36 new colours. Which is silly because it's just the same 4 colours but with 10 different opacities each.

Doesn't look like I'll be able to do it, and I will have to hard code them.

It was worth asking. Thanks, anyway.

 

[Steve F]

Not exactly positive but this may be something you could do.

Make a property group with properties and scalar value with a string, I tested this and it works. Just seems a bit more work then just hard coding though



Then in your CSS use it like so.

.sidebar .secondaryContent
{
    background: rgba(@rgb_color_games, .2);
}

.sidebar .visitorPanel .secondaryContent
{
    background: rgba(@rgb_color_reviews, .2);
}

Result

 

[Paul B]

I'm still confused.

Why can't you just do:

background-color: @secondaryMedium;
opacity: 0.5;

?

 

[Stuart Wright]

I'm still confused.

Why can't you just do:

background-color: @secondaryMedium;
opacity: 0.5;

?

Because opacity in the above usage applies to the whole DIV, so that its border, which I do not want not to be opaque is made opaque.
This is what I want to achieve:



Note that the borders of the score boxes are the main colour and help define them.

This is one line:

<div class="rundown ten">
    <p>Contrast/Dynamic Range/Black Level</p>
    <div class="scorepip active scorepip1"></div>
    <div class="scorepip active scorepip2"></div>
    <div class="scorepip active scorepip3"></div>
    <div class="scorepip active scorepip4"></div>
    <div class="scorepip active scorepip5"></div>
    <div class="scorepip active scorepip6"></div>
    <div class="scorepip active scorepip7"></div>
    <div class="scorepip active scorepip8"></div>
    <div class="scorepip"></div>
    <div class="scorepip"></div>
    <span>8</span>
</div>

Then

.node495 .rundown .scorepip.active.scorepip1 {background-color: rgba(0, 153, 207, 0.1);}
.node495 .rundown .scorepip.active.scorepip2 {background-color: rgba(0, 153, 207, 0.2);}
.node495 .rundown .scorepip.active.scorepip3 {background-color: rgba(0, 153, 207, 0.3);}
.node495 .rundown .scorepip.active.scorepip4 {background-color: rgba(0, 153, 207, 0.4);}
.node495 .rundown .scorepip.active.scorepip5 {background-color: rgba(0, 153, 207, 0.5);}
.node495 .rundown .scorepip.active.scorepip6 {background-color: rgba(0, 153, 207, 0.6);}
.node495 .rundown .scorepip.active.scorepip7 {background-color: rgba(0, 153, 207, 0.7);}
.node495 .rundown .scorepip.active.scorepip8 {background-color: rgba(0, 153, 207, 0.8);}
.node495 .rundown .scorepip.active.scorepip9 {background-color: rgba(0, 153, 207, 0.9);}
.node495 .rundown .scorepip.active.scorepip10 {background-color: rgba(0, 153, 207, 1);}

Steve's solution is probably the best.
Thanks

 

[Paul B]

You can just apply opacity to the background.

 

[Stuart Wright]

You can just apply opacity to the background.

I looked this up and couldn't find out how. How?

 

[Paul B]

There are several ways to do it.
For example, a div inside a div; with the border applied to the outer div and the background and opacity applied to the inner div.

 

[DeviateDefiant]

You can use two backgrounds, the opacity can be created using a linear-gradient (with the same value given for the start/end) then add the single "rgb" value after it ", rgb(0, 153, 207)". It's not elegant and you'll still be lacking some older browser support but little worse than rgba itself has.

There are several ways to do it.
For example, a div inside a div; with the border applied to the outer div and the background and opacity applied to the inner div.

Though that requires extra markup for styling purposes which isn't ideal.

 

[CyberAP]

Use XenForo rgba helper.
{xen:helper rgba, @property, 0.5}
0.5 is the opacity.

 

[Stuart Wright]

Use XenForo rgba helper.
{xen:helper rgba, @property, 0.5}
0.5 is the opacity.

Excuse my lack of XF expertise, but how?

 

[Steve F]

background: {xen:helper rgba, @primaryMedium, .5};

 

[Stuart Wright]

background: {xen:helper rgba, @primaryMedium, .5};

Oh as easy as that!

Use XenForo rgba helper.
{xen:helper rgba, @property, 0.5}
0.5 is the opacity.

This is perfect - works just how I need, many thanks!