overwrite inline CSS

[VeroMezo]

in my amadeus themed wordpress site
http://graindelivre.fr/

I modified the backgrounds, but can’t overwrite customized header background solid white, (#fff) would like it a bit transparent, (#ffffffdd)
but can’t ,
I tried additionnal CSS,
even (got from an old post of yours)
.branding-wrapper[color]{ background-color:#ffffffdd !important;}
.main-navigation [color]{ background-color:#ffffffdd !important;}

.branding-wrapper { background-color:#ffffffdd !important;}
.main-navigation { background-color:#ffffffdd !important;}

nothing works!

here is the inline html style:

…
.social-navigation { background-color:#fff}
.branding-wrapper { background-color:#fff}
.main-navigation { background-color:#fff}
.main-navigation a { color:#1c1c1c !important;}

thanks for the help if any!
best
Véro

[Beverleyh]

Might be your colour syntax – #ffffffdd doesn’t exist (hex = 6)

Try #ffffdd (which can be shortened to #ffd)

[VeroMezo]

hello Beverley,
#ffffdd is a sort of pale yellow,
in #ffffffdd, last 2 letters are alpha filter, for the transparency,
it works in my pagecontent background, which I can access via CSS page,
thanks a lot anyway

[Beverleyh]

My bad – its been a while since I used hex transparencies. From what I recall though – now I’ve had chance to think about it – shouldn’t the alpha channel be the first 2 characters?

[Beverleyh]

Just dredged up something with IE8 support, which is probably one of the few times I’ve used alpha transparency with hex (in a filter-gradient)

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf000000,endColorstr=#bf000000)

It’s emulating rgba(0,0,0,.75), so the first 2 characters (bf) is what equates to the transparency. 75% black in this example.

[Beverleyh]

Handy reference chart for alpha transparency codes for hexadecimal colours https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

[Beverleyh]

First? Last?

Old IE filter = first 2 characters for alpha transparency (#AARRGGBB)
Newer hex = last 2 characters for alpha transparency (#RRGGBBAA)

https://css-tricks.com/8-digit-hex-codes/

Well, this is interesting, and I’ve learnt something new today. I guess I’ve been wrapped in the comfort blanket of rgba() for far too long ;)

BTW – using this reference chart https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 I couldn’t see a “dd” alpha transparency code – what if you try another pair of characters?

[VeroMezo]

I made a try with double a, didn’t move a hint

my guess is I am not calling properly the section,

html code is :

.site-branding { padding:75px 0; }
.header-image { height:300px; }
…
.branding-wrapper { background-color:#fff}
.main-navigation { background-color:#fff}

in the tuto code some text is between brackets…
that’s the example:

div[style] {
background: yellow !important;
}

to override :

The inline styles for this div should make it red.

[Beverleyh]

I made a try with double a, didn’t move a hint

Sorry, “aa” doesn’t seem to be a valid alpha transparency code either https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

I’m not a WordPress user so I don’t know how or where you modify the styles, but have you tried your selectors with an obvious colour change – something like .branding-wrapper { background-color:red }, just to see if your selectors work?

Or how about going with the better-supported rgba() syntax? I don’t know what percentage transparency you’re going for but try .branding-wrapper { background-color:rgba(255, 255, 255, 0.35) } for 35% white

But bear in mind that giving an element a transparent-white background, when its positioned over/inside an element that also has a solid-white background, will not make a jot of visual difference. For example, your .site-header element has a background-color of solid-white, and the .branding-wrapper element (that you’re trying to make transparent-white) sits inside/over it, so you’ll need to target both in your efforts for overall transparency. Maybe make .site-header completely transparent before you try to give .branding-wrapper a semi-transparency.

[VeroMezo]

My!!!, you are right,

[giving an element a transparent-white background, when its positioned over/inside an element that also has a solid-white background, will not make a jot of visual difference. For example, your .site-header element has a background-color of solid-white, and the .branding-wrapper element (that you’re trying to make transparent-white) sits inside/over it, so you’ll need to target both in your efforts for overall transparency. Maybe make .site-header completely transparent before you try to give .branding-wrapper a semi-transparency.]

I am going to dig that part right away!

[VeroMezo]

actually I explored the php code and it is mentionned ‘sanitize_hex_color’, which prevents from encoding any alpha colour, I think I’m in a dead end!

[Beverleyh]

Does it strip out rgba() too? Give it a whirl and see what happens.

[VeroMezo]

that’s how it appears,

// Branding wrapper
$wp_customize->add_setting(
‘branding_bg’,
array(
‘default’ => ‘#fff’,
‘sanitize_callback’ => ‘sanitize_hex_color’,
‘transport’ => ‘postMessage’,
)
);

I have a pic in header background, and that’s why I’d like it to appear through,

about rgba I think it’ would be the solution,
I tried to insert a php loop to rgba, but it made all the site blank,
I’m not that keen at php code,
well ,
quite puzzled toward a solution …

[Beverleyh]

I’m not sure why you would want/need to do this through PHP. Can’t you just put standard CSS in your stylesheet?

[VeroMezo]

I did it but the php code prevents other colour than hexa, 6 digits, so ther is no way I think but to override this rule
‘sanitize_callback’ => ‘sanitize_hex_color’,

[Author]

Posts