change style.css question about transparent background

  • Resolved areyouscreening

    (@areyouscreening)


    10 years, 11 months ago

    Just want to take a shot here and see if someone can help. I think this is probably a pretty easy question.

    In a new theme I have, there is this code in style.css –

    .title-mask .entry-title, .content-mask p {
    background: #FFF;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 0;
    padding: 15px;
    text-transform: uppercase;
    }

    This controls post title showing up in a slider. As it comes out now, it makes a white box on top of the picture for the post, and writes the title in black. (That may be obvious)

    I want the background to be transparent so that it doesn’t cover up the image, and I want to change the color of the text to something bright (that isn’t important of course, as I can always change color)

    I’ve been advised that I can change – background: rgba(255, 255, 255, 1); – to background: rgba(255, 255, 255, 0);

    but that did nothing. I was also told I could add –

    .title-mask h4 { color: #ff0000 }

    to change the color of text, but I tried adding that and it did nothing either. Probably because I don’t know where to put it.

    Could anyone show me exactly how the code should look?

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Hi, can you link the webpage in question?

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    http://www.areyouscreening.com

    The element in question is (probably obviously) the top right slider.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Do you want the white to be translucent rather than transparent?

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    I have to admit, I’m not sure what the difference would mean to the final result. You would sort of see that it was there, but you could see through it mostly vs. you wouldn’t know it was there at all?

    Either way really. As long as it doesn’t look like the massive white block. If one is easier, that’s fine.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    There’s an issue with CSS opacity. The issue is that if you use it on an element, all of that element’s text and child elements also inherit the opacity. To illustrate what I mean, I applied 50% opacity to your <h4> element (the one with the white background) and the text went 50% transparent too [screenshot].

    You can still achieve the translucency/opacity by using a background image instead of the CSS opacity style. Is this what you want?

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    I see what you’re saying. So, if the background was completely see through, you wouldn’t see the text either?

    I don’t know how a background image would work with the titles changing with new posts being in the slider, but that’s probably just because I don’t understand.

    What I want, basically, is for just the text to show up, and to be in a brighter color (blue to kind of match, but whatever).

    Thanks a lot for the help by the way.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    If you want a transparent background instead of white color, add this:

    #slider-1457101974 .title-mask .entry-title {
 background: transparent;
}

    If you want a translucent image, try using this transparent image that I uploaded for another thread; try using this code:

    #slider-1457101974 .title-mask .entry-title {
 background: url("http://img689.imageshack.us/img689/3913/testtransparency.png");
}

    To change the colour of the text, try this:

    #slider-1457101974 .title-mask .entry-title {
 /* [Either background image or transparent colour goes here] */
 color: deepskyblue;
}

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    Ok, so this may be a stupid question, but where do I put that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    If you’re using a Custom Theme, then you can just dump it right at the bottom of your style.css file.

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    I tried a couple of different versions of that, and nothing happened.

    I tried –

    #slider-1457101974 .title-mask .entry-title {
    /* background: transparent; */
    color: deepskyblue;
    }

    Which is how I thought you meant that.

    And then I tried just –

    #slider-1457101974 .title-mask .entry-title {
    background: transparent;
    }

    but neither did anything.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    I can’t see those styles in your stylesheet, where did you put them?

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    Well, I took them back out because they didn’t do anything.

    Just to throw out my not understanding, where you have a specific number slider there – it seems the slider has a new number every time you load the page. Is that just me?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Nope, not just you.
    Replace that number part:

    #slider-1457101974

    With this:

    .flexslider

    Thread Starter areyouscreening

    (@areyouscreening)

    10 years, 11 months ago

    Still nothing using either of those ones I tried above.

    I left one in there this time

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Sorry, I still don’t see the style in your style.css file.
    Can you please deactivate your caching plugin if you have one?

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • The topic ‘change style.css question about transparent background’ is closed to new replies.