Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design overwrite inline CSS

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #257546
    VeroMezo
    Participant

    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

    #257547
    Beverleyh
    Participant

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

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

    #257548
    VeroMezo
    Participant

    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

    #257549
    Beverleyh
    Participant

    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?

    #257550
    Beverleyh
    Participant

    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.

    #257551
    Beverleyh
    Participant

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

    #257552
    Beverleyh
    Participant

    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?

    #257556
    VeroMezo
    Participant

    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.
    #257559
    Beverleyh
    Participant

    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.

    #257560
    VeroMezo
    Participant

    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!

    #257568
    VeroMezo
    Participant

    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!

    #257569
    Beverleyh
    Participant

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

    #257575
    VeroMezo
    Participant

    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 …

    #257577
    Beverleyh
    Participant

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

    #257589
    VeroMezo
    Participant

    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’,

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design’ is closed to new topics and replies.