Tagged: cornerstone
-
AuthorPosts
-
January 11, 2017 at 4:48 pm #1326243
Hi,
I have a video background which I would like to put a dotted overlay over.
My video background is on Section 1 in Cornerstone. So I tried the css from this thread, but didn’t have any luck: https://community.theme.co/forums/topic/dotted-overlay-2/
Would love any help getting it to work!
Cheers!
January 11, 2017 at 10:16 pm #1326680Hi There,
Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Cheers!
January 12, 2017 at 2:51 am #1326899This reply has been marked as private.January 12, 2017 at 3:13 am #1326925Hello There,
Thanks for providing the url of your site. Have you place the correct path of the dot image png file? You can try this code:
.home div#x-section-1:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: url("http://www.clker.com/cliparts/c/c/2/a/1194989366182291164pattern-dots-square-grid-02.svg.med.png"); content: ''; display: block; z-index: 16000; } .home div#x-section-1 { position: relative; }
This is the sample result: http://prntscr.com/dum3nk
Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
Hope this helps.
January 12, 2017 at 5:03 pm #1327873This reply has been marked as private.January 12, 2017 at 10:40 pm #1328273Hello There,
Your image is not working. You may use this code instead:
.home div#x-section-1:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: url("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png"); content: ''; display: block; z-index: 16000; } .home div#x-section-1 { position: relative; }
You will need to download the png image and upload it to your S3 bucket without modifying it. Please do not modify the png image.
https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png
https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-squares.pngHope this helps.
January 12, 2017 at 11:11 pm #1328302This is exactly what I wanted! Thanks so much!
Is there a way to make the text display on-top of the overlay, so only the video gets the overlay and not the text?
I’m just using a normal text box in cornerstone for it.
January 13, 2017 at 12:53 am #1328387Hello There,
Thanks for updating in! To be able to have the dots behind the text and just only above the video layer, please update the code and make use of this code instead:
.home div#x-section-1 .x-video:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: url("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png"); content: ''; display: block; z-index: 1; } .home div#x-section-1 .x-container { position: relative; z-index: 10000; }
We would loved to know if this has work for you. Thank you.
January 13, 2017 at 6:38 pm #1329316Works like a charm!
You guys always do such an amazing job at helping out.
Cheers!
January 13, 2017 at 10:58 pm #1329550You are most welcome. 🙂
-
AuthorPosts