-
AuthorPosts
-
August 2, 2014 at 8:58 am #299093
Hi,
I have placed a third-party slider (ken burns style) and set it as the background so it covered the entire landing page. This works fine.
The issue is I need a semi-transparent bar across the middle of it which is the background for other elements. I used another Color section (need it to be full width) and set the color to #000000 and placed an image placeholder in it. The image (or anything else I place in the color section) shows up fine but the actual color does not. It appears to be Behind the slideshow background (looks that way when the page loads).
Is there a reason this is happening? Any way to fix it?
Thanks!
SladeAugust 4, 2014 at 10:50 am #299570August 4, 2014 at 11:03 am #299579Hi!
Sorry for the late reply! Can you please post a screenshot and show the issue?
I could not see an issue – http://i.imgur.com/MY43uDz.jpgCheers!
YigitAugust 4, 2014 at 11:06 am #299582Hi Yigit,
Your screenshot is showing the issue. That image place holder is actually suppose to be inside of a Color Section that is set to #000000. The Color Section does not show up.
August 4, 2014 at 12:18 pm #299619Hi!
Do you mind creating a temporary admin login and posting it here privately so we can look into it?
Best regards,
YigitAugust 4, 2014 at 6:55 pm #299817This reply has been marked as private.August 4, 2014 at 11:47 pm #299910Hi!
It’s because of that zoom slider you have before the color section, something like this in Quick CSS seems to fix it:
#homepage_slider .setAsBg { position: static !important; }
Best regards,
JosueAugust 4, 2014 at 11:54 pm #299915Hi Josue, thanks for the reply.
Unfortunately that keeps the slider from being ‘full screen’ and then drops the Color Section below it rather than on top.
If you look at this page: http://sladestyle.com/WP-Testing/ you will get an idea of what I’m trying to achieve. I understand the Color Section will have to run the full width rather than 2/3rds like the example I just gave but that’s fine. The way I did the /WP-Testing/ page is to use 2 sliders. The semi transparent background, image, text…are 1 slider set to static.
The problem with using 2 sliders is when you view it on a smaller screen the static slider just gets smaller rather than repositioning elements but keeping them large.
I hope this makes sense.
Thanks!
SladeAugust 5, 2014 at 12:39 am #299938Hi Slade!
I see, try adding this then:
#transparentbar { z-index: 100; position: relative; }
Cheers!
JosueAugust 5, 2014 at 1:32 am #299942ahhh….Josue…you are brilliant!!
I was about to give up on the idea!
Thank you!!
SladeAugust 5, 2014 at 1:46 am #299945Question –
I thought I had figured out a way to “trick” this into working. If I add opacity: 0.5; to that custom css you gave me it does a great job with the bar transparency but it also makes whatever is inside of the Color Section take on that same 0.5 opacity. I thought I could make a transparent png around 100 x 100 and have it repeat horizontally. I would then not need the opacity custom css and the elements inside would be normal.Unfortunately, it takes my semi transparent png file and makes it opaque. When you insert an image into the Color section does it turn it into a jpg?
August 5, 2014 at 2:41 am #299967Hi!
Try using RGBA (red, green, blue, alpha):
background: rgba(0, 0, 0, 0.5);
Best regards,
JosueAugust 5, 2014 at 3:32 am #299994Brilliant! Worked like a charm!
Thank you!
August 5, 2014 at 3:37 am #299997You are welcome, always glad to help :)
Regards,
Josue -
AuthorPosts
- The topic ‘Color Section not showing up’ is closed to new replies.