Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #566884

    Hello,

    I’d like to change the phone info above the top header so that, when the page is scrolled all the way at the top, there is a dark, glassy transparent background behind the text (exactly like the header), but when it scrolls down that disappears (again, like the header).

    I have:

    phone-info {
    font-size: 12px;
    font-weight: 300;
    background-color: rgba(0,0,0,0.4);
    }

    But that only provides the background behind the text; I want it to span the entire page. Additionally, when I scroll down, I want that top bar to remain blue and not have the overlay. How do I do this?

    Many thanks,
    Chris

    • This topic was modified 8 years, 9 months ago by dunawaychris.
    #566989

    Hey dunawaychris,

    Try applying the background to the container element instead:

    #header_meta .container {
    background-color: rgba(0,0,0,0.4) !important;
    }

    Best regards,
    Rikard

    #567225

    That helped. The phone bar is now uniformly covered and appropriately transparent.

    But it stays that way even when I scroll down. Is there a way to change color, like the header does, when I scroll down? I’d like for it to be this blue: #124b88.

    Also, when I applied your code I lost the formatting for the text in that small bar. It’s the right font (Lato), but I’d like it to be a light weight (300) and size 14. This is the code I’m using, doesn’t seem to work:

    phone.info {
      font-size: 14px!important;
      font-weight: 300!important;
    }

    I also tried adding div. before the phone.info
    Ideas?

    Thanks so much!

    #567602

    Hi,

    It goes blue after scrolling on my end, I’m guessing you got it working?

    Thanks,
    Rikard

    #568803

    Unfortunately not. It does turn blue, but the dark, semi-transparent overlay is still there, making it a darker blue. I’m looking for it to be a lighter blue. Interestingly, on my desktop computer you can see the lighter color at the edges that I’m looking for. Here’s a screenshot: screenshot

    #569202

    Hi,

    Ok, try this as well please:

    .header-scrolled #header_meta .container {
        background-color: rgba(0,0,0,0.0) !important;
    }

    Edit: you might have to remove !important from the previous code I gave you:

    #header_meta .container {
    background-color: rgba(0,0,0,0.4);
    }

    Best regards,
    Rikard

    • This reply was modified 8 years, 9 months ago by Rikard.
    #569504

    Worked like a charm. Thanks!

    Now, I have two other questions:
    1. I’d like to change the phone info font to slightly larger (14px) and also a light version of lato. I have the following code, which doesn’t seem to work:

    phone.info {
      font-size: 14px!important;
      font-weight: 300!important;
    }

    Ideas?

    2. Also, is there any way to set the opening full-screen slider so that the image position is fixed instead of parallax? I want it to look like the beige bar below it slides “over” the intro full screen slider, which would not change position as you scroll down.

    If I should start new threads with these, let me know!

    Thanks for all your help!

    #571059

    Hey!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your slider and give it a custom class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .phone-info {
        font-size: 14px!important;
        font-weight: 300!important;
    }
    .your-custom-class ul.avia-slideshow-inner {
        transform: none!important;
    }
    .your-custom-class .avia-slideshow-inner li { 
    background-attachment: fixed !important;
    }

    Best regards,
    Yigit

    #571419

    Oh my, you’re good. That’s exactly what I wanted! Thanks so much!

    cheers,
    Chris

    #571434

    Hi!

    You are welcome!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘transparent glassy phone info’ is closed to new replies.