0:00:00
Hey everybody, welcome back. We’re gonna do a kind of an advanced training today. Some people have been asking for more advanced trainings. This is gonna be one of those advanced trainings that some people were asking for. And this is a real world thing. This is a live scenario, okay? We have been, I say we, because you’re with me, you’re coming along on this journey. We have been tasked with creating, I tasked myself with it, but we have been tasked with creating a changelog for getframes.io.
0:00:30
This is a live real-world scenario. This is not just for training, this is actually going to go on the getframes.io website. We want to bring that changelog in-house, especially now that we have the frames library and documentation center all going, makes sense to have the changelog on the same website as well, makes it easier for us to update and manage a lot of benefits to it. Now, what I want to do in this tutorial is I want to attempt to use frames. One of the new timeline features. I don’t really know.
0:01:02
I don’t have a design for what this change log is going to look like, but it makes sense in my brain that a change log follows a, like if it was displayed in a timeline format, it seems like that would make perfect sense. I don’t know if this is going to work. I don’t have a plan for this. We are going to tackle this with all the challenges that would normally be there in a live project environment, right? We have kind of a complex problem to solve, and there’s got to be some thinking and brainstorming as we go. There’s going to probably be some challenges that we run into along the way.
0:01:38
But the reason I want to use frames is also because of this, you know, people ask, well, how, how easy are frames to edit and to style and to build upon, right? If, if a frame doesn’t fit exactly what I need out of the box, how easy is it to still use it as a starting point and save that amount of time, but still build upon it and customize it and really make it my own. And I’ve said, well, it’s really not that hard. It’s really, it’s quite easy. And people will say, well, that’s because you built the frames.
0:02:11
You know how they’re structured and you know all the ins and outs of them. And so it’s easier for you. And to that, I will say, well, we’re gonna find out because the timeline frames, I did not build. I did not build the timeline frames. So when I use a timeline frame which I have not done yet okay I’ve only mocked one up but when I for real build with a timeline frame I’m gonna be just like you. I did not build this frame so I have to kind of figure out how it was structured and then manipulate it. So there’s gonna be a lot of different birds killed with this one stone of a training because we’ve got we’re gonna be there’s gonna be frame stuff in here, there’s going to be advanced metabox, relationships, custom fields, a lot of stuff going on, and it’s going to be something for everybody.
0:03:02
That’s just fantastic, isn’t it? Without any additional banter, let’s go ahead and get right into this. I know the changelog is going to be custom post type driven. We need to have a custom post type for our change log entries because this is just a post. It’s like if I was going to go write a blog post with my changes and hit publish, there it is. So we need that database setup. So the first thing I’m going to do is go down to Metabox and we’re going to go to Post Types.
0:03:35
I’m going to make a new post type. This is going to be called change logs. That’s the plural, change log. I’m actually like sometimes I get confused on this. It’s really not a change log to my brain is like one whole thing. It’s not an entry. There can be change log entries, that’s plural. There can be a change log entry. There’s not multiple change logs on the website. There’s only one change log for frames, but the entries are plural or singular.
0:04:07
That’s kind of the way I see it. But I am gonna take the entry off the slug and just leave it as change log. So it’ll say entries or entry and then change log. Okay, labels is fine. We can skip over that. As far as an icon goes, I don’t know. We’ll just leave it, we’ll just leave it as the generic for right now. I do want to nest this though.
0:04:31
I don’t think I want it to be a top level item. I would like it to be under my frames custom post type menu right here. And so the show in menu, I can actually choose frames and it’s gonna stick it under here in this sub menu, which I think is gonna make a lot more sense. So we’re gonna do that. And then I think everything else for right now, actually we’re not gonna have these as actual posts that you can access.
0:05:03
At least that’s my thought process right now is you can just see it in the timeline and all of the information for each entry, but you can’t click on it. You can’t go to it, okay? So I’m going to say that publicly queryable is no, and then it does not have an archive. I don’t want to deal with the archive situation unless we have to. And then query var, we’re going to turn that off. So this should make the post is a post in the database, but it’s not a post on the front end.
0:05:42
You can’t view it, it doesn’t have a URL. Now I’m gonna go to supports. I don’t need a thumbnail, I don’t need the editor. We will not be using the Gutenberg editor for any of this. The title, the thing is with the title, it’s like I’m not gonna title them. We don’t have version numbers. I mean, the plugin has version numbers. Okay, the plugin has version numbers. Ooh, this is a good, this is, see, this is complex.
0:06:10
This is complicated stuff. Because we actually have plugin updates that need to go in the changelog and probably need to be identified as a plugin update. And then we can have just frames updates, like new frames, fixes to old frames, enhancements, whatever. We’re gonna have to have a way to decipher those. Okay. So title, I’m gonna leave title right now, even though I don’t know what the titles are gonna be for like, if I have new frames that I’ve released, I mean, what are we gonna name that?
0:06:42
There’s no version numbers, there’s no, it’s just, I mean, what are we gonna put as the title? I don’t even know. But I’m gonna leave it right now because I do need the title for when we do plugin version updates. Okay. Taxonomies. Hmm. All right, I don’t need to do anything with taxonomies right now.
0:07:00
So we’re gonna hit publish. We can come back to all of this later. See, the good thing is you’re not setting any of this stuff in stone. You can come back, you can add to it, you can adjust it later. But now I go to frames and check this out change log entries right there And so I go to change log entries. I don’t know. I don’t I don’t know what’s going on here Let’s just let’s just throw a random no titles test. I don’t okay. Let’s clear all this stuff out Don’t know what’s going on delete permanently apply. Let’s clear all this out. There must have been some old Change logs some sort. I don’t I don’t know that’s that’s weird Okay So we’ve got a we’ve got a custom post type.
0:07:41
The first thing I want to do is add a new custom post type, and let’s just test. Obviously, we can’t do anything here because we’ve turned off the editor, we’ve turned off the feature, we’ve turned off everything. So what I need to do is get some custom fields in here. I’m just trying to think, let’s go to MetaBox custom fields and let’s think about what we need. I’m going to hit add new and we’re going to call this change log. We’ll do change log entry because that’s what we’re going to assign it to.
0:08:12
I usually call the field group the thing I’m assigning it to. So the settings for this is going to be change log, right here, change log entry. All right, perfect. We’re going to position this after content, high, all of that is good. What fields do I need? So I need the actual line item. That’s probably what I’ll end up calling it. So let’s just make this a text.
0:08:42
It needs to be a group. It needs to be a group. Because in my mind, I’ll explain it as I go here. So this is going to be a change change log entry or this is going to be a line. This will be, we’ll just call this a line item. Okay and so the line item actually has multiple components because this is what we need to make clonable. So I’m going to click to make this clonable. It’s going to be sortable and that should be it. Maybe add more text. Let’s see, what is this?
0:09:15
Is this for the button for cloning? Yeah, okay. So, this is add another line item. Okay, so each line item has what? Well, it needs a text line, a text field. This is going to be the, I don’t want to call it the title. Maybe the description. Let’s do title. Let’s do title. Maybe we do title.
0:09:45
All right, then I want to have a type. A type. And for this, I got this idea, right? If you go to Bricks Builder changelog. So we look at this, right? Where’s the, okay, here it is. See over here on the right, there’s these badges. This shows you whether it was something new or an improvement or a fix. I really like that idea. So in order for that, we need a type.
0:10:14
So there’s going to be a title. There’s going to be a type. Why am I typing type? This needs to be probably a select box, I would imagine. This is going to be the type. And we’re gonna say new or fix or enhancement. So those are our three options. Our default value is gonna be fix. And here’s why the default value is gonna be fix. Because I actually don’t want to use this line item.
0:10:46
I’m now thinking in my brain ahead to something else. Okay, let me explain my thought process here. I don’t wanna manually, every time we have a new frame, like image group echo, I don’t wanna type in image group echo manually, because then I also want in this timeline, see I know some things I want, right? But I just don’t know how to achieve it yet. I want people to be able to just click directly to that new frame.
0:11:15
So when it says image group echo is new, well, I don’t want you to have to go to the library and search for image group echo. I want you to just be able to click on it in the changelog. It’ll take you right to the documentation, and the examples, and all of that for image group echo. In order to do that manually, I would have to write image group echo, I would have to go get the link from the library, I would have to put it in a custom field, and that just sounds like a nightmare when it’s already in the database.
0:11:41
It’s already in the database as a frame right here. So it would make more sense if we used a bidirectional relationship for doing that and just say, hey, here are all the new frames and I use relationships to list all the new frames, and then that allows me to automatically link to them as well inside of the query loop. That’s what we’re going to do. So these manual line items are for things that are not in the library that I can’t just reference via a relationship.
0:12:09
They’re for things I have to input manually. So they’re not, they’re actually not, it needs to be called an additional line item. Because it’s going to be an addition to maybe the new things, the new frames that we’re adding. Do I want to call it additional line item or do I want to call it, do I just manual line item? Okay, I don’t know yet. I don’t know. I don’t know. But we’re just going to keep moving forwards because again, these things are not set in stone.
0:12:39
Right now, just for the purposes of organization, I’m going to have it say additional line item. And then that thing is going to have a title. It’s going to have a type and then it’s going to have a description. So this is going to be a WYSIWYG editor. I’m going to go to Editor Options, Text Area Rows, and change that to three. I know it doesn’t need to be a gigantic. They always put a gigantic WYSIWYG box in there.
0:13:02
I don’t need gigantic WYSIWYG boxes. I’m going to save the data in the raw format and we’re going to call this description. So I’ve got title, type, and description. Let’s go ahead and save this, publish, and let’s go to frames, change log entries, and a new tab, and let’s go to add new. Okay, so now we’re more in business here. I can actually add a new entry. I can give it, I can give the line item a title. I can choose choose which group it belongs in with fix being the Default and then I can actually give it a longer description of what that is now this long description I’m not envisioning this being inside of the actual timeline This would be if you wanted to click and get more information on a specific line item We can pop up this description in a modal and so it gives us almost like a full blog post, you know, amount of content to be able to put in for each line item, but only display it when the user requests it.
0:14:12
That’s kind of, that’s kind of what I’m thinking here. Okay. The next thing I’m going to need is the relationship. So I need the relationship from the change log to the frames. So that anytime we add new frames, I can reference them in the changelog. So I’m going to go to MetaBox and go to relationships. Right now, we’re just getting the back-end structure set up, and then we’re going to go ahead and dive into the actual editor and try to start building things.
0:14:36
So I’m going to do new relationship, and this is going to be frames relationship with changelog. So I just do frames-changelog. Then what I’m going to do is choose frames, choose change log entry. There we go. And then I’m going to Meta box, Meta box. And I always get confused by this. So when it’s frames here, I should call this related change log entries.
0:15:05
And then when it’s change log entry down here, I should do related frames, I believe. Okay. Now this one, when I’m on the change log page, choosing related frames, this is even harder for me because of the dyslexia. It’s like, whoa, what direction are we going in? Okay, I want this after content. This one I want on the, I could be completely backwards here.
0:15:33
We’re about to find out. This I want to be collapsed by default because I don’t really when you’re on a frame and editing a frame I don’t want the box to be prominent there because that’s not where I’m going to be linking up these changelog entries. I’m going to be linking up the changelog entry on the changelog post and I only care about seeing the frames. You’ll see you’ll see it in just a second I think. I’m going to All right, and now what we want to do is go back to change log entries. There’s our test. This is it, exactly. So related frames right here. Except I want it to be first.
0:16:15
Is there any way for me to priority high? Or is it down here? No, this should be low, this should be high. Okay. Maybe changing the priority will knock it up there to the top. Let’s find out. Refresh. No. All right. I can drag it up there manually and then it’ll stay there. Okay. But now look at this.
0:16:44
We’ve got, look at that. We can reference any frame that’s already in the database and just say, hey, that goes in this changelog right here. So I’ve got the ability to put our frames in, I’ve got the ability to have manual changelog entries. I can add multiple line items down here. I can remove them. I can sort them. They’ve got a type. I think we’re almost, let’s just go ahead and get a change log entry in here.
0:17:17
So I’m gonna go to Notion and there’s yesterday. So yesterday we had some good updates. All right, so I’m going to change the date on this to yesterday. I don’t really care what time, I just want the date to be changed. And I wanna reference these. So pagination alpha, author author, and then article India. So we’re gonna do pagination, and what’s cool is you can just search right here and it’ll sort it. So there’s pagination alpha, and then, my memory is so article section India, article grid India article card India I wish it would automatically put the cursor here so I can start it doesn’t automatically put the cursor here so I can start typing article card India what was the other one there was one author page and author hero so author page alpha and author hero alpha okay I’m Hero Alpha.
0:18:26
Okay. I’m gonna do a manual line item. This is a manual line item change for testing. Okay, and then that is a fix. And then I don’t even care about the descriptions right now. It’s not, that’s like a future feature. I’m just, an idea in my head. We’re just throwing it in there. Okay, so we have a test entry. Now I need to make one more.
0:18:48
So I’m going to do one more and I’m actually going to do Sundays. And what was the Sunday date? The 22nd. So I’m going to change this to January 22nd. Yeah, sure, just go ahead and publish it. Okay, January 22nd is good. Again, I don’t even have titles for these things. Okay, so what happened on the 22nd? So, FAQ, Bravo, Card Grid. Okay, so, FAQ.
0:19:19
Ooh, did I not put, ooh, I don’t have documentation for these yet. Okay, that’s the other kind of good thing about the bidirectional relationship is that you can’t say something was released unless you’ve already created documentation for it. So like forces you to create the documentation so you don’t get behind. But it’s bad for our testing purposes. Did I do a squeeze page yet?
0:19:47
Squeeze page, Charlie’s in there. Okay, when is that from? That was from last Saturday. So what was the date last Saturday? That would have been the 21st, I guess. So yeah, we’ll just do 21. Okay, perfect. And then we’ll just do squeeze face Charlie. And we’ll just hit update. So now at least I have two entries in there.
0:20:14
Because I need to be able to test the query loop, obviously, right? So I need to be able to see more than one thing. Let’s go to all change log entries and just see them. Okay, so we’ve got test and no title. And maybe we’re cool with no title. I don’t know. All right, let’s get to actually building. So I’m going to do pages add new. We’re going to do change log, and this is going to be beta, okay? And then we’re just going to go ahead and hit edit with bricks. And I want to kind of use the same hero that I used for the library.
0:20:57
So we’re going to go with get frames.io slash frames. That’s the library. So just this basic, basic hero right here. And I think, did I save that here? Oops, I don’t wanna do that. Did I save my hero? Hero, hero, hero, framesicle post. No. Okay, so I’m just gonna go to remote templates. We’re gonna go to heroes.
0:21:25
And I think it’s just one of these down here. Maybe it was this one, golf without the image. I just took the image out of it. Yeah, that’s it. Okay, perfect. And then what I’m gonna do is here’s Hero Golf. I’m just gonna make this, I’m gonna fix this at the class level so that we’re not running into that issue anymore. I probably did it at the ID level on the frames library page. Okay, I want to, is this the right color background? Let me see if this is seamless. Let’s go to the actual page.
0:22:07
Yeah, that looks right. Okay, so this is gonna be called the change log. Makes sense, right? Updates, okay. And we’ll think of all this later. The next section below is actually gonna be my timeline section now. So I’m gonna go to remote templates. I’m going to go to timelines and I’m going to hit refresh just to make sure we’re bringing in the latest version.
0:22:35
And I’m going to try alpha first. I’m going to try the alternating one first. I don’t know if this is going to work well. See how it brings in a heading because it’s a section and a section has to have an intro and all this other stuff. Guys, it’s so easy. Just get rid of it, right? If you don’t need something, just get rid of it. Uh, why the hell is there a floating bullet over here? What is going on? Sometimes bricks, sometimes bricks does the weirdest stuff when you import. Okay. It just has an icon just floating out there. What is going on? Where do you go? Little icon. Where, where did you, Oh, you came from right there oh dear okay all right let’s try that again let’s get rid of that let’s go to templates remote templates maybe it’s just a a bug thing um it doesn’t happen very i’ve seen it happen before Alpha.
0:23:33
Enter. There, see? There’s no floating bullet this time. Okay, let’s get rid of the intro. Great. Let’s give this a background color. So, timeline section alpha. I’m not going to do this here. I’m just going to go BG base. With background colors, you change background colors all the time, depending on the order you put something on a page. You don’t really need to do this at the class level. So, I’m just going to do BG base light and give it that kind of cream color. Okay.
0:24:08
Let’s save and see what we’ve got. All right. So like you can see it’s, it’s, it’s, I mean, it’s pretty clean. It’s pretty clean, right? What we have to do now is take this frame. This is like the starting point. And you know, by inserting this frame, if you look at the complexity of it, I didn’t build these timelines, but I did look at them. And let me see, timeline section alpha, and we’re gonna go down to, is it, oh, timeline alpha, activate the class, come down to the CSS. It’s, you know, they’re fairly complex. They’re fairly complex.
0:24:47
So we’re talking about popping in this frame, just saved us, I would estimate, based on what I know, what it took to build this frame, and a lot of the back and forth discussion that went on, and bug fixing and tweaking things, you know, we probably just saved ourself an hour and a half of work. If you already knew how to build a timeline, and you just started sitting down from scratch building it, we probably just saved an hour and a half of work by inserting that frame.
0:25:14
Now, the question is, does the frame do what we want it to do? And the answer is no, right? Out of the box, this is not a changelog. This was not designed to be a changelog. The question is, can we make it a changelog? That’s really all that matters. And I think the answer is yes, that’s what we’re gonna find out together. It’s already got the date in there, which is good.
0:25:37
What I need to do here is isolate now. So I’m gonna collapse timeline alpha. I’m gonna collapse everything. And we’re gonna open timeline alpha and see our list and then our three list items. Well, guess what? We’re query looping this, so we only need one list item. So we’re gonna go ahead and hit save on this. And this list item right here, which you can see is clearly built with CSS grid, is going to be our loop.
0:26:05
So I am going to use a query loop here, and what am I going to query? I need to query timeline entries, sorry, changelog entries. So under posts, I’m choosing changelog entries, and look, it’s already given me a second one, which I believe is because it can see that there are two of them in the database. So we’re off to a good start. We’re going to hit ”Save” there.
0:26:30
I don’t know what other stuff I want to configure yet. I don’t even think I need to configure anything yet. What I need to get in here is the title, which we haven’t even really given them any titles. But let’s just see what it pulls in. So I’m going to do ”Post Title” and I’m going to hit ”Save”. So far, it doesn’t appear to be bringing anything. Okay, it did. It brought in test. It’s not giving me a preview in the builder. I forgot how to turn that on.
0:26:58
I think there’s a way to turn that on. I can’t remember right now, but I don’t really care. As long as it’s querying, I don’t really care. So then this means I can easily query the date here. So here’s the post date. Let’s go hit save. We’re going to refresh and look at that. We’ve got January 23rd was the test entry, January 21st was the next entry.
0:27:25
The next thing, I’m now thinking about conditional logic, about these post titles, because I’m looking right here how there’s no post title, right? So if there’s no post title, I still want there to be a title. I just want it to say something generic like in this update or in today’s update or yeah, just like something like in this update. Well, in order to do that, where sometimes if it has a post title, then you show the post title.
0:27:58
If it doesn’t have a post title, then you don’t show the post title. That’s conditional logic. So I could just duplicate this heading, and then this is going to be our post title, and this is going to be our no post title. I actually don’t know if this is going to work because of the fact that WordPress actually puts a placeholder in for you right so if i go to back to the dashboard here and i go to change logs see that no title i don’t know if that counts as a title is that a title or is that not a title i don’t know um we’re about to find out we’re about to find out there’s only one way to find We’re gonna show the post title if, I’m gonna say post title, show this if, if it, is not blank.
0:28:53
There you go. Is not blank. Okay. And then, I had to think about that for a second. And then this one is you show this, you show the post title is blank. That’s it. That should be easy. Easy logic. Okay. Does it fail? Oh, wait, hold on. I got to actually make this say something. No, that would be step one. So we don’t want post title here. We want this to say in this update Dot, dot, dot. Okay. There’s our two options right there. Now let’s see what we get. Bam. Just like that. Okay. So now this can say like version 1.03 or whatever.
0:29:47
We have a version number to put in for like plugin updates. It’ll say that. If it doesn’t have a title, it just gives this generic title before it gives all this other stuff. So we are looking good, my friends. Okay. Okay, the next thing I wanna do is I wanna get the actual content in. And this is gonna require another loop. So in my body, there’s this lead and it’s fr-timeline-alpha-lead. Oh, that’s a mistake, isn’t it?
0:30:18
Fr-timeline-alpha-lead, okay? We gotta fix that. I don’t wanna hop over there and fix that right now. Okay, I don’t think I need the lead. Actually, I do need the lead. Excuse me, I do need a lead. Ooh, I’m missing a custom field. I’m missing a custom field for sure. Okay, so I need to go to change log entries. I need to, not under additional line item.
0:30:47
I’m just going to add a field, another WYSIWYG editor, and this is going to be update description or update notes. Update notes. Because every time I post a new round of updates, sometimes I just like to have a little message in there about the updates that is separate from those line items. We need a spot for that. So I’m going to put this up here. Okay, so update notes, then additional line items. I need to save that in the raw format. I need to add a text area row key, and this is going to be the three. We’re going to save. And now what I need to do is I need to go back to test. And let’s say this is version 1.06 or 05. I don’t even care. We’re going to change this later. This is all for testing purposes. But now look, I have the ability to have update notes. And just because I have OCD as well as dyslexia, I need to add a divider.
0:31:48
Okay, so we’re gonna put a divider between the update notes and the additional line items. It’s not a big divider, but it does give us a little bit of, I can get rid of that page. It does give us, where are we, right here? All right, update. And can I refresh the page, please? There it is, see that little divider right through there? It makes a difference to those of us with OCD, okay?
0:32:13
All right, so now, what else do we, okay, so our lead, our lead right here, see, it’s already configured for this. I’m stealing a frames element that’s not even for this purpose, and I’m using it for this purpose. This is going to be called, actually I have to refresh the builder because I can’t access that part of the database because I just added it. So now we go back to the lead and we can insert the update notes.
0:32:44
Check it out. Now, I know from experience that this cannot be a PTAG anymore because I’m inserting data from Gutenberg. It’s gonna automatically put its own PTAGs in. We’re just gonna check on that real quick. Now, in order to be able to check on it, I’ve got, so why do I keep losing the tab? Let’s go to change log entries, V105, and this is an example of an update note. Okay, and then see I can also put in like links to things if I want to.
0:33:21
Let’s check that out. Let’s go ahead and hit update. And now over here, over here, yes. Okay, we’ve got it, good. Ooh, this is interesting. What’s gonna happen if the update note is too short? Okay, hold on. Let’s just look at it on the front end. Oh, look at that. This is an example of an update note.
0:33:46
I’m also going to put, and this is what I was afraid of. See, it’s left aligned. It doesn’t make it all the way over here. It looks really odd. I don’t know how we’re going to handle that yet. We’re going to get there at some point, I’m sure. But I immediately know I need conditional logic on this, because I don’t want this to show if there’s no update notes. We’re only going to show this if dynamic data, update notes does not contain blank or is not blank.
0:34:22
Save. Let’s check on the front end, make sure we still have our update note and we do but down here we likely won’t have one let’s get the rest of our stuff queried in and then we’ll just double check to make sure that that’s working properly but look here v105 we’ve got our headline in and then when we don’t have a proper headline we have in this update so I’m happy so far I’m happy so far we’re making progress all right next thing we need is to actually query the line items and the relationships. Okay, so for this inside of our body after our lead we’re going to add a block. And this is going to be a line item and I’m going to say this is a relationship line item. And then I know I need another line item, but I don’t want to create it just yet. Let’s get this one working first. All right, so this is going to be a change log line item. Perfect. And notice I’m using the default timeline classes on everything else, but when I start building this out, the actual unique components to this, I am just gonna use my own custom classes.
0:35:45
I’m not gonna stick with timeline alpha and all of that. And that’s pretty much okay. So, where was I? Line item relationship, and that’s a block. Okay, so inside of that, I want obviously the text for the line item. Well that’s right aligned but that’s interesting isn’t it. Okay all right I’m all right I think I know what’s going on. Basic text this is going to be line item text. What did I call it in the custom fields. Let’s go to MetaBox custom fields. If I call them the same things, then we should be good.
0:36:35
Additional line item title. Okay. So line item title. Line item title. So this was change log line item. This is going to be, you guessed it, change log line item title. Got it? Bim, good. The question now is, here’s my second loop. The line item itself has to be a loop. So we’re going to turn on the loop and then instead of querying, we’re going to do type and we’re going to say additional line item right here.
0:37:10
And that’s going to query all line items automatically. Now inside of that this line item title we’re going to query guess what the title for additional line item and this my friends probably needs to be a P. Alright so we’re going to hit OK on that and let’s just see if this is blown up or let’s see what’s going on here. So preview, manual line item change for testing. I need more than that. Okay. Frames, change log entries, V105, add another line item, a second line item change for testing, type fix. Let’s make this one type enhancement.
0:38:08
Update. Nice, refresh. Hey, look at what we got. It’s coming along. It’s not right aligned, but I think that’s okay. So let’s look at this. What are we doing here? Direction is vertical typography, right text align, so I basically just need to do that in my. With my lead, but see my lead is not full width, so let’s go.
0:38:45
Layout with 100%. Now it’s OK, that makes sense. Now, change log line item is, but hold on, this is gonna be, we gotta think about this cause this has to alternate. This has to alternate. All right, we’re gonna try to tackle that. Ooh, that’s not even, ah, line item title needs to be with 100% as well.
0:39:08
There we go. Line item title needs to be with 100% as well. There we go. Okay, now inside of the line item that’s being query looped, that’s a box. Okay, I’m gonna need a badge in there as well. Okay, let’s put a badge in there. So let’s do text and this will be the badge and then for now it’s just going to say new something like that What I need to do is set this to flex row Put in a gap We’re gonna do maybe 0.5 M What let’s do 1 M and Then are we gonna do space between because I did text align right.
0:40:06
Yeah, oh, how’s that gonna work? Should the, where should the badge be positioned when it’s right aligned versus left aligned text? Man, these are, okay, these, see, these are tough. These are tough questions. Okay, let’s just get it more built out and then I think as it comes together, maybe some of these things will answer themselves. So change log line item, either that or we’ll get really far in and realize we’ve made a drastic error and the alternating timeline is just not gonna look good and we have to scrap it and start all over that that’s a that’s a possibility not gonna say that’s never happened before my friends has happened okay the body has the lead man this would be really a lot easier if this needs to be in a wrapper if I could actually see the query right here.
0:41:13
Let’s insert a block, bring that block outside, bring this inside the block, call this line items wrapper, and then give this a class of change log line items wrapper. And then now what I can do is in my body, which now effectively only has two objects in it, I can use a row gap here of content gap. And then inside of this change log items wrapper, I can do a content gap divided by two, because I want these lines to be closer together. So let’s save and see what we get.
0:42:05
This looks like it might work. All right, let’s give this badge a class. So this is going to be change log type badge, because it’s what type of line item is it, or I’ll do line item badge. That might make more sense, line item badge. Okay, this is going to be a span style. Typography is going to be 1. And font size text XS most likely. Uppercase this. layout padding 0.5 M all around maybe this goes to let’s turn this off go 0.75 I tend to like a little bit more on the sides than on the top and bottom I don’t know just me just me maybe it’s you too then it’s both of us background is base medium.
0:43:17
Not a ton of contrast there. What the hell just happened? What are you doing? What are you doing? We got a flex issue going on there. Okay, there it goes. It snapped back into reality here. Change long light. Let’s just give it a width. So we can, let’s just say like three CH or actually a min width. What was that not even gonna work? Yeah, there we go, okay.
0:43:43
Five CH, seven CH, six CH. There you go, six CH, okay. Let’s also center that typography and yeah, we should be good. Okay. All right, border radius, border radius, border radius, border, border, radius S, all sides. Okay, looking pretty good. Let’s go to font weight 600 maybe. And then let’s go to text color, base ultra dark, one of these trans colors.
0:44:34
Something like that. Something very like, you know, soft light, you know, not in your face. All right, I’m seeing, oh dear, oh dear. Okay, don’t do that. Let’s flex row this with a line cross-axis to the center. I think we’re good. Let’s save. Let’s see where we’re at. Yeah. Line height on this item right here on the title needs to be like 1. Let’s just do 1.1.
0:45:08
We don’t need a ton of line height going on there. Now it’s like perfectly center aligned. I wonder if I should have a border between these items. Is that going to look good with this timeline effect here? Maybe it will. I don’t know. Let’s give it a shot. For pseudo elements, somebody just asked this in the group the other day. I don’t use borders for these dividers. I always use pseudo elements.
0:45:54
We can just use an after. I always write the CSS. I don’t. This little pseudo classes elements panel and bricks oh my gosh absolute disaster in my opinion. I don’t even touch it. I don’t even want to go near it. Okay, got a little bug here. We’re actually fixing this bug in the next ACSS update. Super annoying with the expansion feature. So you’ll see that happen a few times but no no biggie. Why is that not right aligned anymore? Oh, okay. Nevermind. I I’m stupid. It’s because of this after that I’m putting in right here. Okay. So this is going to be width of a hundred percent. This is going to be a height of 1.25 pixels, a background color of, well, why don’t we use the expansion?
0:46:50
Got to teach myself to use the expansion. Base ultra dark trans 20, maybe 10. Maybe let’s make it prominent so we can see it, make sure it’s there, then we’ll tone it down. So I’ve got a width, I’ve got a height. We’re going to display this as flex. We are going to go up here to root. Oh gosh, display of flex flex direction of Column that should be good. That should have been the default, but I just want to make sure it’s there. Okay. There we go This is what I was actually trying to fix it should not be next to what we’re doing here Line, items, wrapper, this is the query loop.
0:47:33
That’s where the divider should be. I think it’s because I put it, yeah, it’s because it’s a row here. Line, items, wrapper. Okay, see if this was a column, then the border would be underneath it. But because it’s a row, so what we may need to do is position it absolute. So that’s okay, I think we can do this. So we’re just going to go position relative on our parent and then on our pseudo element And then we can put it bottom zero and It broke here there we go so there it is now now it’s where I want the problem is It’s not gonna automatically create spacing for me like it would have otherwise Okay, we just got to think about this for a second.
0:48:20
So the gap between the items is content gap divided by two. Okay, let’s just play around with it and see. So from the bottom, I want minus one M. I’m just putting one M as a placeholder right here, and I want to see. Now, what we need to do is go, yes. Now, what we need to do, we don’t want content gap divided by two. We just want content gap here. Then I think what we can do with with our pseudo element after is half of that. So if it’s half of that it should be right in the middle of the gap, yeah? That’s what my brain thinks. So let’s do content gap divided by 2. Ah, times minus 1 because you got to bring it down okay it’s got to be negative it’s gotta go the other direction all right perfect let’s go with a refresh we’re winning we’re winning my friends okay all right let’s tone it down let’s go to Look how easy that is with these variables.
0:50:27
Man, we got our divider. I think it looks perfectly fine, honestly. Guys, you got to admit we’re making some good progress here. We’re making some good progress here. The question is, do I want the update notes and the line items to be the same height? I think we need to tone down this title right here to something like text S. Save. Let’s check that out. That might be good enough. I actually think we need more of a gap there between the intro.
0:51:06
What is this gap? Content gap. About content gap times two. times 2. Yeah! Yeah! I’m liking that. Now I think this makes a lot more sense. Okay guys now what we got to do is we have to bring in the… so here’s the relations… these are the… what are these called? What do I name that? Oh this was the relationship. I queried the wrong thing here. I need to query the actual related frames change log right here and this should query the those items. Oh oh oh no that’s fine that’s fine that’s fine. That’s fine. That’s fine. It’s just the wrong title. Got it. This should be post title.
0:52:10
Because now I’m querying the actual frame entry in the database, so I need the title of the frame. So we’re going to hit save, refresh. Got it. Got them. All right. So man, okay, this is good. This is good. We’re making good progress. That badge new, it’s a little big. It’s XS. We had toned down our XS font size here, I think. Text. It would help if you’re on the typography tab. Text over, oh yeah, yeah, yeah, yeah, yeah.
0:52:55
14, 13, 15, 17. Okay. There we go. That’s looking a little bit better. Okay. Now we’re not taking up so much room. Okay. Now what we need to do is query the other items. So that was the line item relationship. I’m going to duplicate that because I want this to be exactly the same, except this is going to be called additional, and we’re going to change its query to additional line items, and then we have to change its title over to the line item title which was right there.
0:53:49
Now, hit ”Save”, and now what we’re effectively getting, if it works, I shouldn’t speak until it works, there we go. We’re getting one query ahead of another query. We’re getting all of the relationship queries, then write into the additional line items to the viewer, it looks like it’s all the same thing. Looks like it’s all the same loop. It’s actually two different loops querying two different things using the same card format. Guys, I’m liking where we’re headed.
0:54:20
I’m liking where we are headed. So we need to get this badge situation sorted out. Now, if it’s a frame that’s being, this is a new frame, the badge always needs to say new. But if it’s in this query loop, remember in this query loop, we have the ability to choose a type, right? So we need a badge for each type. I think. Maybe not. Oh, oh, now my brain is, now my brain is off in data attribute land and I’m like, can we possibly do this with only one badge? Oh man, if I can do this with one badge, that would obviously be better than having three separate badges.
0:55:18
Okay. Let’s think about this. No content. The only thing is this is not, this would not be accessible. No, I think it’s fine. What we really need is to go to custom CSS. First, we go to attributes. We’re just going to play around here. We’re just going to see if we can problem solve this. So this is going to be called data.
0:55:51
You always have to have the word data and data attributes. Data, data, whatever you want to say. I even interchange them half the time. In fact, I’ll just try to interchange the pronunciation as many times as possible in this. So for the data attribute, I want data dash, what is this called? This is a line item, this is a change log badge. Data badge label.
0:56:21
Data badge label. Okay. Let’s just put new in here for right now. So now what we’re going to do is we’re going to go to style CSS, we’re going to go to root, and we’re going to do a before pseudo element, content, test, quit breaking my before. Oh, hold on. I can’t do this on the class because that’s going to affect all of them. Wait a minute, hold on.
0:56:57
Yeah. Cannot do that. We’re going to have to give it, we’re going to have to do a modifier. Okay, so this change log line item badge. Dynamic, bam. Okay. Root before content test. Test, test. Nothing.
0:57:13
Why can’t I see it? Can I see it on the front end? Test, test, nothing. Why can’t I see it? Can I see it on the front end? Okay. All right. This is being pulled from our data attribute guys. Look at this. There’s nothing in the box. It’s pulling it from right here. But actually it’s not. I’m sorry. It’s not. I lied.
0:57:36
It’s pulling it from right here. To pull it from our data attribute, we have to do an attribute function, data, what did I call it? My gosh, my brain. Data, badge label. Did we do that? Oh dear gosh, what just happened? What has happened? It wasn’t that that broke it. I clicked on something and it has and I don’t know what I clicked so I don’t know how to fix it because I don’t know what I clicked. Well what did I click? Timeline section alpha, timeline alpha, here’s our oh. It unnested the list from timeline alpha parent. How did that happen?
0:59:14
My mouse just hit something and bricks just like blew up. Okay, we’re back, we’re back, we’re back. This is clearly not working. Reference data attribute in sudo. Yeah, that’s what I freaking thought. The attribute function, didn’t I do that? Can I get an example, please? Attribute, title. The name of an attribute on the HTML. Can I get an example, please?
0:59:51
Click me, click me, background color, color, color, color. Yeah, well, show me, dude. Where is it? Before. Don’t see it in there. Content. Your content’s blank, dog. What are you doing? Content. Data, attribute, oh, OK.
1:00:13
It’s probably the quotes. So you always forget little tiny details. Where were we? We’re over here. Dynamic. Probably these quotes right here. All right, let’s check. Yes, sir. Okay. Now, all we have to do is in our data attribute, we’re going to open the data attribute, take away new and inject.
1:00:43
What are we going to inject, fam? We’re going to inject the type of the line item. We’re going to hit save. Then we’re going to come over here and we’re going to see that, oh, this says fixed, this says enhancement. But now we see a problem. We have a problem with our width here. So let’s go to the line item badge altogether, auto. What we’re probably going to do is, because it’s the flex that we’re running into. Maybe this is width 100%. It’s probably because that’s width, no, yeah, probably because that’s width 100%. We’re going to have to right align, end align, and see that over there is going to do that.
1:01:41
Let’s look at timeline alpha and see how they how they did the alternating of this and see if we can tap into that. So first child, last child, first child, icon wrapper before, that’s the line styling visual fix inside builder list item okay I don’t see anything there for alternating I don’t see anything there for alternating is it our content I don’t see anything there for alternating body I don’t see anything there for alternating. It must be way back up. Maybe timeline section alpha up here? No. Timeline alpha. Oh, left. Here we go. Last child. Right. First child. Okay. Okay, I think I see what’s going on here.
1:02:40
Okay Okay, I think I I think I see what’s going on here Let me let me just see if this is still correct. Yeah now see I fixed our badge. I’m just trying to figure out How does bricks handle that bricks? change log Because they use a right align, oh, okay, no no no they don’t They left align the text they right align the badge. Let me see if that looks terrible here, because that would actually be the easiest thing to do. So I actually want space between the way I had it before.
1:03:25
And with the separator, it may not look that bad actually. I don’t think that’s a problem really. I think we can get away with this. I think we can get away with this. I’m kind of fine with that. At least for right now. All right I just need to make sure that there’s a gap between those items. There is and I need to make sure that there is a row gap. Let’s do a content gap divided by two there. I just don’t know what’s gonna happen when these collapse. Oh, that looks perfectly fine actually. What is, oh, improvement. See, the word enhancement, word enhancement’s very long.
1:04:16
Bricks, those German engineers, man, they’re smart. They used improve. Okay, instead of improvement, I could use enhance. 1 2 3 4 5 6 7 1 2 3 4 5 6 7. Same one. I’m gonna be different. We’re going with enhance. Okay. Alright, so I’m going to go to and change log entry, additional line item, type, enhanced, update. No idea what that’s going to do to the database, but we’re going to find out. Yeah, it loses. Anything that was an enhancement loses its value.
1:05:04
We’re going to go to frames, all change log entries, B105, how long we’ve been recording? An hour, five minutes. That’s not bad. That’s not bad for where we’ve gotten. Enhance. Update. Check the front end. We have an enhance. Okay, that’s going to be much better. All right, now we want to link up the actual frames. Yes, we do. Okay. So a line item, this is the relationship. So that entire line, do I want the entire card to be clickable or just the post title?
1:05:54
I’m thinking right now just the post title. So because the card itself, we may need to preserve that as a secondary clickable component that actually opens up. Well, I don’t know, we can also make the badge a link too. We’ll just do the post title for right now. So this is going to link to dynamic data, post link, save. Save. So now, there you go. Do I want the text to be linked?
1:06:35
Do I want the text to be read actually is what I’m concerned with. Because this now goes to right where you want it to go for each item, which is freaking fantastic. So all that work is done for me basically, or for whoever is updating the change log. Let’s just change the text. So typography, base, medium. Actually, what I can do is, let’s try to think about this for a second. Yeah, that’s fine.
1:07:21
I can’t actually just do this on line item title. I have to do it if it’s a link, right? So if we look at the structure of this, we’re going to inspect. So if it’s an A, if change log line item title is an A, then we got to change the style of it So what I’m gonna do is go down to CSS the only way to do that here You can’t really do that kind of targeting in bricks. So a class root or a I Wonder if that works No No, I don’t think that’s gonna work. I mean, I’ll try it, but I don’t think it’s gonna work. We could just try color red or color blue. Important. Yeah it’s not gonna work. Okay so man we can’t even do that kind of styling. We can’t even do that kind of thing in here. Oh wait no there it is. No no no that’s gonna do all of them. Okay sorry. Save. We’re gonna do this in code box All right, so WP code box Go to global let’s go down this is going to be change log and then what we’re gonna do is target an a that has the class of Change I guess edit grab paste there There. Okay, so if it’s an A and it has that class, then its color is going to be blue.
1:08:49
We’re going to save. It’s not really going to be blue. I just want to make sure that we’re targeting correctly. What it’s really going to be is base dark and it’s going to be 600. Golly! Typing not working. That bold is a bit aggressive isn’t it? Maybe we Base, medium, no that’s not going to work. Base, I don’t think that’s going to do anything either. I took away the, there we go. Okay. All right. We’re back. I can do a text decoration of underline, or just do a border bottom, border bottom one pixel dashed. This doesn’t look good with the dividers in there.
1:10:34
That would actually be an after. Content, let’s grab an HTML arrow. That one. Where’s my code box? Code box, thank you. Why is it my, why aren’t we updating? It’s my auto reload is not working today. Margin left of one M. Yeah, it did not update. Okay, there we go. Opacity, 0.3.
1:11:42
There it is. It’s like having to do a two times update. 0.5. I don’t actually know if I like this or not. It does clearly indicate that it’s a link though now. Does it not? Am I just imagining things? I think it’s fine. I think it’s good. Okay, what else do we need to do? What we need to do is duplicate a lot and just see how this is gonna actually, okay, that’s what we need to do.
1:12:15
Because what I don’t want is this page can’t go on forever and ever and ever, right? So what we have to do is see how it’s going to behave with pagination involved. So what I need to do is go to change log, all change log entries. Let’s trash this. Where’s my duplicate? Don’t I have a duplicate plugin on here? Tools, settings, copy. Where’s copy? Don’t I have a duplicate? Come on plugins, let’s go. Let’s go get to the plugin screen. Thank you. Uh, where?
1:13:04
Bro, this site’s getting big. This site’s getting complex. Duplicate, copy. I guess we don’t. All right, let’s add one real quick and then we’ll get rid of it. So duplicate posts. This one will do. I just want to make like 10 copies of that post real quick. That way I don’t have to fill out all the fields and all this other stuff. We can just move on with our life.
1:13:38
I don’t even know what that said. I just hit allow. I have no idea what it just said. Let’s go to change log entries. Copy, there we go. 10 times. Settings, default. I mean, I don’t know what else to choose. Copy now. Hopefully it copies the custom fields. Let’s go ahead and edit, apply, publish, update.
1:14:15
We need to look inside one. Here I’ll just do this. I love these copy plugins that can’t actually freaking copy things. Yeah it did, I bet it did absolutely But no content whatsoever. Freaking fantastic. Okay, all right, we can solve this problem another way. We’re gonna move this to the trash. All right, we’re gonna add new. V, this will be test. And then we’re just gonna select some random frames. That’s all we have to do here.
1:14:54
Okay, publish. We only need four. Okay, so we’re going to add new. Test three. This is going to be this one and this one and this one. Okay, publish. So nice. Test 4. Loading more. Let’s get down here. Okay. Publish. Now let’s look. There we go. It’s looking pretty nice, I think. Oh, you know what we need to do? It’s annoying me, is this badge right here. So the date badge layout width.
1:16:09
Ah, okay. This is one we’re not gonna be able to easily fix. Okay, oh wait, hold on. Yeah, no. Oh, we also need to come over here to the data attribute for the date time. This needs to have a YMD modifier in it. That’s the post date. Pub Pub date is the same. So we’re going to hit save. Okay, that solves for that. Now what we have to do is, I want to give this a background. First, we want to make the, okay, oh dear, oh gosh.
1:16:47
Bricks, bricks is freezing up. Save work immediately. Let’s refresh the builder. Okay, we should be all right. Grab this style typography, text S, background, color of base medium should be good. Kind of the same as this badge right here. Actually no, I want to make this dark so it kind of stands out. Let’s do background base dark. It might be a little too dark. Uh that’s a little too gray. All right we’ll do that for now. Typography, base ultralight, line height 1, 1m of padding all around.
1:18:09
That’s too much. 0.5 on the top, 0.5 on the bottom. That’s about right. radius of s, width of auto. See over here on the secondary ones, they look fine on the odd ones, they look odd. All right. We also need a gap in here. What is this? There’s a header, right? Okay, so because there’s a header, we can just put a gap in the header and we should be good. This is going to be a content gap divided by two. Actually I think content gap by itself would look good there. I do, I do, I do. Yeah, see down here? Looks much better.
1:19:12
Okay, I think we’re looking pretty, pretty good. Alright, so what we need to do is on the odds, so I’m going to go all the way up to timeline alpha. No, no, no, I’m going to go to the actual date badge. We’re gonna go to style CSS root int of type odd. Let’s just do a background of red see if we’re targeting properly. Wait a minute they can’t all be odd my friends. Okay I’m gonna take this up to the card level the list item level. Root, inf, child, odd. Then Then target the badge. What is the class of the badge? Timeline alpha date. Okay. So if it’s an odd list item, we’re going to target its date.
1:20:45
We don’t have to yell. Okay. Background color, red. background color red there we are there we are align self flex end that bug is bug kills me can’t wait for it to be fixed okay guys he’s solving we’re just solving problems that’s what we’re doing here save refresh Yes, sir Okay Test four test three test two. So this is showing the more recent at the top. That’s what we want What we want to do is break this after the second one one two Break it what happens? Okay, so we’re going to do the query loop.
1:21:39
I want to change this whole pipe situation here needs to change. Query post for page 2. Let’s just make sure that that limited it to two, which it did. So now what we want to do is drop in a pagination element, and thankfully in frames because frames is modular and amazing. All we have to do is go up here and go to remote templates and we’re just gonna search for pagination and right there my friend is a little pagination element. We’re just gonna drag it in here and then we’re gonna select the query that we want which is the list item query.
1:22:19
It’s our pagination like magic and it’s already got most of the colors that we want already put in. Okay, so if we hit two, it shows us test and V105. The timeline is not broken, it doesn’t look broken, it just starts a new timeline on the next page. Oh man, I love it when stuff works. You know what I’m saying? How much time did I save with that little pagination element? 5 minutes? 10 minutes?
1:22:53
Time is money. Okay. So we’re going to go to pagination alpha and we’re going to go down to here and I want to change the… that’s the background of the current. I just want the background of normal. I don’t want that. Medium? Yeah that works. Then the typography of normal is just this. That looks good. That looks good. Nice and clean. Okay. Guys you gotta admit we’re making we’re making some pretty good progress here right? Okay the dots, the pipe, the bullets, whatever you want to call them. Timeline alpha icon. Let’s go ahead and make this action. Oh we don’t have an action on this site. We only have primary.
1:23:50
Okay, do I want the whole dot to be primary? Maybe I want the whole dot to be primary light. And then I want the pipe color which is timeline alpha CSS. Yeah I saw that earlier. Here’s our locally scoped variables for adjusting things like the timeline gap, the centerline color. So the centerline color can just be made base medium. That may be a little too light. Ah, I don’t know if I like the light circle in the circle. Let’s fix that real quick. So that would be this color right here. I don’t know if I like any of these. Can we have a different icon?
1:24:43
Calendar? Oh, that’s not going to work. What is even going on there? Okay, maybe it’s just, all right, fun, awesome, solid. I don’t even know what I want as my, how about a dot, a bullet? Oh, what’s this? Let’s try this. There, okay, now we’re talking.
1:25:07
Now we’re talking. Yep, yep, kind of liking it. Well that’s not what I just saw on the builder is it? What are you doing to me? What are you doing to me? Where’s it getting that? Oh, what’s going on here? I don’t know what is controlling what. Bricks is confusing the heck out of me. Okay, we got this little bullet and it’s, oh, I see. Hold on, I think I see. That we want, no, that we want to be base dark. And then the background color, I guess as primary would make it show through in the center.
1:25:46
Yes. But is there a border on there? I don’t know what’s going on, dude. Let’s go refresh this. Okay. Why am I seeing like some of the border around the red? That doesn’t make any sense whatsoever. There’s no padding. I don’t really know. What happens when I do this? Primary here.
1:26:53
Let’s change the size of it. Now that changes like the whole freaking thing. Okay, what other bullet options do we have? We’ll just do circle. Is there a down arrow? Would that look any good? Okay. But I don’t want, what are we doing with this background? Okay. I see. Because these are like see-through icons. It’s just hard to wrap my brain around some of this stuff.
1:27:21
I see, I see, because these are like see-through icons. It’s just hard to wrap my brain around some of this stuff. Down, down, down, down, down. I don’t think the down arrow looks good, honestly. Is this the life that you guys live as well? You’re just like, you just try stuff and you’re like, nope, looks like dog doo-doo. On to the next one. Oh, nope, looks like dog doo-doo. Next.
1:27:42
Next, why do I feel like there should be more circle options? We’ll just stick with this one for now. I guess I have to do the background color. Oh wait, border, border. Okay. Just making that a circle too. Let’s go to primary here. Just see how that, it’s going to be fine for, it’s not great. I don’t know what’s going on with that. Maybe it’s layout. Maybe the size, maybe we need to do a width and a height on this.
1:28:57
Here’s the icon. The wrapper is like the whole thing. All right, let’s do a width of five rim. Now, that’s clearly too big and a height of three rims so three rim by three round we’re like forcing it to be a circle and that’s like out oh wow I don’t like this icon element this bricks icon elements not great I put it in as the exact size. I can’t tell if it looks like a circle now. I think I fixed the overflow. I’m also just gonna go style layout. I don’t even know if this will matter.
1:29:47
Just hide overflow, save. All right. Does that look good? Does that dot, those dots look good with this color scheme? Y’all have to let me know. I think we’re pretty much like, as far as this lesson goes, I mean there’s probably more stuff I can tweak obviously, but I feel like as far as this lesson goes we’re pretty good. I think we need a top border, whoa why is this one blank? We need a top border on these too. root, root after, root before, root first child before.
1:30:55
I think that’ll work. Background color red. I just want to make sure we’re targeting properly. OK, that’s. Not targeting properly. Root first child. Oh wait, we can’t just do a background color red. Let’s take this off. So root first child. And child. One.
1:31:17
child one. I don’t know why that’s not working here. Root after border five pixel solid red. There it is. There it is. There it is. Okay. Well why wasn’t first child, first of type? Oh wait, hold on, I gotta get rid of that. First child, oh my God, it’s not first of child. First child, there we go, now it’s working. Okay, there’s just something wrong with the background color. All right, so that we’re targeting correctly. So now we’re gonna do a before pseudo element there, and we’re gonna use exactly this stuff right here. And we also need, you don’t even need display flex on there.
1:32:27
Now, it’s position absolute. So position absolute, and then this just needs to be top. Well, it would help if there wasn’t a random slash in there. Okay. I’m hitting space, it’s not doing it. Okay, save. All right, let’s look on the front end, see how that looks. Oh dear. Oh, what has happened? How did our…
1:33:10
Oh God. Oh dear. Oh, what has happened? It logged us out at some point. We got logged out. All right, first of all, let me copy this. Refresh the page. No, we just have to close this. It logged us out. I don’t know what happened.
1:33:31
All right, let’s go to pages. Change log beta. Pretty sure I was saving my work. Like we should be good. Yeah, we’re good. We good. Okay, let’s go back to the front end, but it did not get that last change in there. So let’s go to line item, style CSS, see, because I’m a pro, got it on the clipboard, save.
1:34:00
Now let’s look. There we go. No, we’re, okay, yeah, that’s right. Yep, yep, yep. Yep. Looks good. The first child needs an extra margin on the top. Because that absolute top border takes away some of the space that we had in our gap.
1:34:40
So what we need to do is one, figure out what our gap is. So that’s on this wrapper right here. It’s content gap. So we need a content gap plus Half of a content gap because we took up half a content gap with the divider So what we’re going to do here is on the first child. We’re going to give it a margin top of content gap plus content gap divided by two and That did not write a calc function for me, but it did most of the work.
1:35:15
So I’m going to do that, that, and that looks good. So if I take off this instruction, let’s watch the window. Yeah, see that gap that we lose? Now, I’m not convinced. It should do content gap divided by two first, that’s order of operations, and then add content gap to it. No, no, okay, I’m doing this wrong. We only need, we just need a margin top of content gap divided by two. That’s all we need. We don’t need the extra. Okay, content gap divided by two. Why is it not writing the calc function for me? God, I cannot wait for the next update. All right, that’s all we needed.
1:36:03
Now it’s not such a big, there you go. It’s just enough to account for the little extra divider that we put up there. Details, there we go. Where did my other dividers go? Oh, it broke, see? All right, now we’re good. Now I want to know why that’s blank on test 3. What did we do on test 3 to make this blank? Frames, all change log entries, test 3. There ain’t nothing there. Juliet, alpha bravo Juliet, why is there?
1:36:47
Okay, so there’s no additional, we need to hide this. That’s what we need to do, first of all. So if there’s no additional, don’t even show this line. Right? Can we even do that? Can we even do that? That’s the question. I don’t think we can do that. Maybe we can. Yeah, if there’s no title, yeah, if there’s no title, right? If there’s no title additional line item equals blank. No, no, no, it does not equal blank. Show this if it does not equal blank. Save. Refresh.
1:37:36
Fixed it, it’s gone. I don’t know guys. Now I need your feedback. Okay, I’m done for right now. I’m gonna, I’m gonna hang it up. When I let this, I let it stew, right? I come back and revisit it tomorrow with fresh eyes and I say, what is this? What is this dog doodoo that I just created? Or I say, Oh, that still looks pretty slick. And if I say it still looks pretty slick, then we what why did I get so small down there? What happened? Has that been you guys been watching that the entire time I little tiny head down there?
1:38:20
Technology is not my friend today. It is not going well in technology land. Okay, so anyway, as I was saying, tomorrow I’ll come back and revisit and say, is this dog doo doo or does this look okay? If I keep deciding it looks okay, we’ll keep it. I’ll make some additional changes most likely, but I want your feedback now. What do you guys think of the timeline? What do you guys think of this process? Notice we took a frame that was very simple, right? We used it as a starting point to save a tremendous amount of time. We didn’t have to do any of that fancy crap to make the actual timeline. And then we turned it into something very custom, right?
1:39:03
It was not designed for this intended use, but now we’re using it for an intended use. It works with pagination. You guys tell me, what do you guys think? Alright I’m out. Hope you enjoyed this. Hope you learned some stuff. Peace.