WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] change style.css question about transparent background (27 posts)

  1. areyouscreening
    Member
    Posted 1 year 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?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hi, can you link the webpage in question?

  3. areyouscreening
    Member
    Posted 1 year ago #

    http://www.areyouscreening.com

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. areyouscreening
    Member
    Posted 1 year 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.

  6. Andrew
    Forum Moderator
    Posted 1 year 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?

  7. areyouscreening
    Member
    Posted 1 year 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.

  8. Andrew
    Forum Moderator
    Posted 1 year 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;
    }
  9. areyouscreening
    Member
    Posted 1 year ago #

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

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  11. areyouscreening
    Member
    Posted 1 year 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.

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  13. areyouscreening
    Member
    Posted 1 year 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?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Nope, not just you.
    Replace that number part:

    #slider-1457101974

    With this:

    .flexslider
  15. areyouscreening
    Member
    Posted 1 year ago #

    Still nothing using either of those ones I tried above.

    I left one in there this time

  16. Andrew
    Forum Moderator
    Posted 1 year 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?

  17. areyouscreening
    Member
    Posted 1 year ago #

    Done.

    I'm just putting at the absolute bottom of the style.css. Is that possibly a problem?

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    For some reason your changes aren't appearing in your stylesheet.
    See http://www.areyouscreening.com/wp-content/themes/wp-newstrick/style.css?ver=3.5.1

    Looks like you need to contact your theme's vendors and ask them why this is.

  19. areyouscreening
    Member
    Posted 1 year ago #

    Is it possible to just alter this -

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

    as opposed to adding something? Or is that more of a problem.

    Totally unrelated, I went to check my site on pingdom just because I turned off the cache, and it gave me 1 second faster than it usually does.

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can alter that, just check that doesn't mess up any other elements because that style isn't identifying the slider.

    Don't your theme's vendors provide you support for their theme?

  21. areyouscreening
    Member
    Posted 1 year ago #

    Well, it's within this

    /* FlexSlider Necessary Styles
    *********************************/
    .flexslider {margin: 0; padding: 0;}
    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; 
    
    padding:0;margin-right: 20px;} /* Hide the slides before the JS is loaded. Avoids image 
    
    jumping */
    #entry-post .flexslider .slides > li, #entry-blog .flexslider .slides > li {border-
    
    top:0;}
    .widget-slider .slides > li { border-top:0; }
    .widget-carousel .slides > li {margin-right: 10px;}
    .flex-main.flexslider .slides > li {margin-right: 0px;} /* Hide the slides before the JS 
    
    is loaded. Avoids image jumping */
    .flexslider .slides img {width: 100%; display: block;}
    .flex-pauseplay span {text-transform: capitalize;}
    
    .widget-slider .title-mask {  position:absolute; top:20px; right:0;}
    .widget-slider .content-mask { position:absolute; top:90px; right:0; width: 50%;}
    .content-mask p { margin-bottom:0; }
    .title-mask .entry-title, .content-mask p {
    background: #FFF;
    background: rgba(255, 255, 255, 0);
    margin-bottom: 0;
    padding: 15px;
    text-transform: uppercase;
    }
    
    .content-mask p { text-transform:none;}

    At any rate, it seems crazy, when I ftp the file, it is changed. I've changed plenty of other things in different places, but I guess not the stylesheet up to this point.

    He actually does provide support, and he's been pretty cool up to now, and helped me make several adjustments, but on this one thing he isn't being especially helpful.

    I guess if the style.css is somehow not actually changing, that's a problem. I don't get how that is even possible.

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try using this Custom CSS Manager plugin to hold your CSS modifications instead.

  23. areyouscreening
    Member
    Posted 1 year ago #

    Hang on. Totally got it. There is a place in the theme's settings to add custom css, and maybe that keeps it from working other ways or something. I don't know. I thought ftp would work just the same.

    I put it in there, and it worked.

    Only problem, I've apparently got the code wrong on having both transparent and the color change.

    Is this wrong?

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

    I put this in and it just changes the color.

  24. areyouscreening
    Member
    Posted 1 year ago #

    My bad again. Just figured out not to have the /* things.

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try:

    .title-mask .entry-title {
     background: transparent;
     color: deepskyblue;
    }
  26. areyouscreening
    Member
    Posted 1 year ago #

    Works perfect now.

    Is there a list of color names that would work like that? Haven't seen colors used by name before.

    Apologize for not knowing what's going on.

    Thanks so much for the help.

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

    There are names, but they are limited http://www.w3schools.com/cssref/css_colornames.asp

Topic Closed

This topic has been closed to new replies.

About this Topic