I have a meta tag for a color which I'll be using in several places in my code.
#wrapper #content .post {
font-family: {font:Body};
background-color: rgba(255,255,255,0.9);
{block:IfRoundedCorners}border-radius: 9px{/block:IfRoundedCorners};
padding: 10px;
position: relative;
left: 100px;
border: 1px solid #000000;
box-shadow:rgba(0,0,0,0.1)10px 10px;
margin-bottom: -20px;
}
As you can see, my background is white and set to an opacity of 0.9. I was wondering if the background could instead inherit the color of my meta tag {color:Posts} while maintaining the opacity of 0.9.
Previously, the background-color: line was replaced with
background-color: {color:Posts};
opacity:0.9;
and while this achieved my desired effect, it also made everything else within .post transparent, which is problematic, since I only want the background to be transparent.
Of course I want it to refer to the meta tag so that if ever I decide to change the colour scheme of my page, I only change a few values at the top of my code and not every place where it's used.
I should note, the meta tag uses a HEX value, so #FFFFFF instead of 255,255,255.
Any ideas? Thanks in advance
Variable Transformations
Tumblr supplies a few keywords, that will modify a variable and change its output. In the OP example, they want to take a HEX color and have the output as RGB. To do this, prepend the variable with the letters RGB.
As it stands, this doesn't work completely (as it only turns the HEX into RGB values). We need to fill in the gaps and include an alpha channel value:
Before
background-color: rgba( {RGBcolor:Posts}, 0.9 );
After
background-color: rgba( 255,255,255,0.9 );
That's it. You can even go one step further and setup another theme operator to handle the alpha value, giving total control to the customisation options.
Before
<meta name="text:Posts Background Alpha" content="0.9">
background-color: rgba( {RGBcolor:Posts}, {text:Posts Background Alpha} );
After
background-color: rgba( 255,255,255,0.9 );