-
AuthorPosts
-
January 18, 2016 at 4:37 am #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, 10 months ago by dunawaychris.
January 18, 2016 at 8:32 am #566989Hey dunawaychris,
Try applying the background to the container element instead:
#header_meta .container { background-color: rgba(0,0,0,0.4) !important; }
Best regards,
RikardJanuary 18, 2016 at 2:39 pm #567225That 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 #567602Hi,
It goes blue after scrolling on my end, I’m guessing you got it working?
Thanks,
RikardJanuary 20, 2016 at 6:30 pm #568803Unfortunately 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:
January 21, 2016 at 7:44 am #569202Hi,
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, 10 months ago by Rikard.
January 21, 2016 at 5:32 pm #569504Worked 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 #571059Hey!
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,
YigitJanuary 25, 2016 at 4:56 pm #571419Oh my, you’re good. That’s exactly what I wanted! Thanks so much!
cheers,
ChrisJanuary 25, 2016 at 5:21 pm #571434Hi!
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 -
AuthorPosts
- The topic ‘transparent glassy phone info’ is closed to new replies.