 tilted up a bit. Is that coming through okay, everyone? All right, how's everyone doing today? I expected like five people here, so that was about the reply I expected, but since we got a bunch, you know, hopefully get a little better day going for you guys. I work remotely all the time. I always have a computer screen in front of me between folks, so you can never get my attention, wave your arms, throw something at me, do it. I never get this opportunity, so let me know if any questions come up or we're chatting and we'll dive right in. My name is Todd Matthews, Director of Implementations at Ethink Education. I work with our clients from the second they work through the sales process all the way until the site itself is live. One of the big things that comes up for me on a day-to-day basis is customizing mobile themes and just making the look and feel of Moodle work for these clients on an individual basis. So what we'll go into today a little bit is some Moodle themes of the past and see where we've gone from 1.9 to 2.0 to 2.x to 3.1 all the way through the spectrum here. Some of you that remember even before 1.9 will be, I'm sure, cringing at some of these slides. Unfortunately, this website here is not a Moodle theme, but I am just very nostalgic for the days of GeoCities and this is where we've started at. I've still got my HTML and CSS files hidden away somewhere very, very wanting to put this up somewhere and get this out there, like a Moodle site out of it. But with Moodle 1.9, we saw a very block-centric build. Everything was over on the left and the right. Everything kind of took away from that center real estate screen where we wanted the students to focus. The blocks were really supposed to be a helper to that course content and so we saw that a lot of the attention was being taken away from that center column. It was a little bit tougher to incorporate some custom designs that you wanted to get in there and it wasn't very responsive. It wasn't built off the new bootstrap standards. What we saw is, back in 2009, that worked out very well. Everyone was on the mobile, or no one was on the mobile device, rather. In a 10-year span, we've already overtaken on mobile in the last year. I believe this is up to about 60% now. We hadn't changed the way the themes were working. With that came the advent of Moodle 2.0 through 3.0. The clean and more themes really started adding a lot of functionality to the Moodle site itself. Fully responsive design, built off of bootstrap 3. Incredibly nice themes. I actually really kind of miss these. I'm still very 2.0-centric and love having my site admin column, but started regaining some of the center columns, some of the real estate back in that middle section there, as well as still allowing for that focus on the left-hand side. As you see, though, sites leave a little bit to be desired. They're a little bland. You could get some great customizations in place, but it really took a lot of work. A few things we did to kind of get around some of the more design and the clean design was incorporate some of the third-party themes that are out there. We used Lambda through the theme forest crew. Really a great theme had been very responsive to get back to us, as well as Fortson. A big shout-out to Chris Kenneberg, a great Moodle community provider. You see him in the area shaking her head. Really a great, great person to work with. The big downside though is you are working with a third-party theme. You're not able to get the core customizations updated. You're not able to get those bug fixes, and you're kind of left on your own. A few quick examples here. I did want to show off how Lambda looks in there. Amy from EDSI is actually here today. Not sure where. Back around the corner. But it really offered some new design functionality that we didn't see in more and clean. Offering up the slideshow functionality, the carousel functionality, to help point the students where they needed to go from the second they get into the site. Same thing we saw with Fortson as we jump ahead a little bit here. As it is a boost child theme, and we'll be getting into boost a little bit further, but just offers a little bit more breakdown, a little more granular setup on the front page itself. And we found some really nice work with that. Again, Chris has done great work with that theme, and we really loved it. But we still point all our clients to the Moodle Boost theme. It is the standard. It is constantly updated by the team. It allows for that more screen real estate built on Bootstrap 4 standards, and really just a nice theme all the way around. The biggest thing here, and something I'm going to harp on quite a bit, as we're with the community today, is that helping the community is really amazing. There are, if anyone is a Rest of Development fan, there are dozens of us out there that are big CSS fans and really dig into this quite a bit. So we'll look a little bit further to see what the community has actually contributed back here. With the boost customizations, though, what we see is that even though it is much easier to get these in on the front end and work with some of the preset CSS packages, is that you still need to have a pretty good understanding of CSS and HTML to be able to really get your site looking and feeling how you'd like it. So we see that we can start incorporating some nice background designs, bringing in the RGBA so we can have some transparency on our left-hand column, and even really making the site look completely different through the footer. As you can see, I don't know if there's any CSS nerds out there like myself, but this is just a small step of what we do on every single site we work with. Working with the additional HTML, the footer information as well as the CSS itself, all directly through the front end, allowing for a quick turnaround and working with the clients back and forth. As we can see, boost can be anything. It really looks incredible. This is even mimicking a little bit on the force inside, built up a slider within the boost theme itself, and we're able to help incorporate some of those background images as we see in the third-party designs. And as I said, the boost preset CSS is incredible. One click of a button and you're able to change up the entire theme based on what the community has provided out there. I don't know if I'm able to escape out of the slide or not, but I'll have some examples show you guys here after, make sure we can get through this. And from there, just wanted to give a few CSS tips and tricks. We're going to jump in and do a little bit of a live demo here, show you guys a few things, how that kind of works, but wanted just to go over the basics that I tried to drill into all our clients and all our employees. First being percentages, not pixels. We are working with responsive designs. We want to make sure that it's not going to, you know, have the image three feet wide on a mobile device where everyone's scrolling over and trying to view the logo just to find out if you have ink at the end of your name. So percentages are very important to help maintain that responsive design. Cut twice, measure once. That's a little bit backwards and a little counter intuitive. But what's that to say is to actually use the front end web developer tools to be able to get in there, make some changes on the fly without actually affecting anything on your live site, get that in place, make sure it's set, and then bring in those those design elements. I will say W three schools is going to be your best friend. I still use that on a day to day basis. I'll still end up Googling something wait, what was the CSS rule? And it really is a huge huge boon to those people that are new to SCSS, CSS, HTML, anything like that. And again, use the community. We got a great group here. A lot of people love contributing back and being able to help each other. So if you have questions that are coming up, post them on the forums, while Mary jumping in everyone right away and a very, very great community here, utilize it as best you can. And so we'll go ahead and actually, since I don't have my computer, we'll go ahead and look at some of the theme building tools first and then take a jump back into the CSS itself. More often than not, as I said, measure, measure twice, cut once or measure, cut twice, measure once. We work with the inspect element tool built into every web browser out there and really gives you the functionality to make those changes without seeing a quick, you know, take down of your site across the board. In addition, I use things like the color pick eyedropper to make sure I'm matching up those colors perfectly. My vision is not the best. I'll be the first to admit it. And using multiple monitors will really throw you off. So by making sure that you're working exactly with that hex code that you need, you're able to grab that directly from a current website. And the last but not least is the 3D page tilter here. This is something I love. I don't know if anybody remembers the, there was a 2, I believe 2, 2, 2, 3 bug where the grades emission button would sometimes disappear off the site. And so this became a great tool where you could pop the screen out into three dimensional, be able to look at that turn, manipulate the page itself and see where that hidden div was at, being able to then make those changes and get the updates so it's visible again. And a few just fun sites that I use on a day to day basis will show you here as well. Hexed RGB tools for those that don't like the hex codes. Looking at complimentary color schemes, making sure that you're having a nice flowing site, looking at actually some CSS animations that could be included in there, talking about the Favicon creation for those of you that don't have a Favicon created. And last but not least, the accessibility validator, a very cool tool that allows you to essentially make sure your site is looking great across the board for all users, making sure it's 508 compliant. So with that, bring this over here. I want to make sure I'm still coming through, maybe not. All right. So I did kind of build out some of our clients here and just showing a progression of how this comes across from that more theme, you know, a little less snazzy into that lambda theme, offering up some of the functionality that we saw with the slider images, working into force in itself, where we start bringing some of those bigger background images and really helping brand that page and top to bottom. In addition, Boost itself offers up some great functionality, as I said, we see these sites across here. Perhaps one of my favorites actually worked with the client specifically on this to get these in place. Very cool design they came up with it and really helps make that footer pop out for you a little bit. And last but not least, a very basic, basic Boost theme. So this is where we generally start and work our way back towards something like rehab essentials is here to see. As I said, there are dozens of us that will go ahead and actually contribute some of the stuff back here. So we have some pre CSS packages. As I said, can be added instantly to your website, making the Moodle theme look and feel great. As I said, as well, W three schools is going to be your go to for any questions you might have. This is bookmark top my page. I don't even bookmark anymore. Just type W and it comes up. It beats out all WWWs. But as I said, the hex to RGB is going to be a great friend for you. Say you're working with, you know, you know, this is your hex code here. Hey, coming across the RGB. Let's go ahead and see how that would look possible or possibly with a complimentary code here. We bring it into our color hexa. It starts building out some complimentary color scales for us. Obviously, as we have picked a very boring color, you can tell I'm not a not the most creative. But that's why we have our random web page. Sorry, closes down. Close down. Oh, it disappeared on me. Hey, we're back. So now I get my creativity back. I'm able to see them grab some of these codes. Yeah, like that one. I know what's going on this computer. Not a real big fan. But with that, then we can take those hex codes back, put in something a little more vibrant here. And this will give us a little bit more of a breakdown here. Copy that, right? Nope, I did not. Well, at that, I know we're short on time. So you guys get the idea there does build out that great complimentary color set for you, as well as working with things like enemies to some really cool designs in here that are all free for you're able to help bring these into your site automatically, give you that code information right here and you can help get this included in very, very easily. Things like the FabiCon generator being able to draw your own FabiCon online or upload any file to help shrink that down and make sure it's going to show up here at the top of the page like this a for animista. And most importantly, as I said, the ability to check for those online 508 compliance standards. We'll see here that some of the, you know, the older theme with more here really did have less things to worry about as it was more web 2.0 facing. We see in web 3.0 with the new themes that there are a lot more things that it needs to check into. And this will give you a full breakdown, letting you know exactly what is wrong or what is correct with your site. So this is an awesome thing to use as kind of a final step, use it throughout the iteration process, but always run it back through at the end just to make sure everything is looking good for all users. And with that, I think I've taken up enough everyone's time today. I know we're running behind, so I will close it there. If there are any questions, by all means, I'll be around. We've got the nice stripes on, easy to spot. So just give me a shout and love to chat. Thanks, guys.