Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have Moodle up and running on our machines, I'd like to show you one of the new features in Moodle 2.1 right away--and that's the ability to not only select themes, which has been around for a while, but the ability to customize those themes right from inside of the Moodle user interface. This is generally an administrative function that many teachers would not be doing; however, since you're going to be administering the local install of Moodle at least on your test server, I will go ahead and show you how to do this, so that you are familiar with the process.
To begin though, what I would like you to do is go ahead and minimize your browser out of the way. And if you're following along with the exercise files, I've included a file here called logo.png, and it's just a simple logo. It says YONDO UNIVERSITY for students. It's a PNG file. If you don't have the files, you can go ahead and create one yourself. It's about 300 pixels wide by 80 pixels tall. Go ahead and close that. And now what we need to do is we need to copy this PNG file into the root directory of our web server.
So if you're following along on the Mac, you want to go to your Applications folder/XAMPP/htdocs and simply drag the logo.png into that folder, and if you hold down the Option key, it'll make a copy of the file in there. Go ahead and enter your password. Now if you are following along on Windows, simply go into the exercise files and go into the Chapter01 folder and go ahead and right-click on the logo file and simply hit Copy. I'm going to go ahead and close that window and come on down here on our desktop and double-click the Moodle folder where we have our Moodle installation at.
I am going to go ahead and go into the server folder, and then the folder that we are looking for is this one right here, the one that says Moodle. Just go ahead and double-click in there. And then just to make sure we don't drop it into one of these subfolders, we are going to come down here where the rest of the files are, right-click, and hit Paste. And there is, the logo file, and it is all set up for you for being able to follow along with the training. Let's go into the Theme section. So we are going to scroll down in the left-hand side, and we are going to click on Site administration.
This is the section where all of the administration functions for Moodle take place. So we will scroll down a little bit further, and we are going to go into Appearance, and we are going to go into Themes. The very first item here, Theme settings, go ahead and click on that guy right there. This brings up the Theme Settings window, and the second item right here, Theme designer mode, if we go ahead and check this box, then what they'll do is it will make it so that as we are going through making these changes, Moodle will automatically refresh and rebuild the theme that's being displayed on screen, so we can see it again.
So go ahead and now scroll all the way down to the very bottom and click the Save changes button. If we scroll down a little bit again, we can go over to our Themes section and we can go to our Theme selector. Now we saw this during the set up, and we have the default theme set up, and we are using the Formal White theme, but I wanted to very quickly look at a couple of other themes, just to see some of the flexibility that's available inside of Moodle. So go ahead and hit Select theme. Now we are just going to look at a couple of them.
We are going to end up going back to the Formal White, but for now go ahead and let's look at this first one, Afterburner. Go and hit Use theme, and you will notice Moodle instantly resets and looks completely different now. We have got different colors set up. We've got a nice gradient set up here in our breadcrumbs bar. We've got a logo that's added up here in a different color. Scroll on down, hit Continue. We are going to scroll down again. We are going to go back to that page. So we are going to go back to Appearance, go back to Themes, go back to Theme selector.
We are going to select the default theme again. Let's scroll on down, and this time what I would like to do is I would like to look at the Arialist theme. We are going to go and hit Use theme for Arialist. And now when that one loads up you will notice the page looks quite different. Again, there's no left-hand column now; there's only a right-hand column. Go and hit Continue here. The nice part about this theme, if we hit Home, is that your focus is now over on all of your content, rather than having your focus set up on all of the little sidebars.
Most of the themes are able to do this; this one just happens to be one that's set up by default. You will notice this one, the spacing is set up a little bit nicer on some of the text as well. So let's scroll down again, and this time kind of come all the way down to Site administration, scroll down to Appearance > Themes, and we are going to go to the Theme selector. Hit the Select theme, and let's come on back down to Formal White.
Feel free to go in and click on any of these other themes if you'd like to have a look at them. You now see how to get in and change the themes, but we are going to go back to the Formal White. Now I would like to show you a couple of things that you can do to really customize this theme now. So we are going to go ahead and hit Continue. We are going to again go back to Appearance on the left, go back to Themes, and this time when we scroll down, under the Themes menu, once we get below the Theme selector, you'll see some of the names of some of the themes that were in that list, and Formal White happens to be one of them.
Go ahead and click on Formal White, and here is a configuration page now where we can go in and we can configure some of the different parameters. We can set the default font size. We can set it for the old formal 1.9 look. We are going to leave that off for right now. The page header content and that is this section up here, right now it's set to display the Moodle logo. That's exactly what we want. You could have it just have some page header information, but we are going to go ahead and leave it set to the logo, and now we can add our own custom logo, and that PNG file that we added earlier is the logo that we are going to have displayed here.
So we can simply type in a URL, http://, and we are just going to typing localhost/logo.png. Let's test and see how this looks. We will just scroll all the way down to the bottom. Don't worry, we will come back to a lot of these changes. I just want to see that this is working. Hit the Save changes button, and there we go. We have our YONDO UNIVERSITY for students logo. It's showing up right here in the top. We can clean up this look a little bit. It's a little hard to read with this light beige kind of background here, and the actual colors for our university is more of a chocolate-brown color.
So we will go ahead and scroll down to this first section where it says Header background color, and here we can either just move our mouse around in the color palette and we can select a color to have it show up in the top, or we can just simply come in here and select the web-safe color number, and we will just type it in. So in our case it is #663300. You can go and hit the Preview button and scroll up at the top and there we go, YONDO UNIVERSITY for students, and there is our actual university's colors. Great! Scroll on down a little bit more.
The next one to adjust is the Block content background color, and that's the color right over here. And by default it's a little bit darker gray than I would like, so I am going to go ahead and select that, and again, we are going to type in #, and this one is going to be set to F9F9F9. Now the default for this is F6F6F6, so this is a very slight change that may not even be noticeable on all systems, but it makes just a little bit of a change, very subtle. We are going to go ahead and leave the left column background color as it is for the default.
I think that looks fine for us for now. And we will scroll on down a little bit further until we find the Footnote. Now in the Footnote, you can put a little station message that's going to show up at the bottom. If you have a tagline for university or if you want to insert an image, you can do that in here, but for right now I'm just going to go ahead and type our institution's tagline, which is "A Culture of Learning." In the bottom you have one more option here, Custom CSS. Now this is incredibly powerful, because within this section you can actually customize anything within the CSS theme that you want, if you have somebody at your university who is very versed in CSS, and most of us do have those types of people around us, fortunately.
So all we need to do is go ahead and type this in, and there is a text file in the Chapter01 exercise files, if you don't want to type this, but it is ".navbar li span " and put a open curly quotes and then hit a line return and then type in color: #996633;, hit Return one time, and close the curly quotes.
That's all we are going to do is just one CSS statement, and what this is going to do--we are going to go ahead and scroll up, so we can see what's going to happen-- is right here in this navbar, you can see that there are a couple of items that as I move my mouse over, they are not actually links--the links are these white links--but this text here becomes really difficult to read within this beige bar. So when we go ahead and scroll all the way down to the bottom and we hit Save changes, that one little line of CSS code is going to target these links right here, and it's going to just highlight them just a little bit to make it a little bit easier for us to read. So there you go.
That's all we are going to do as far as customizing this theme. You can go and hit the Home button, and it will take you back to the homepage for this theme, and in the next movie we will go ahead and start setting up the user accounts that we are going to use during the rest of this training series.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 74456 Viewers
80 Video lessons · 129690 Viewers
52 Video lessons · 63925 Viewers
59 Video lessons · 49717 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.