 Hey everyone, I just want to show you how I did a little bit of hacking into Blackboard and change some things here to make my set look a little bit different. So here is an example of that site where I added a sub menu, if I go to Subheader here and add these subheadings here. And then I'm able to style the style rules to have a really nice solid background for each of these sections. You know, give it a little bit of a nice feel to it. I also did this to these sections as well, as you can see. So I highlighted the entire row, and then these are on the home page only. If I go to the internal pages, then you see that I didn't want to apply here. You could if you want to, but I didn't do it because I don't want to overdo it. I just want to do the home page. So you know, if I go and turn off the edit mode to off, it looks a bit nicer, nice and clean. Similar to what a student would see. And so the thing is that this is the home delanding page. These menus here are, you know, have a global space or global scope. And so as you can see, if I go to the internal section, this has its own internal scope as well. And so when you apply the CSS to this Blackboard, I have to apply either to the global area or to each sub sections. Okay. It's a little bit weird, but that's how it's built, I guess. So I just want to apply it here and then here separately. And if you want to apply globally across the entire, you know, course, then you will attach it to the menu here. So it will apply across the board. And that may not mean we want it, but I'll give you an example how that works. So here's how I would do it. Okay. It takes a couple of steps. The first thing is I needed to target, you know, what these are and I found these out by using the, you know, the developer tool. And so my style sheet I use for Angular, I'll use this style E here. I just go A, B, C, D, E. So this is going to be used for just these main landing page here. Okay. I like these headings here. And I found out that these actually are targeted by the div is a div item class. And then there's a div item A link to the span tag. The span tag applies to this particular link right here. Just that tag, the div item is the entire row. Okay. So that's why it gives you this, you know, a entire row background here. If you just want to target, get important because I want to override the background to be consistent. So I mean, play with it if you want, whatever you want. I also added a, you know, a little bit of round radius here to my border. I think it kind of kind of neat. So anyway, so here's the first step. First, you have to upload a CSS to your course shell. You can do those in a couple of ways, right? You can go here and here in the edit, and you can attach, you know, the file here. Once you do that, you can delete it again, and then they should be uploaded to your course shell. Another way to do is if I go to the content collection, this is the course ID. This is my stuff. That's my ID. You also have the same stuff, right? Upload this course only. And then here I can create, I'm going to create a folder here, I'm going to call it CSS, just for me to use it. And then I navigate to the CSS folder, and I can upload file here. So upload. I'm going to choose my E, the E menu for the menu. And the global, I'm going to show you what that is. The global, they have the same thing. Global is like both of these combined together, and I'll show you what that means. So upload that. Okay. So here, and you can leave this open as this, or I could just basically duplicate this. So I have a copy here, and then, you know, copy here, I can access these directly. Now go to the home page over here. Okay. So I need to do this. Go to any one of these here is fine. Let's say that I'm going to go to the CSS, go in here, and I'm going to apply the link directly to this tag. So go to the code mode, and just apply a link tag. It doesn't let you do style. If it did, I would have done that, it probably solved, but they don't let you do it. But they do let me do the link, and the link will go to, you know, whatever that link gives me. So over here, and find the link that I want. So this is the one I want for the home page. And I just click this little arrow here, go to the edit settings. And this is the link that I want, the permanent URL here. So grab that, and copy that, and then put it right in here. Okay. I do the same thing. I make another one. I'll show you why. And the next one is going to be for that, the menu on the left. So this is the one I use, go here again, copy this URL. And paste it right in here. And then, okay, they look a little bit, you know, similar, different ID here. And just save it, and then just save it again. What I did was I want you to save it, as you can see, it applies all the way. It applies already to my style here, right? And that's what I want. Okay. It also applies over here as well, to the menu here. But again, once I go to, let's say, into the internal folder, let me go one little deeper here. Go to, you know, one, you see that it doesn't apply to the menu anymore, right? Because this had, those are just local scope. It doesn't apply here either, because they only work in the home page, okay? So that's what I did. So now I go here and then grab the links that was generated for me. You see that it's different from what I had before, okay? The previous link looks something like that, right? Kind of parse it, it attaches ID to a particular course, whatever it is. I'm not sure what this one are yet. But so this is the one I want to use. And you need to use this to make it work across the site, otherwise it'll give you a little bit quirky result. So this one stays here. This is the main menu, I mean the home page. And this link needs to go out to the menu. So I'm going to cut that out, and I'll leave this here. I'm going to show you also, you may or may not want to leave it here. I'll just do it because I'll show an example why. Then I go to the menu over here. You have to apply the CSS at the menu layer level. And the easiest way for me to do is add it to one of these tags. A link that would link out to external page, like the text support here, right? It goes to the GTC website. So I will just edit this menu, I know it looks weird, but I'll add it here and attach it to the end of this title here, the entire link. And then just add it here, it's now global to this page. So now if I go into the sub menus, like again, go down here, right? You see that it stays effect over here. These are no longer effected. And I didn't want to add it to this menu here, okay? So that's what I did, and if you go to the edit mode off, you'll see that now it's not working anymore on this main menu. And the reason why is because the item that I used to place the external sheet was not visible anymore, so it's not working. Okay, so which is why you can have to pick and choose where you want to put the CSS. And you want to put in a section that's always visible all the time, like this announcement link, or if you have the content that's always visible, you put it there. So I'm going to go in here and I don't need to put this all the time. So I'm going to grab this CSS and take it out, I don't need it here. And I'll change the color to white. So I'm going to add it to the announcement link and it's always visible. So I'm going to go here and then again, just attach it to the code, like that. And so now it's okay, it's working beautifully. The home page, my menu are now globally applied and if I turn on the edit mode, I usually use this, turn this off so my code, the site looks clean. When you lecture, if you're going to use the blackboard shell. All right, so that's how I was like little icon all over the place here. And so there you go. If we go again to the sub menus, as you can see, it doesn't apply here, right? The menu works here, that's fine. Now, if you want to use the global one, like this one over here, this is the global here. This one here has both the landing page stuff, all these items here, and then the menu as well. So this is the global one. So again, I'm going to go and show you how that will look like. So if I change this, go to edit settings. And I wonder if I just grab this ID here, it might work. If I just grab this part here, we'll see. Grab that and then go to the setting. Well, let me turn this edit back on. Go to the text support, rename the link and replace this last part here. It's kind of hard to see this ID right here. Replace this with that new ID and see what happens. So it tends to, since we're working here, home page works fine. If I go into the internal links, okay. Yeah, as you can see, it applies everywhere else, right? Because I put that in the global space. So every item we add here will be affected, which I don't want because that's too many, it's overdoing it. And I can keep going down here and it will also apply to every one of these areas down here as well. If you like that, then, you know, that's the way to go. I didn't want to use this, so it could be nice. If you just want highlight this part here again, add that to your style sheet. So that's this. This is how I applied the global to the global space. If you just want a home page, then just add it here to one of these links here. Okay. Oh, I hope this is helpful. And I know I wish there's another way to do this manually, but just figure that, you know, tweak it a little bit, make it a little bit nice for me as well for students. Okay. Alrighty. Have any questions? Let me know. Bye now.