Dotted Overlay Issues in Cornerstone

Support
#1

Hi there,

I was wondering if you could help me with a little glitch in the matrix. :wink:
I have tried a few different solutions from forum posts and am having trouble adding a dotted overlay in Cornerstone, to parallax contend bands.

I am trying to have the following elements in this order:

1.) Text on top
2.) Dotted overlay under text
3.) Background at the back

The overlay works (kind of) when I add the class ‘dot-pattern’ to the class of the section I’d like it to function on, when the code below is popped into customiser. However, the overlay appears on top of the white text, which means the order is incorrect. The dotted overlay needs to be under the text, so the text is easy to read.

If you can help me achieve the above order at all, I would be most grateful.

The code I am using in customiser is:

.dot-pattern:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("http://demo.rocknrolladesigns.com/wordpress/jarvis/text-slider/wp-content/themes/jarvis_wp/images/pattern.png");
    content: '';
    display: block;
    z-index: 16000;
}

.dot-pattern {
    position: relative;
}

URL is http://www.simplysignspreview.com/aaronstoneltd
(bottom image has the dotted overlay, as well as middle, both with parallax)

I am sure I am missing something small here, but all help is much appreciated!

#2

Hi There,

Thank you for writing in, just remove the z-index: 16000; property from your CSS code and that should put the text above the overlay.

Cheers!

#3

That’s great, and worked like a charm. Thanks!

#4

Glad to hear it!

#5

Hi there,

Sorry to open up this thread again (I originally opened it with another website)
I am trying to create the same effect again, but with a video background.
The z-index: 16000; function has been removed, but this removes the dotted overlay entirely.
If I add it back in, it sits on top of the header of the site and the text.
Instead of z-index: 16000; - what should I add so it sits ontop of the video but under the text?

Many thanks!

http://www.simplysignspreview.com/simplysignsnew2/

#6

Hi again,

You should change your code to this:

.dot-pattern:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(http://demo.rocknrolladesigns.com/wordpress/jarvis/text-slider/wp-content/themes/jarvis_wp/images/pattern.png);
    content: '';
    display: block;
    z-index: 1;
}

And then add the following code as well:

.dot-pattern .x-column {
    position: relative !important;
    z-index: 99 !important;
}

Cheers!

#7

Hi there,

That’s fixed it, thanks so much!

#8

Glad we could help.

Cheers!

#9

Hi there,

Sorry to open this thread again!
I am trying to move the website across from the dev site to the root.
However, using exactly the same css code as before, and the same dotted-pattern ID in the ‘class’ of the image header, I am not getting the dotted effect this time. I was wondering if you could give it a quick glance for me and let me know where I have gone wrong.

When it worked: http://www.simplysignspreview.com/simplysignsnew2/web/
Now it doesnt work: https://www.simplysigns.com/web/

Many thanks and looking forward to your reply!

#10

Hi,

Simplysigns Site is in maintenance mode.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#11

Hi,

Please provide us your username and password.

Thanks

#12

Hi there, I have edited the secure note. So sorry - mental rush day at work before we break for Xmas! Thanks for your patience. :wink:

#13

Hi there,

It’s invalid, I tried different combinations but still no luck. Would you mind providing the correct one?

Thanks!

#14

Hi,

I went ahead and fix it by downloading the pattern image and uploading it to your site.

https://www.simplysigns.com/wp-content/uploads/2017/12/pattern.png

I then change the css code to this.

.dot-pattern:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(https://www.simplysigns.com/wp-content/uploads/2017/12/pattern.png);
    content: '';
    display: block;
    z-index: 1;
}

Kindly check in your end.

Thanks