0:00:00
What’s up everybody welcome back it is episode number three. I am going to be honest with you. I it is late in the day. It’s 4 30 PM ish. I had a full day today and I want to tackle the header. I want to tackle which I don’t do overlay headers for the most part because there there just I’ll just be honest with you. There were royal pain in the ass. Coming down here let’s actually look and here’s what we have to do to make it even more of a pain in the ass. Not only is this part have to be an overlay header but this has to overlap the section above it. I’m just going to tell you right now this episode is probably going to be a shit show this is going to be just we’re going to we’re really going to have to troubleshoot some things and I’m not feeling super confident about it. This text right here this kind of thing that’s actually part of this and you know appears to be in different positions depending on where we’re at with the container. Another shit show area that I’m expecting. I like I’m confident in how I’m going to approach it but when it comes to like choosing the position and things like that. That’s going to get that’s going to add a little trickiness to it also the fact that it has to work whether the background is black or white because if you look here. You know it can’t disappear when the background is black it seems like it shouldn’t because it’s just gray text but I’m a feeling that. I don’t know we’ll see we’ll see when we get there. Also I want to tackle this cut out right here with this little yellow accent. I don’t even know if we’re going to get to the gallery honestly today I want to get these because these pain in the ass type elements I just I want to the faster we get them out of the way. You know just eat the elephant one bite at a time right these are the bites we need to take right now they’re the best bites that we can take because once these pain in the ass things are out of the way it should be more or less smooth sailing from that point so let’s bite the bullet let’s let’s go ahead and attack these things I can’t make any promises I don’t know what’s going to happen. We’re going to find out we’re going to work our way through it. So the first thing I need to do is I need to make let me make sure we’re recording properly here okay we look good before we get too deep into this we look good I was testing a technique that I’m I’m theorizing earlier and I did I think I figured out a good really good way to tackle this because creating these overlay headers does create some problems with namely with the hero sections of your website. It creates some other problems too with other pages that may not have backgrounds on the hero as well that we’re going to have to get to that I’m just telling you overlay headers are they look good but there are big pain in the ass.
0:03:02
Okay so let’s what we need to be is not in our homepage we need to actually go to our template so I’m going to I don’t think I can navigate to templates from in here I’m going to jump out maybe you can somewhere I don’t know but I’m just going to jump out here. And I’m going to go to bricks templates and we’re going to edit the header so we’re going to edit with bricks now bricks does have some overlay header features okay we’re going to test those out and see if we can get those to work. The other trick that I found if you see notice I’m looking at my header I’m looking at my footer but I don’t see anything on my page on my homepage and it’s going to be hard for us to figure out how this overlap is working when we can’t see what we’re working with you know what I’m saying. But I found this trick you go into template settings you can go to populate content and then you can choose something that you want to preview single post page and then if I choose the homepage and apply preview it’s going to reload the builder and watch watch what happens it loads in our homepage for us takes a second to come up. There it is so now we can actually I’m still editing my header and my footer but I can actually see my homepage in the builder which is really really really helpful alright so now what I’m going to do is go up to settings and I’m going to take a look at our template settings for our header and I can see that we have this option called sticky header so I’m going to enable that which that effectively gets us an overlay but the problem is it makes the header sticky and I don’t want a sticky header. If I choose sticky on scroll it’s only going to be sticky when I scroll so I’m going to use this slide up after pixels I’m going to put a one in there. Yeah and that should make it go away basically right when I start scrolling I think there’s a little bit of a delay maybe in the let’s see back on color point to transform. Okay, point four seconds alright okay that should be fine transition let’s do transform the zero. It should go away right away basically on like you know one pixel of scroll let’s see what it there we go so it effectively but I actually do want the I want the transition to be on there it’d be nicer if it just smoothly transition away but I do want it to transition away like yeah see that alright that’s actually better and then this is a kind of intelligent header where as you scroll back up it comes back. So if you’re scrolling down they don’t see it which I love this because I hate headers that stay in my way as I’m trying to scroll down the page especially big ones that take up a lot of space. So the fact that it goes away when I’m scrolling down is absolutely perfect and then it’ll come back when they scroll up which I don’t actually I didn’t want that feature but I don’t feel like I can turn it off and it’s not that big of a deal. If they’re going back up it means they’re going back up for a reason so you might as well give them the navigation there at that point but what I definitely want to do is do a scrolling background so I’m going to set this to it’s effectively going to be it’s going to be a dark background so I’m going to do ultra dark trans what is that 80 or something so let’s try that scrolling background background color yeah it did select it okay. And then you have the option of putting a box shadow on here too which I don’t think I’m going to need but let’s see what we’ve got working on the front end now so if I’m scrolling down I don’t see anything I’m scrolling back up I see what effectively amounts to a header that I can kind of see through I don’t even know if I want that maybe maybe I do while we’re here let’s get these things to be the right color so nav main. Top level menu typography I assume this is the right place to do this I still have not I’ve no experience with this menu builder there you go so there’s our white text so that’s kind of what we want and now the thing is though about this white text is oh can I can I make it hover. Is there a hover area in here active active typography it’s not active.
0:07:35
It’s hover so let’s see if I can do that in here as a hover style so our hover color will be I don’t even know what I wanted to be base light maybe it’ll just kind of dim a little bit when they hover over it yeah that works okay it’s not a big effect but we can work on more effects later maybe I just want to kind of get it to where we’re going. Alright so so that I kind of feel good about that at least we got our overlay I need this top bar to definitely be a different color this up here needs to be BG base and yes so that’s that’s like so basically a black bar whatever this oh wait hold on I just lost. Oh it didn’t put anything on there what happens BG base there we go okay yes I want it to be a very dark bar because if you look at our Figma that’s what we’re dealing with here yeah that works okay now what I need is this logo grouped with this so I’m going to right click wrap with div and then I’m actually going to put the nav menu under that logo because that’s what we’ve got going on. We’ve got going on here and the thing here is we’re going to need to move the logo without okay this is this is interesting how this is going to work let’s try let’s try going absolute on our position here let’s go we’re going to experiment a little bit that kind of gets us what we want now for like you know if we start actually maneuvering this so we’re going to transform it to translate why and we can do like minus a hundred we’re getting close we’re getting close I think the logo is a little big let’s go to layout how about 20 rim God they’re going to I know they’re going to tell me to make the logo big they’re going to they’re going to to honor for the they’re going to tell me to make the logo bigger alright so where are transform go transform minus let’s just let’s just play with it like this it is close as we can that’s like in the middle so that’s eight minus 81 so I’m going to do minus 8.1 rim see all the people who are like you to divide by 16 not for me not for me so I got to have it at 62.5% I got to make this easy divide by 10 okay we’re moving on with our life all right the only thing we need here is probably more space in this pad header so I’m going to remove this class we’re going to kind of go custom with this so let’s go to layout patting top one oh yeah that’s a good call that’s always going to bring our logo with okay yeah that’s what we need to do we need to go further away from where we need to be effectively so let’s do like 1.5 m and then we just need to move our no thank you can I get my 1.5 in back thank you all right oh my gosh all right because it’s absolute I’m having a hard time selecting it all right we are in here’s our image here’s our logo let’s make this a logo all right so I just need to transform it a little bit more now so transform and let’s go up with it there we go right about there okay let’s see what we’ve got on the front end I told you guys this is going to be a shit show all right let’s look at I mean we’re almost we’re almost exact here I feel like this needs to go up a little bit more breathing room this is going to give us some room to make the logo bigger to so 21 room 22 we can go back to 22 where we were okay now let’s get our transform back and go up a little bit more with that to about there okay safe I want this to be a button small we’re looking a little large on our button edge there all right let’s refresh okay okay all right all right we’re looking a little we’re looking good here we’re looking pretty close to where we need to be okay so this menu nav main typography needs to be 700 100 italic 800 italic what font did we load I feel like we lost the font somewhere was it 900 swear it was 700 an italic from a tropolis let’s go back and look I don’t know why oh unless it’s all right we’re off to check something in a second ricks custom fonts 900 black italic is what we should have loaded okay so if we switch this to 900 and italic it should be showing us what we want now let’s see why it’s not let’s do a little inspection here I love how I got I love I got thinner when I made it 900 okay transition all right let’s just bring this up you guys can expect with me I told I don’t know what you guys wanted I told you expect a shit show okay oh am I in the hover state what am I what are we doing here no I’m not in the hover state I’m on nav main 900 what are we got on the ID level what if I did it at the ID level 900 and italic yeah even the ID level doesn’t work here okay all right we are definitely going to have to inspect here so a I see a font weight of 500 right here on nav main bricks menu bricks nav menu lia coming from index line 52 is that in my code box where’s my nav nav main now I got nothing I got nothing in there what is this talking about but even if I turn that off okay then body a font there we go so we are running into a font weight issue with our our a’s from automatic CSS this is a this is a thing that’s caused a lot of problems in bricks because of where we’ve had to load these styles it’s this right here and I really need let’s go 900 we’re still not getting what we want what what is this it’s this 500 but nav main bricks nav menu bricks nav menu lia where is that coming from content nav main top level menu typography oh right here where was I before oh I was over here okay I need to be here oxygen has the same problem where there’s like a nested thing where the normal style tab is really not doing what you think it’s doing and it’s all happening in this nested area so that’s 900 and then if I go to italic I should I should get the font we loaded now see it’s not automatic CSS cause and a problem I don’t think we’re going to set that back to 400 and then I should be able to refresh and we got we’re good we’re good it’s not it’s not an a CSS issue all right we are good there so we look at our our figma all I see is that our links are not nearly as spread out as they are in the figma which it’s not a huge deal oh somebody also mentioned that this 30 pixels is still influencing my spacing and I don’t think it is we’re going to inspect that real quick so there’s my ally margin top it is no it’s not yes it is no it’s not no it is but my but my technique is working too why is that still throwing 30 pixels when I told it to not yeah that’s going to override what I’m doing so are you saying that bricks no there we go we just switch it to nothing switch it to this null this null unit okay now let’s check it out oh my god it’s still putting 30 pixels on there but this post 48 men post 48 men usually is like you see 26.cs I don’t know what’s going on honestly at maybe because that’s the header why is it still putting 30 pixels there let’s let’s do an experiment let’s go let’s put in like 50 pixels here and hit safe and let’s see if that styling no now that’s coming from index what what is post 48 men what is it show it to me show it to me it’s a special style sheet what is this I have no other style sheets okay I don’t like doing this but where’s my nav margin left important and just stick one on here too this we’re moving on with our life I know what I want to have happening there we don’t need anybody else trying to interfere I feel right now put this back to null put this to nothing and now 100% it’s the pat it’s the margin that I chose yes see I had this doesn’t do anything anymore that even say it’s being overwritten but it’s not doing anything anymore now my 1.5 takes over okay I told you guys this is going to be a shit show I warned you up front I don’t want to hear anything about it okay 1.75m just get a little bit more spacing there alright I’m good with that alright what do we look where are buttons go okay let’s get to that why did we lose our button styling font weight 9.9 oh it’s because this was not there we go we need that to be italics save changes buttons are back buttons are back okay where am I now I’m like lost okay I want my figma alright there we go okay I think we’re I think we’re actually good here I don’t want this to be a button small I just don’t want to have as much padding and I think what we need to do is just go like 0.75m here and then we can still have the 1.5 on the x axis there we go that’s better okay and my line height one on there yes it is okay we are good to go check figma alright I feel like we’re I feel like we’re in good territory now we need this to be italics up here according to our design so I’m going to grab my top header links style typography and we’re going to go italic that’s going to pop that in refresh we’re good there I need to make sure that my logo is linking to other you are select type external forward slash for the homepage are you label is going to be site title logo save okay what do you guys think I’ve no idea what it looks like on mobile but I think we’re good oh look at that when you when you scroll up there’s no bottom padding alright we can fix that so we’re going to go to style layouts 2m bottom 2m perfect save check this alright so now we we actually have that I don’t do I want that to be maybe hmm theme styles no where was it template settings header I just want it to be a little darker maybe the 90 save I’m just I’m yeah there we go that that’s that’s that’s much better okay I can live with that now this links to the homepage okay I’m not even going to look at mobile right now we’re going to deal with that later I want to I want to move on so one thing you have to notice is when you make an overlay header like this it eats into the first section of your page and this is a problem here because well let me switch to my homepage so if I go to home home home home where are we home there we go so I love being able to switch to pages inside the builder if if I didn’t have okay let’s look at this hero for a second this pad section XL if I look at this my header content is clashing with whatever is in my first section and like I said because I have the pad section XL on there to make a much taller hero section you aren’t really noticing it but it’s a it’s a constant problem with overlay headers so what I want to do is I want to program in a way that my first section of every page what why is there a white border on the left of this page okay it’s just in the builder I’m just going to refresh me you guys see that maybe it goes away when I refresh no it’s still there but I don’t I don’t know why it’s not there on the front ends yeah for sure it’s not there on the front okay we’re just going to ignore it for now it doesn’t appear to go all the way down my page it’s only on this header right here okay all right distraction so what I was saying is I need to program in a way to where there’s always automatic extra spacing of some sort in my first section on the page to account for this and it needs to be the exact height of my header so that it offsets properly and isn’t some random value and then the thing is the challenges we cannot use like we can’t manipulate the padding that’s what I was thinking about first I was like well we can change the padding of the section but you can’t because what you actually need is whatever padding you want plus the header height and we can’t ever know what padding is going to be in that first section because like this you see we have Excel padding on another page we might have normal default padding we might have L padding and so we can’t set a fixed value that just chooses a value plus the header height we have to make it dynamic somehow so the solution I came up with which we’re about to implement is we’re going to target the first container that’s inside the first section and if we give that first container a top margin equal to the header height we’re going to get the offset that we want and nobody’s going to know nobody you’re going to have to tell visually and that’s that’s what we’re going for there’s going to be no gaps in our design there’s going to be no weird things happening if if this plays out correctly so what we’re going to do is we’re going to inspect on the front end here and all we have to do is figure out what our structure looks like okay so we have our section right here you see all of your sections nice and clean and this is why clean code output and a builder is important so you can easily find and target things so I’m going to target the first section inside of bricks content which is our main ID alright so I am going to go to code box for this and I’m going to zoom in so you guys can go along with me here so the thing we want to target is the bricks content ID and then what we want to do is we want to target the first section so section first child so because inside that main you’re only building with sections are really really you should be but this section also has a class the classes are really really important and that’s what we want to do is we want to do a section first of type just like that so as long as you have a section first and I’m going to do this little trick here border five pixel solid red we’re just going to make sure that we’re targeting properly here there we go so you see my first section has a red border so I’m targeting my first section properly so that’s good so as long as you have the first thing inside that that main is a section you’re good to go which it should be if you’re doing structurally sound pages so the next thing I’m going to do is inside the section first of type I want to target the first container or really the first div so if you look here we inspect okay here’s our div right here which any container you put in should be a div now when I was testing this earlier I had an image and a div as an overlay first you saw that in the previous episode where I put those in first but in order to do this technique we actually have to shuffle up the DOM order and I just need to make sure that my container is the first thing in that first section so that I can target it properly so now what you’re going to see is I’m allowed to do give first of type and so I my targeting my first section and then the first div in that first section to give it a border five pixel solid red and so now when I refresh now you see this is exactly what I’m targeting and no other sex no other container in a section is being targeted in this fashion it’s just the first container in the first section and so now what I can do is I can instead of putting a border five pixel solid red which nobody wants I can do a margin top equal to the header height now in order to make it equal to the header height we have to have a variable for the header height thankfully automatic CSS already has this so I’m going to go into options enable smooth scrolling when you enable smooth scrolling it enables a header height value and this is a variable as well that can be used anywhere on the website so what I need to do is I need to inspect this header and we just need to get the exact height of my header which happens to be 179.27 pixels okay so this is an area where you can use pixels it’s okay so I’m going to go to options and my different tab yeah okay let’s close that tab I don’t want to get confused all right 179.2 pixels is my header height and so now what I’m going to do is I’m going to go into code box back to where we were and here I can do margin top and I’ll just show you guys put a thousand pixels in just so you can see what happens look at that we get a thousand pixels of margin on the top but I am obviously not going to do that I’m going to do var header height and then I refresh and look at this guys we should be golden let me inspect this okay div section div okay margin top var header height okay saying my header height is zero rim so let’s make sure that we save that in automatic CSS 179 pixels is our header height all right refresh all right yeah now that’s think that’s correct okay the reason it’s being thrown off is because the header height let’s inspect this okay so you see the yeah that’s correct okay so you see the header height let’s go to the computed margin top right there 179 pixels okay so the reason it doesn’t look balanced it looks like there’s a little bit more in the top than in the bottom here and I think the reason is that extra padding on the bottom of this header which you can’t see but is actually there contributing to the height so the header bottom was 2m which I don’t know that computes to 122 is the height of this and so half that is 61 so we need to 61 pixels off of our header height so this needs to be 118 okay now let’s refresh there we go so now we have perfect balance regardless of should be in theory regardless of the padding that we have on here so if I take that away default now you’re not seeing this in the builder but on the front end you do now let’s see if we can see it in the builder if I refresh the builder and you can okay so we’re perfect so now I’ve basically built in a self protection mechanism against our content ever touching the header given that the header is stealing space from the first section we now have a built in protection as long as we have and it looks to be almost almost freaking exact it really should be exact we did it based on on math so I think I think we’re good to go so that problem is solved pad section XL can go back here all right so let’s move on with our life all right this needs a bg base all right perfect and then we can go text white here make all that text white and what we need to do is get this cut out effect we come down here that slanted cut out effect and what we’re going to do for this is we’re going to try a clip path and then I’m going to try probably a pseudo element for this that should be find the challenge here is that you can’t use a pseudo element on an image so the pseudo element has to be on our wrapper and the actual clip path needs to be on our image because if the clip path is on the wrapper the clip path is actually going to hide the pseudo element I believe yeah because we can’t even use the index to elevate it above the cl- you can’t that’s not going to work so okay unless you can put a clip path on the before now I don’t think that’s going to work either so all right we’re just going to have to do it let’s just try it this way we want to go in the builder here’s our wrapper here’s our image so we’re going to do image slant and then we’re going to do border accent like that so it’s going to be an image slant and a border accent image slant border accent I think that’s the way we’re going to roll I’m going to go to a clip path generator I love clippy all right makes things super easy we’re going to go parallelogram but I need to make it go the other way so we’re just going to start from a square and if I bring this corner in I’m probably going to go like 10% and then this top down to 90 those should match and then I’m just going to grab this like this clip pass is so easy when you do them with the generator so I’m going to go to image slant that class right there and actually we’ll just do all this in code box so image slant gets the clip path you guys see how easy this is right like I’m going to go and there’s our slant right there if I save and we view this on the front end you’re going to see our slant so the slant taken care of like that’s not that’s not the hard part the hard part is now we are going to grab the wrapper and we’re going to do border accent right so we’re putting border accent on there which should be correct okay and for border accent let me zoom in again border accent we’re going to do a before pseudo element and the content is going to be blank we’re going to do a width of 50% and a height of 50% and a background color of secondary and what else do we need a position of absolute a left of minus 1m bottom of minus 1m I don’t know I’m just guessing we’re going to have to look and see what’s going on here in a second with 50% height 50% ooh oh gosh we’re like so close I mean obviously it’s not we need we legit need to slant this unless can you clip path it the same way that would be too easy oh gosh you can clip path it the same way all right but the spacing is all messed up so left needs to do like zero oh my gosh I don’t even think we need because the clip path is doing the clipping for us we do need it off the bottom though so like 1m I don’t know what the exact dimension would be but 1m may be very close it’s definitely it’s more than 1m I’m glad I’m zoomed in because we can pixel peep it so I don’t know how to get the measurement from there to there because that clip path is based on a percentage and not well it’s 10% isn’t it I don’t know if this would make sense at all bottom minus no that doesn’t work okay let’s try to am let’s just get it close the problem is I don’t know that’s almost exact I don’t know if it’s going to work on a different sized image I mean that that is like exact that that is I can’t ask for much better than that right let’s do a little test so if I grab my image wrapper let’s just drop down here and let’s just make a container and let’s do like a grid for and a gap of them and just drop these in did I not copy it image wrapper copy copy copy copy copy paste what’s going on dog why can’t I copy paste save refresh let’s get out of zoom mode scroll down grab this wrapper there we go copy image wrapper now it’s just a little bit more interesting this is the problem that I was fearing is off the bottom so I think a percentage will work it’s just not 10% it might be 5% it seems to work it seems to work a lot better and I don’t know if it’s perfect down there but it does seem to work a lot better doesn’t it oh did I not save the page let’s view this on the front end there we go now that’s perfect it’s absolutely perfect okay I’m considering that done all right so let’s delete that out of there all right so we’ve got kind of the header where we wanted to be I’m noticing something else about the header now the logo touching the top of the page that’s not sexy oh yuck all right bricks templates I knew this header was just going to be the bane of my existence kids just got home from school so I’m going to have to get here in a minute all right so this is logo all right layouts let’s go 21 rim and I just want to bump it down a little bit I really doesn’t matter what I do here because I guarantee they’re going to make me make the logo bigger and it’s all just going to be another shit show okay at least it’s not touching the page top of the page anymore all right let’s see what we’ve got okay we’re pretty good there that goes away as you scroll down that’s nice oh that’s what we wanted to tackle that’s what we wanted to tackle the last thing I’m going to do and then I’m calling it a day this nonsense right here oh gosh all right but we’re biting the bullet today we’re biting the bullet today 100% okay let’s let’s go for it so I wanted to attach to this because the text always matches the accent heading so I want this to be as automatic as absolutely possible so what I’m going to try to do my theory after looking at the figma file is a data attribute and that’s going to make it easy to make the we have to use a pseudo element here we’re not plugging in some ridiculous clunky physical element on the page like another heading that’s just going to be for decoration no no this is going to be a pseudo element it’s going to be a before element and if we use a data attribute it’s going to allow us to dynamically insert the content of the pseudo element and so I think that it’s going to be a perfect fit for this so what we’re going to do is is accent so we’re going to test it with this one first we actually don’t even need another class which makes this even better so I’m going to go to style attributes add attributes and we’re going to call this data heading and my value is going to be whatever I see here it’s going to be our services so I want to match exactly right so I’m going to do a save here and then we’re going to go back in I’ve got two editors open that’s always good I don’t know what I just saved over okay hopefully nothing let’s go to let’s go out of here back into code box come on all right WP code box all right let’s zoom in for you guys and while we’re here let’s comment this out so image accent now come on image accents don’t don’t auto guess I’m just writing a comment come your self all right image accent image accent I’m going to say add this to parent container and then add this to image all right so some instructions for anybody else that comes along behind me on how what this is doing and how this works now I’m going to make another comment down here and this is going to be for my accent heading accent text and then we’re going to be targeting the data attribute data heading and what we want to do if so basically this is saying if a data attribute of data heading exists then do something and what we want to do is style a before pseudo element and the content of that is going to be attribute data heading so that’s going to dynamically insert whatever I put as the data heading value and then what I want to do is position absolute bottom of 50% I want to come up because I want this to be centered I don’t know exactly I’m going to position it yet a left of zero maybe or maybe even a right of zero the thing is the challenge here is that in the figma like sometimes it’s off to the right which it’s down here I don’t care like I if it’s there it’s going to be fine to it’s just like decorative text you know but see it’s like in all different positions it’d be better if this was like more consistent like that or something or even like that but then you know if it’s off to the right depending on the use we may run into issues where it tries to go off the screen so I think if it kind of centered itself on that heading it would be a much better way to do this or above would probably be safer as well but you get into situations like here where there isn’t a lot of room above and it kind of feels like it takes maybe if it was positioned right along that’s kind of sexy isn’t it if it was positioned like right along the top of that and obviously it needs to be behind it but it doesn’t appear to be behind in the figma I don’t really care but that looks kind of fine to me I don’t know this is hard to hard to figure out so let’s just get it going first the color is going to be just so we can make it super obvious let’s make it red for right now the question now is do we have anything happening I don’t think I’ve saved anything let’s save the page let’s refresh the page we do oh oh it’s taken over our little dash because that’s also a before pseudo element so we’re going to have to make this an after there we go now our dash is back that’s a before pseudo element too so they were clashing with each other okay we’re getting somewhere let’s do a we got to do like a major font size here like font size of like 10 rim that’s like a hundred pixels okay we don’t want it to be right zero we want it to be left zero all right then we have a line height issue so we want the line height to be one okay we’re getting somewhere all right maybe bottom we don’t want 50% we just want zero maybe we want top 50% how do I get it centered okay minus 10% I’m just throwing out that like I’m just trying my best to get this to go somewhere close to where I wanted to go okay this is not making any sense in my brain but oh they’re now we’re getting somewhere minus 150 I this doesn’t feel right I don’t know what’s going on okay but that’s that’s better oh I know one one problem here is we need a width of like a hundred VW that’s better okay now these numbers might make a little bit more sense 120 that’s like right in the middle but again I don’t really know okay now what we can do is we need to outline it’s something WebKit text stroke text stroke and then there’s a text fill as well let’s see outline text CSS adding stroke to WebTex here we go I think that’s it text text shadowed we want to simulation not relying on WebKit property entirely we can use the text shadow property property supported in Firefox and simulate a stroke we use four shadows what does this do let’s see let’s take a way color red that does get us a stroke but the problem is it’s going to have a white it’s going to have white background and that’s not going to work on our dark background area either color color white text maybe not maybe it doesn’t I think it does let’s go with the index of minus one that puts the text behind there and then instead of this we can do shade light which should be like a light gray instead of like black text I just need to know what this looks like on a dark section so we come down here and we go why us and add data heading and make this say why us save we can’t ever see it in the builder we’re only going to see the data heading and I do gallery save oh it’s over there oh because this is centered so the left is zero it should be attached to the left what if I do what if it’s the width throwing it off it is okay that’s interesting display flex the look at that that’s what we’re missing okay display flex and then the flex direction now is start which fixes that okay but it might I’m still not seeing it if it’s on black but I do have it working on white and then what I can do is come down here and we can do text secondary so it’s going to make that yellow so it’s like my other one there we go and the problem is you know it’s a little it’s a little dark so I’m thinking this needs to be shade ultra light or what I can actually do is just go adjust the shade color I think I’m going to do that so I’m going to go into automatic CSS and I’m going to go to palette and it shades shade light I want to make this 90 so it’ll just get slightly lighter all right refresh there we go okay our services I kind of like how it’s it’s positioning itself it just doesn’t look as good when something is centered it looks perfect when it’s left aligned but I think we’re just going to deal with that I mean we could put a we could do data headings like data heading centered data heading let’s try this so data heading data heading let’s go up here data heading left I don’t know if we can do a starts with data heading okay oh gosh we can create a mix in at mix in data at mix in accent heading text and then what we’re going to do is grab all this stuff except for the position except for like this bottom 120 and left zero okay we just want all that so mix in accent heading text data heading left and after include accent heading text okay oh wait yeah okay oh accent heading text and then bottom 120% left zero then let’s grab this text shadow is also going to go inside our mix in let’s format that properly thank you okay all right so we have data heading left includes the accent heading text from up here but it positions it like this and then what we’re going to have is a data heading center which goes like left 50% or something I don’t know we don’t know yet let’s see if I have these things back online I don’t because this needs to be data heading left safe so our services and we’re not seeing it at all now down here I’m going to do data heading center okay I’ve lost it down there as well let’s see if it’s actually there this time like physically is it there it is physically there it’s just oh the attribute the data heading attributes wrong again oh because it’s in the mix in got to take it out of the mix in okay still not there ah here we go content data heading left okay my gosh now look I can position them differently geez Louise all right so if it’s data heading center I want the left maybe to be 100% or maybe just do like right zero no all that goes way over there because of the width okay left minus 100% there we go something like that maybe I’ll just do 50% maybe it was fine maybe it was fine the way it was before gosh I can’t do anything anymore oh it’s breaking my brain it’s breaking my okay we’re going to leave it like that so we have a data heading left that needs to be positioned again down so bottom was what like minus 50% or something yeah minus 100% that’s pretty good all right so effectively all we need to do is figure out how we’re going to get this to work on dark sections I honestly don’t know why it’s not I’m going to leave this I’m going to leave this problem to you guys well actually one reason it’s not working is because it doesn’t have the right data attribute on it so this will be data heading left save refresh okay still not showing up I’m going to leave this to the group how do I make this it still says shade light is undefined which is absolute nonsense what if I do bass light it’s clearly defined because it’s working right here no it claims that’s not working either I don’t know what’s going on with this okay let’s just try this DDD the good old e less you EE the good old EE EE I mean it’s still ain’t working on dark it’s still it’s still ain’t working on dark and then I don’t want to change that every time so we’re going to do this we’re going to make a this is going to be accent heading text color and this is going to be DDD and now what I can do is just pop this in here and I don’t have to be a chump just keep changing all those things manually all right yeah I’m done I’m leaving it up to you guys help me out with this how are we going to make this show up on black are we going to need another class to completely change up the style I don’t know you guys tell me but I gotta go I’m out peace
