 Welcome back to Octa developer channel. I'm your host Heather Downing, and I have a very special guest with me today. A lot of developers are talking to us about how much is on their plate. How not only do they have to be the security person and the code person, but they also have to be the designer and the UX person. So in that way, they want to know, can we change the way that the Octa developer login looks for their end users? And the answer is absolutely. So to help along the way, since I myself am not a CSS wizard, I decided to reach out for some help internationally. I'd like to introduce you to Amy Kaepernick. She's here with us today all the way from Perth, Australia, and is kind of known as the Queen of CSS and Design and UX in general. Please give her a welcome. Hey, thanks for having me. You probably have some opinions about how you can personalize it. Yes. The thing with login screens is you don't need to make it too complicated. There's so many little things that you can change and update and goes a long way to feel in line with the rest of the website. Right. And so for everybody who's watching us just so that they kind of can follow along and know what those opinions might be. I'd love to kind of share what I would look at and where I kind of stopped and decided I really need Amy's help on this. Let me go ahead and share my screen real quick. Hopefully you've created a new account. I know that you and I did that the other day, Amy, and logged in from there. So in my case, I've got one called Coraline.octa.com. This is a custom URL with Octa, which is required in order for us to change things like the logo and make any other customization steps. But as you can see, it still looks like what I'd call the generic Octa login. So when I sign in here, because I'm an admin, it'll sign me in, end up me right here on dashboard. But that login screen is the same login screen that basically all of my users would see at the moment. So I know that I can go to customization and go to sign in page. You can change the names of each of the links here. I need the custom text you've got there. And of course, if you go to appearance, this is where I switched the sign in background image, right? And of course the logo, which is a little tiny. So since this is kind of as far as my design chops go, I'm going to share my screen and ask you, what do we do from here? This is where we can start to edit some of the existing CSS and to provide some of our own styles. And this is where the live widget is really great. I hadn't, before you introduced it, I hadn't realized this was something Octa had. Live editor, it's where you can write your own styles and see what it is that they look like before you actually go and implement them on the sign in screen. So that's really cool. So really exciting to get to use SAS in the live widget editor. Here you'll notice I go to developer.octa.com forward slash live-widget. And this is what Amy was talking about when she talked about using SAS. This is of course the built-in styling there, but it's not necessary to keep it. So this is a little bit boring. I think I'd rather have a more fun when Amy has a great picture that's drawn by one of our very own developer evangelists. David Neal. And I guess if it's all right with you, I'd like to use this as the logo. Looks like you're on there, but you're a little small. That's the first thing I noticed. Can we fix that? Definitely. So, so if we go back to the SAS tab, and as you've said, this is the default styles, but we don't need to use these. So we can go through and just delete all the stuff that's already in there. Yeah. So that's gotten rid of a few of the existing styles already. So to start off, we, we're wanting to make the image a little bit better. This is where it's kind of useful to use the dev tools to, to actually have a look at what styles are currently still on there. Even though we've deleted the SAS styles, there'll still be a few things in there that we need to have a look at. However, you would normally get to developer tools. You can go from the menu. I usually right click and inspect and that will take me straight to it. So you can expand out that element and we can see the image. And if you click on the image, you'll be able to see they've already got some styles, which is set maximum width and maximum width. And a maximum height. So based on what I can see, I'd say it's hitting the maximum height at the moment. So it says it can't be bigger than 40 pixels. So that's where we're getting, that's where we're getting issues. What we need to do now is override that maximum height and let it know they can actually be taller than that. So if you go to the SAS and write idea widget container, one of the great things about SAS is nesting. Inside of that, we can write the octa sign in ID. Before you put the curly braces in, cut the orth or logo class away and put curly braces in. And you can put the orth or logo class inside of that. Okay. So just for us that never touch the front end and have to now. So what do we do here? Here we want to override the maximum height for our image. So if you set it to maybe max height 100 pixels. Definitely a change right away. There we go. So that's a good one. Well, I wouldn't really know what this particular input is for. Yeah. I wish I could see or at least assign some sort of sort of shadowy text to it so people wouldn't know. And so if we right click and inspect that as well. Yes, that is a text input. And we can see it does actually have a placeholder there on the HTML element. You can see a placeholder of username. That's just not appearing. So what we probably just need to do is apply some styles to it. Probably just have to set the color on that one. So one of the great things about SAS is the variables. If you move widget container down a couple of lines, you use divine a SAS variable with dollar sign, then writing the variable names. So say primary for a primary color, semi colon. Similar to defining CSS variables, you would then just put a value there. For example, you can just say red and that'll make it red. We'll probably go with primary secondary highlight and neutral colors. Just for now so that we can sort of change it out. We're giving HTML color names. We'll probably replace these out with some hex codes is usually my default. So inside of the octa sign in brackets, type in an input selector. So just input and then inside of those curly braces. If we use ampersand and then two semi colons and placeholder and then put curly brackets after it. This is the CSS selector for an input placeholder. So for this, we can just change the color. So if you change the color to one of our variables that we've made, maybe highlight. Oh, that's awesome. It already changed. Nice. Excellent. Cool. So I can definitely see that better, but I really hate the button for sure. I definitely want to change the way the button looks below our input element, but still within side of the sign in curly braces. Just below where we've written the input styles. So with a form, you can use a button, but you can also use an input with the type of submit. So if you add a full stop to the, the front of button, you say full stop, you mean a period. It's a full stop where I come from. Yeah, we can, we can try changing the background color to background. And we might set that to primary. Oh, there we go. That's very bright. It is. Yeah, we might switch the colors over there now. So with something a little bit, a little bit nicer to look at. I've just sent through the, the hex codes for the color scheme that we worked out. Oh, nice. Where did you get these colors from Amy? This particular time I used a site called colors.lo. And I think this one's really fun because it's overly descriptive color palette. These are fantastic names. Yes. This is fabulous. It's good to know for anybody who's not really good with pairing colors. I'm usually more drawn to the blues, but I tried to use something different for this. So, and we've also got a neutral color, which is a shade of almost charcoal gray. Nice. Okay. So we definitely, the background looks great. I can't really read the text though. No. So, so that font color doesn't look great with that there. So if we change the color to white. Oh, perfect. There we go. Much better. But nothing happens when I hover over it still. So this is where we, we can add a hover style. So again, we can use ampersand and semi colon hover. So just one semi colon for this. So here is, we can, we can define a hover selector. So, so this is the styles that would appear when we hover over the button with a mouse. This is really important to have something to, to let users know that you can do something with the button. Right. I agree. So a nice simple thing to do here is usually to change the background. So if you change background to white and change color to primary. Ah, nice. I love that it just loads it and everything just works. Yeah. That's really cool. So I do want to, I do think that the border could be a little bit bigger though. On the main where we've set the background to primary, just under that, if we set the border, three pixels is probably good for that one. The value of three pixels, space solid, space primary. So three pixels is the width of the border. Solid is the type of border. So it's very, you know, dashed, double lines, dotted, very different types of borders. I typically only use solid and then the color is primary. All right. Well, this, I don't really like what sign-in is. It's kind of not even in our color palette for the begin with, but it seems a little small and I don't really like the font. Yeah. That's not great. So probably the first thing we can do is we can, we can try and change the font that we're using here. Google fonts. All right. Let's go. So Google fonts are really great because they're, they're freely used and there's a heap of options is what there's 989 fonts on there. So if you go through and find a font that you like the look of. Man, actually, I kind of think that one looks nice. A little bit more rounded than what we had there. Yeah. Cool. I'm not sure. Do I need all of these? No, probably regular and bold. Cool. Yeah. Now what? If you use the embed tab, either links to include in the CSS or if you click on import, that'll actually give you the import to import them into your styles. We just need the import URL there. I'd probably put it right at the top of the file. If you quickly go back to Google fonts as well, it's actually given a CSS rule. So we can copy that. Just below where we define the neutral color. If you put that in there and just replace font family, we just make that a font variable. So that way we can use it throughout. So what we might do first is let's just try changing the font on the whole widget itself, just above or logo. If you add a new line in there, we'll set the font family to our font variable. Well, there's definitely a difference there. It's a little sin for a header, right? Yes. Just below where we've set font family, we can reference the h2 element. We'll change the color to probably highlight color would work well. Oh, yeah. Now it matches your hair. I like that. So what we'll probably do is that the font weight to bold and up the font size a little bit. Try 30 pixels. This definitely looks keeps better already. But if I were to turn this over to you and you were to finish this design, what else would you add or change? Probably go through and change the sign up link at the bottom because that's not using our brand colors. The actual link itself, that's blue. We inspect that and just have a look. So we should just be able to change the color on registration link. Overwriting existing styles is one of the things that makes CSS more complicated. It's completely different when you're writing this from scratch, but it can be a little bit tricky and you may not get to write CSS, the type of CSS that you normally would when you're having to override stuff. Okay, because this is of course hosted by Octa. This is literally you painting a house that's already been painted. Yes. So I guess I would put it just right below my button, right? Yeah, so here we'll just change the color to highlight. So what we can probably also do as well, we change the border on the input to match the text that's inside of it. That'll be nice. So we'll just grab input fix for now right before the curly braces put comma and space. And let's grab the text area fix class from there as well. So it looks like what they've done is they've got fixes for both text inputs and text areas. So that should just change the text color, which we've already managed to do. So if you change border hyping color, there we go. Instead of using the highlight color, let's change it to use the secondary color because it's a little bit more subtle. That one might work better. Yeah, cool. Oh, it's a bit more subtle there. Well, this looks so much more personalized. I really like it. What is the last thing you would do for your magic? They've created a custom chat box, but it's using a picture for when the checkbox has been checked. So it's kind of hard to edit what we want that to look like. It's not too complicated. So if you want, we can write it out or I can give you the styles and then we can go through and explain it. Why don't you give them to me because the likelihood of me typing it incorrectly is very high. Okay. Oh, look, the whole type of checkmark has changed. That's awesome. This is a method I use for creating custom checkboxes. You can use a similar method for creating custom radio buttons as well. That's really easy, just using the HTML that's already there and then some CSS. What I've done, they've got a custom checkbox class, which I've referenced. We're also grabbing the input with a type of checkbox. We're sending them to display none. So we're hiding the checkbox inputs. The ones that Octa put there? Yes. The ones that Octa put there? Ooh, would that mean that it would just stop working then? No. Because what they've actually done with this is the inputs and the labels have been linked together so that if you click on the label, it still checks the checkbox input. Oh, I see that. So I can check directly here or I can check anywhere in the O across, remember me? Yeah. So that's a really good practice to do for accessibility. So it's done by using the for attribute on the HTML label to link it in with the input. So to make sure that I get this right, you took an image, almost like a clickable image, that was put in place by default in the Octa login screen. I hid it and then created a whole new element with before and after styling. That seems like it's complicated, but for all of that, doesn't seem like the code is too long. Yeah. Look, it seems a little bit complicated. So this is now by default in pretty much all of my projects. This is how I set up checkboxes. I can pretty much do the same for radio buttons as well. Instead of I don't add a tick as the content and I make them circles instead of squares. Yeah. So now it actually kind of matches the whole rest of the theme. I really like that. Yeah. So that's a really good hack that I often use for making my checkboxes and radio buttons fit within the rest of the styling. Yeah. This is awesome. It definitely looks more personal, especially if this was for a major automobile manufacturer or whatever company it might be. It looks so cool. So different. I think very rarely the developers actually touch this and get to play around with it, but it definitely has a much better impact. Yeah. And so as you've seen, this is once you work at the CSS side of things, this is super easy to switch around and change, which is really cool. And the advantage of using the variables we've set up as well in those colors are really easy to switch around to. So SAS does definitely make it much easier to work with. It's gotten so much better. And there's so many really awesome things that you can do with it now, particularly CSS animations and cool stuff. Okay. So I've seen that you've sent me over a snippet of CSS code in the chat window. So what is this for? And where do I put it? The first snippet can go right at the top where we've set our variables. And so this is using keyframes, which gives us ability to really easily define an animation that we're doing in CSS. We're just going to change the background position. It starts at a bottom left and finishes at the top right. And so now this second snippet of code you sent me, we put it where? So if we replace everything inside of the curly brackets there, yep, replace that with the snippet I sent through. Here we can create a bit of an animation for when someone hovers over it. We've got media prefers reduced motion reduce. So what that's doing is it's using a media query, which we often use to detect various screen sizes. What that's checking for is a property that someone can set in their browser, which is prefers reduced motion. If people get dizzy or people with epilepsy, they can actually tell their browser that they want to prefer reduced motion. We can make sure not to give them those styles. What we can actually do if they haven't set that, which is the styles just above it, is we've got a CSS animation. And for that, we're referencing the keyframe that we put at the top. It should take two seconds to be linear. So should go evenly the whole time and should then reverse. And we want it to keep going. So we don't want it to just go once. We're setting a background to have a gradient with our highlight, primary and secondary colors. Okay. I want the background to be 200%. So that means it's twice as big as the button is. Because that gives us a bit of overlay. There's sort of a bit of room for the background to move. Start at bottom left. But if you remember our keyframe, we set it to start at bottom left, but move up to top right. So if you hover over the button, we can actually have a look at means it's doing. That's cool. Oh, and it repeats if I just sit there with it. Yeah, and it's using all of our theme colors. Yes, it is. I had no idea you could do such magic with this. That's pretty cool. So there's a lot of things that people don't realize you can do with CSS. I like that there's nested specificity. So you can tell that you're inside of a box or inside of an element, inside of an element, instead of just referencing the longest of those, it seems like I had to do just like if I were to inspect inside of my browser and developer tools and I would take the whole long thing that was there. And then for each specific one, it seems like it's easy to make a mess. And I definitely wanted this to be a much more straightforward approach. You can already see like some of our selectors it would have taken forever to have to write them out. It's so useful to be able to nest them in there. Absolutely. So everything that we did here, we could save and then reference the location of that CSS file anywhere here in the head. Yeah, the one thing you will have to do first because it is written in SAS, so the browser can't actually use that. There's a heap of different tools that you could use for that one. SAS Compile to CSS is what we're trying to do. SAS Compiler should be fine because that'll compile to CSS anyway. So if you copy in our SAS code, that will compile that all out into CSS. Make sure you actually compile out the SAS because the browser won't have a clue what to do with that. Thank you so much, Amy, for walking us through the whole process of how you would play around with the CSS styling on our OctaLogin widget. A little bit how to think about getting to the core of a problem we might have with some of that CSS as we go about that design process. Thank you for joining us and being awesome. No worries. Thanks for having me. It's always exciting to get to work on some CSS, which is kind of my specialty. It's nice to get to do this. Absolutely. Well, I hope you guys enjoyed us and stay curious. Happy coding.