BACKGROUND OVERLAY SUPERPOWERS ACQUIRED! (Class-Based Custom Overlays in Oxygen)

today i'm going to show you a crazy powerful technique for applying background overlays inside of oxygen you're also going to be able to assign these custom overlays to classes so that whenever you create a new background image section you can instantly apply whatever overlay style you want by adding that class it makes all of your background overlays future proof because no matter how many times you use an overlay style across an entire site if you ever need to adjust it if you ever need to change it all you have to do is edit the overlay styles that are attached to that class and it'll magically change everywhere because that's how classes work and one of the big downsides of background overlays in vanilla oxygen just using oxygen the way that it was created is that you cannot assign background overlays to classes they have to be assigned at the id level so you don't get that future proofing that you really should have as a freelancer or an agency owner who's going to be working on many sites who might have clients that want to change things in the future so this is just a crazy powerful technique i'm very excited about it so let's waste no time let's hop in and check out the tutorial but before we do that just hit like hit subscribe make sure you drop a comment let me know where you're watching from i love to connect with you guys i will answer pretty much every question that i can inside of the comments i make sure to like and heart everybody's comments so it's just really the participation that i love so make sure you participate all right let's go all right guys i'm taking a little time out of my morning to record this so i can get it out as quickly as possible because i'm just really excited about this technique and and this tutorial in general i'm going to show you how to do this the traditional way the background image overlays we're going to talk about why uh it's not a great way to do it what the downsides are and then i'm going to show you the cool way to do it so let's go ahead and dive right in literally it gives you a playground for background overlays that are completely future proof we're going to talk about it all we're going to have a lot of fun in this one so i created a section i'm going to go to background and i'm going to go to browse and i'm going to just choose these mountains here and i'm going to set this to cover and then i'm going to come down here left and right and top are going to be 50 that's going to kind of show us the relevant parts of that image we're going to set this to no repeat and then what i'm going to do is um i'm going to like what i normally would do is so why don't i just ah no i don't want to confuse you let's just keep this simple i'm going to go to size and spacing height i would not normally do this but it's the easiest way to get this section bigger without doing other confusing things uh and then i'm going to add an element to this just like a heading so that we can see what it might look like with an actual uh this is a hero heading and it's important to have this heading here because you're going to see one of the things that uh is broken about this technique that i had to fix as i developed it so we have this hero heading here and i'm in my section i'm going to put a class of text lite which is going to make every thing in there light and then i'm going to choose the id level come down here to layout flex column center center so that's going to put everything in the middle of that section this is where we would start with doing a hero section and why this technique is developed like uh and just i'm just talking about background overlays in general okay there's two reasons why you might want to put a background overlay on a section one is to do something cool the second reason probably the primary reason is just to make the text readable you see right now that when we put white text on a background image it really tends to blend and we don't want that to happen so if we darken the background image we get more readable text or add a color or a gradient or whatever you want to do to the background image so that's not hard in oxygen you just go to background and you can choose image overlay color like i could do this blue and set it to 75 and now we have a really great looking hero section with very readable text i can also clear that out and i'm using new screen recording software by the way so i can actually move this out of the way i know a lot of you people uh you were like hey we can't see what you're clicking on because your your dumb head's in the way so if i add colors here and just choose like that blue again but maybe then choose like a yellow or something and maybe we'll set this to like 90. so it goes left to right and i set this to 75 like we had before and then i set this to 75 now we have this like gradient effect going on and that's easy out of the box with oxygen but here's the problem all of this has to be done at the id level you cannot do this and i'll prove it to you with a class now why would you want to do it with a class because if i want to if i want the same exact effect on every hero section on my site let's say i'm gonna have 10 pages on my site every one of them is going to have a hero section i want all the hero sections to look like this you have to think about future proofing the site let's say i create all of those well all those styles are set at the id level number one i either have to do all of that work every time i create a hero section or i have to copy and paste my hero section from one page to another but then let's say i do all 10 and six months from now i'm like yeah i really don't like those colors or i need to change it a little bit you have to go change them all individually because all of the styling is set at the id level so a lot of people see that ahead of time and they're like ah no i don't want to do it that way why don't i assign my overlays to a class so they'll type in like overlay double dash primary trying to create a primary overlay style and they'll say all right let's go create that gradient and they and you see like it's not going to work none of this is going to work it's not doing anything because it just doesn't work it's not it's not how the technique goes you can't do it you can't assign an overlay style to a class well you can but you have to use this technique that i'm about to show you all right so we know why we would want to assign background overlays to a class now let's talk about how to actually make it happen and i'm going to walk you through the process that i went through from start to finish and some of the you know issues that i ran into and how we resolve those issues uh it is gonna take a one line like or maybe two lines of css i don't want you to freak out i'm gonna give you the code to copy and paste but i also wanna walk you through it so you understand how it works this is if you're a freelancer or an agency owner like this is the process of just getting better like growing your skill set it's don't just copy and paste code like take a minute to figure out what the code is actually doing and how it works so i'm going to try to walk you through all of that now so we are going to use this overlay primary class on the section that we want the overlay to be on the very first thing we're going to do is we're going to set the layout of that class to position relative all right i'm going to leave this like right there for now so position relative on the overlay primary class the reason we're doing that is because we're actually going to put our overlay styling in a pseudo element of this class and we're going to have to set that to position absolute and if you've watched my tutorials before anytime you position something absolute you need to be aware of its parent element like what is the parent element that is positioned relative because that's what's going to contain that absolutely positioned element well we want the class overlay primary to be the parent of the pseudo element because that's what it's going to be attached to so that just makes sense so we set that to relative and then we come up here and we hit the state button and we choose the pseudo element after all right and this is where we're going to do all of our styling now before we can do any styling like right now if i went to background and i tried to set that background color nothing is going to happen all right so we need to make sure because right now our pseudo element doesn't actually exist it's like uh tiny right uh or it's it's just it's not even there so what we need to do is go to layout and we need to set this to absolute and if i set all of these figures to zero the top left right bottom it's basically going to stretch this across the entire parent element that is positioned relative and now we actually have an overlay color now you might think oh we're done here we can turn off the recording and no don't do that there's there's problems we have to solve things we have to fix things we have to talk about and then you might want to just stick around because i'm going to show you the playground that is this technique like all the different stuff you can do so background color if i set this to 75 you see we have our our nice effect but you also see a big problem and the big problem is that that pseudo element and all of our styling is laying on top of our content that is in that section and we have to fix that so i'm going to go ahead and save this and we're going to go to the front end because we're going to need to take a look at the underlying structure here and see what's going on so i'm going to right click this and hit inspect element and i want to show you so here is our section right here and i'm sorry here's our section right here and it's got this overlay double dash primary on it right and i'm going to open our section and the first thing this is important the first thing that is inside that section is a div called ct section inner wrap oxygen puts this div inside of sections automatically and it's what contains all of the content inside the div all right so we're going to open that and then you're going to see it contains our headline which is the only element inside there you can also see the pseudo element after right here and all of the styling that has been applied to it right there okay so all of this is making sense it looks like it's supposed to so we have to think how do i elevate this content because now we have to think in layers right we have a pseudo element after laying on top of our content so we need to switch those two layers right the layer with the content needs to be on top the pseudo element needs to be next and then the background image needs to be the bottom thing okay so in in order to change layers in css you use z index now we don't want to apply z index to the things inside here because we have the benefit of having this div called ct section inner wrap which is a container for all of our content if we elevate the z index of ct section inner wrap above the overlay everything inside that container will automatically be above the overlay that's what we want to achieve all right so let's go back and let's talk about how to do this so we're going to go to manage style sheets this is the code don't freak out i'm going to walk you through it i'm gonna put this right here for a second and the first thing i'm gonna do is which is good practice is make a note of what i'm actually doing here okay so this is gonna be uh background overlay content layer fix something like that okay and then i'm going to target we're going to go look at our structure here because this is you got to figure out what you want to target so i want to target a section first of all okay so i'm going to grab this ct section and i'm going to paste it in so i'm targeting all ct sections at this point but the question is do i want to target all ct sections or do i want to target only specific ct sections i only want to target specific ct sections i want to target ct sections that also have a class of overlay double dash primary now if you're following along this selector is going to change because this selector is not future proof i'm going to explain it in just a second but i'm walking you through the process that i went through to solve this challenge okay so i'm targeting now all ct sections or i should say any ct section that also has the class of overlay primary now i don't want to do anything with that i want to actually do something with an element inside it which is ct section inner wrap so i need to target ct section in a wrap so i'm going to put that next so any section with a class of overlay primary this is what i'm targeting that's what i'm going to change and i'm going to change the z index of that now the first thing i'm going to do is set it to position relative and then i'm going to change the z index and we're just going to change the z index to 1. and you see that we have a fixed problem anything that i put inside that section now that's automatically inside ct section in a wrap is going to be elevated above the overlay and we are effectively you could stop here and be done the problem is if i add any other sections let me go do that right now so let's say i duplicate this and i want this to be and this is how overlays work right like you'll probably have a lot of them you might have a primary overlay an alternate overlay you might have an overlay pattern you might have an overlay gradient you might have an overlay texture there's a lot of different things that you might do so i'm going to take uh let's see overlay primary let's do an overlay double dash gradient because we haven't done that yet all right and what i'm going to do is copy my overlay primary styles to my overlay gradient and then i'm going to delete overlay primary so basically that gave us all of the setup work but now i can go in to the after and i can basically take this out and now i'm starting from scratch okay and because this is called gradient i'm going to be in background and i'm going to choose gradient and i'm going to add my two colors and let's do a completely different gradient like let's do this uh orangey color and let's do maybe a like a yellow so like let's get in here with a yellow and then let's set this to go left to right and then let's drop the opacity on those so we can bring that down to like 75 and bring this one down to 75 and there you go so we have a gradient effect now but you see we have the problem why do we have the problem because we changed the name of the class we had to to create a second one and if we want to create a third one that's going to create a a new one right that's also different so if i go to style sheets we see the problem uh sorry manage stylesheets okay so here we are with our main fix that we put in but our main fix only applies to overlay primary so when i was creating this i was like well that's that's not future proof like and here's here's why you want to make sure that this stuff is future proof right now you remember how you walked through this and did it right but let's say you come back to the site six months from now and you decide you want to add another overlay style you might even forget that you had to do this fix in the first place you might have a problem that you then have to solve again because you forgot it existed and you forgot how you fixed it the first time right so we just want to make it so that it works automatically like i can use any i can make as many of these classes as i want and it doesn't break that would be great right so in order to do that we're going to have to delete that part now this is the actual code all right this is the one you're going to want to stick with so i want to target any ct section that has a class that contains the word primary double dash okay because i know that i'm only going to use primary double dash on these overlays or uh is it oh no sorry it's overlay double dash overlay double dash not primary double dash because i'm i'm doing them all as overlay like okay so this is how they're gonna look right so overlay double dash primary overlay double dash uh gradient and then i might do a overlay double dash pattern i can create as many of these as i want what's consistent among all of them it's this overlay double dash so i effectively want my fix to apply to any class that's overlay double dash which i'm only going to use on overlays great got it okay so the way that we do this is we do open bracket close brackets we're going to put stuff inside these brackets we're basically targeting an attribute class star equals and then quotes whatever i put inside this quotes it's going to look for in the css selectors okay so i'm gonna do overlay double dash and you see we have our fix all right and now i can make any overlay classes that i want as long as overlay double dash is in there it's gonna apply this fix to it that's future proofing right your strategies okay so again to explain what this is doing it's targeting any ct section that has a class that contains the phrase or word overlay double dash then it's targeting the ct section inner wrap of that section and elevating it with z index above the overlay there's your fix it's two lines of code and i'll give it to you to copy paste but i wanted to walk you through it okay now let's talk about the playground all right all the stuff that you can do with this so now we know we can make as many of these as we want but what else can we do with them is is kind of the next question so i'm going to go ahead and duplicate this and we're just going to talk about it for a second i'm going to make this one called overlay double dash playground all right and that this is the one we're just going to play with so what i'm going to do is i'm going to copy my primary styles or my gradient styles because that's the one that's on here to playground i'm going to delete gradient because i don't need it anymore and i didn't really delete it i just took it off of this section just to be click clear there so i'm going to go to the after pseudo element and then i'm going to go to background and we had a gradient on this one that i'm going to clear up i can't because i'm hitting my there we go all right where can i put this guy we'll put him over here for now all right so i have a blank slate now so one thing i want to show you again we're in the after always do this work in the after if i go to background you actually have both of these colors available to you now okay so look if i if i choose this blue and bring this down and then i choose the image overlay color and choose like something else look they'll like blend together now so you actually have both of those available to you which is really cool you also have background images available to you so let's say i wanted to put some sort of like concrete kind of like pattern on here i can set the uh image cool and then you have to think like all right that's a that wasn't a transparent image you could do a transparent image if you wanted to but what i'm going to do is go to effects and i'm going to go to opacity and then we're just going to drop the opacity on all of that so i'm like making the colors uh have opacity but also that pattern is still in there you see that like kind of grunge cement pattern so i'm just showing you that uh effectively what we've done is we've put a background image inside that overlay as well so that's possible i'm gonna take that out for a second i already showed you our gradients uh let me make sure that this is more up here okay now you see that i set this to full color it's 100 opacity but it's still opacity right that's because of that effect opacity slider is it still set at 0.8 but check this out you also have access to blend modes so if i wanted to multiply those together right if i wanted to come in and choose like a luminosity or an exclusion or like i can use any of these blend modes which is very very powerful i'm going to set that back to one or we can just actually delete it that's going to be its default um i can also do let's see uh in effects so we had opacity what about box shadow uh let me set this down to like 20 uh or maybe like 10. okay now let me come in and let's talk about box shadow so what if you wanted to do like a vignette effect on this so i can do box shadow inset because i want it to be on the inside of this section and i'm going to do black and then i'm going to do 0 0 and then i'm gonna set the blur to like 300 and uh it took away my inset for some reason but i'm gonna pop that back in so inset and then shadow spread is zero so i'm just gonna toggle this on and off so you can see it um see when when it's off it actually applies to the outside but when it's in it applies to the inside like if you didn't want it at all you would have to delete it but i'm just trying to show you if you look inside the section this is what it's doing right it's setting this um vignette effect and you can there there's like an exaggerated vignette effect uh but you can see exactly what that's doing so that's available to you uh how about this let's go to resources uh that's what we want to do like a pattern right um so let's go to magic patterns and so this is pretty cool i'm going to choose uh this diagonal so i'm going to preview the pattern and then what i'm going to do is set its colors so our background color is going to be like black and then our front color is going to be white but then what i'm going to do is use these shades because i want as little contrast as possible i want it to be because i want to be very subtle you'll see how this works in a second maybe more like like that one i don't know you have to you really have to play around with it and i'm going to bring the opacity down a lot this is what we're going to again overlay i'm going to increase our spacing a little bit here and i'll come back down which one did i choose this diagonal v3 and you could just hit copy css code because you can also just drop code in here so if you love like background styles that you find other places you literally just drop them in so i'm going to take off the effect let's get rid of this box shadow stuff that we've got going on because that's gonna mess with what we're able to see okay cool uh okay that's still showing highlighted but it's fine um effects oh here we i can clear it right here effects reset okay so i'm in the after i'm going to go to custom css i'm just going to paste the code in and automatically you can see if i pop back out here that we have that pattern applied to over on top of this image now it's a little weak right so i can go to my after i can go to custom css um where is it over oh i'm in the wrong section that would help if i selected the actual section i want to work on go into the after i know i'm moving really fast this is the point of this is just to show you all the possibilities here i don't want to take too much time with it but i can like darken that effect uh just by changing the opacity here so i'll come back out so there's that effect that you can see and if i save it you're gonna see that this all works on the front end i can create as many of these again as many of these as i want to they're all assigned to classes you saw what happens like if i decide you know what client doesn't like this orange color in here let's say i've applied that to 10 different sections on the site no problem i just come to overlay gradient my after i go into my background i go into my gradient and i say ah maybe he's gonna like you know that color or something i don't i don't know this is it's getting ridiculous oh there we go i like that that's pretty dope all right cool so i'll hit save and then that would change on every section that that class is applied to guys there's so much stuff that you can do with this just go take a look go into the after and just start playing around with this stuff like literally you can add borders you can add a lot of stuff going on with filters in the effects section a lot of stuff available to you i hope you found this useful if you did like comment subscribe hit the bell uh and if you have any questions also let me know because i'm happy to jump in and help you out with those uh but that is the end of this super awesome tutorial i hope you put this to great use and i'll be back again with more tutorials very soon peace

Channel: Digital Ambition

Views: 3,763

Keywords: oxygen background overlays, oxygen overlay class, oxygen tutorial, oxygen background section, oxygen background images

Id: _ju-i54C9hg

Length: 24min 22sec (1462 seconds)

Published: Mon May 10 2021