1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Apr 14, 2014.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    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?
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The RGB value is shown here:

    Or here:
  3. Stuart Wright

    Stuart Wright Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    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?
    Amaury likes this.
  5. Stuart Wright

    Stuart Wright Well-Known Member

    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.
  6. Russ

    Russ Well-Known Member

    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?
  7. Brogan

    Brogan XenForo Moderator Staff Member

  8. Stuart Wright

    Stuart Wright Well-Known Member

    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
    Movie reviews have a red colour throughout
    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.
  9. Steve F

    Steve F Well-Known Member

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


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

    Last edited: Apr 14, 2014
  10. Brogan

    Brogan XenForo Moderator Staff Member

    I'm still confused.

    Why can't you just do:
    background-color: @secondaryMedium;
    opacity: 0.5;
    Amaury likes this.
  11. Stuart Wright

    Stuart Wright Well-Known Member

    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>
    .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.
  12. Brogan

    Brogan XenForo Moderator Staff Member

    You can just apply opacity to the background.
  13. Stuart Wright

    Stuart Wright Well-Known Member

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

    Brogan XenForo Moderator Staff Member

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

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

    CyberAP Well-Known Member

    Use XenForo rgba helper.
    {xen:helper rgba, @property, 0.5}
    0.5 is the opacity.
    Chris D, Russ, Steve F and 1 other person like this.
  17. Stuart Wright

    Stuart Wright Well-Known Member

    Excuse my lack of XF expertise, but how?
  18. Steve F

    Steve F Well-Known Member

    background: {xen:helper rgba, @primaryMedium, .5};
    ForoStyle likes this.
  19. Stuart Wright

    Stuart Wright Well-Known Member

    Oh as easy as that!

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

Share This Page