Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 18, 2016 at 4:37 am #566884
    dunawaychris

    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.
    January 18, 2016 at 8:32 am #566989
    Rikard

    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

    January 18, 2016 at 2:39 pm #567225
    dunawaychris

    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!

    January 19, 2016 at 5:21 am #567602
    Rikard

    Hi,

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

    Thanks,
    Rikard

    January 20, 2016 at 6:30 pm #568803
    dunawaychris

    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

    January 21, 2016 at 7:44 am #569202
    Rikard

    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.
    January 21, 2016 at 5:32 pm #569504
    dunawaychris

    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!

    January 25, 2016 at 4:56 am #571059
    Yigit

    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

    January 25, 2016 at 4:56 pm #571419
    dunawaychris

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

    cheers,
    Chris

    January 25, 2016 at 5:21 pm #571434
    Yigit

    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

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