Making Color Overlays Easy

Overlays, overlays and more overlays.

One of the best things about PL5 is the ability to add a color or pattern overlay anywhere. But that can be a bit tedious when you are trying to find the right opacity for a certain color. Going back and forth into Photoshop saving file after file and then uploading it to your site just to find out that the opacity is just not right.

So why not just have a global overlay opacity setting for the entire site.

Well that's what we are going to achieve today.

Step 1

First load up Photoshop, Gimp, Paint.net or Microsoft Paint whichever you use as your go to photo editing program. Make the canvas size whatever you like as long as it is square. I will be using a 100px x 100px square tile. Next pick a solid color that goes with your site or just black (can't go wrong with black). 

Step 2

Now upload your square color tile to your site and apply it to a section. You will immediately notice that the color has covered the entire section and nothing is visible. (Don't worry everything is ok)

Step 3

Now we need to add some CSS to our LESS/CSS area.

/* global overlay opacity */
.pl-bg-overlay {
    opacity: .7;
}

The change should instantaneous and will effect all the overlays on your site. You can now add other solid color tile to your site and they will have the same opacity.

So play with the opacity till you find a setting that fits your needs.

Additional tips 

If you need to have a different opacity for a particular section  you can use following bit of code to accomplish that task.

/* special overlay style for one section*/
#section-id .pl-bg-overlay {
    opacity: .7;
}

/* special overlay style for multiple section*/
#section-id .pl-bg-overlay, 
#section-id .pl-bg-overlay,
#section-id .pl-bg-overlay {
    opacity: .7;
}

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

Making Color Overlays Easy

Published on by | Add Comment

Overlays, overlays and more overlays.

One of the best things about PL5 is the ability to add a color or pattern overlay anywhere. But that can be a bit tedious when you are trying to find the right opacity for a certain color. Going back and forth into Photoshop saving file after file and then uploading it to your site just to find out that the opacity is just not right.

So why not just have a global overlay opacity setting for the entire site.

Well that's what we are going to achieve today.

Step 1

First load up Photoshop, Gimp, Paint.net or Microsoft Paint whichever you use as your go to photo editing program. Make the canvas size whatever you like as long as it is square. I will be using a 100px x 100px square tile. Next pick a solid color that goes with your site or just black (can't go wrong with black). 

Step 2

Now upload your square color tile to your site and apply it to a section. You will immediately notice that the color has covered the entire section and nothing is visible. (Don't worry everything is ok)

Step 3

Now we need to add some CSS to our LESS/CSS area.

/* global overlay opacity */
.pl-bg-overlay {
    opacity: .7;
}

The change should instantaneous and will effect all the overlays on your site. You can now add other solid color tile to your site and they will have the same opacity.

So play with the opacity till you find a setting that fits your needs.

Additional tips 

If you need to have a different opacity for a particular section  you can use following bit of code to accomplish that task.

/* special overlay style for one section*/
#section-id .pl-bg-overlay {
    opacity: .7;
}

/* special overlay style for multiple section*/
#section-id .pl-bg-overlay, 
#section-id .pl-bg-overlay,
#section-id .pl-bg-overlay {
    opacity: .7;
}

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match