Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a custom theme

From: Moodle 2.1 Essential Training for Teachers

Video: Creating a custom theme

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.

Creating a custom theme

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.

Show transcript

This video is part of

Image for Moodle 2.1 Essential Training for Teachers
Moodle 2.1 Essential Training for Teachers

125 video lessons · 12046 viewers

Chris Mattia
Author

 
Expand all | Collapse all
  1. 3m 26s
    1. Welcome
      1m 14s
    2. Course overview
      1m 34s
    3. Using the exercise files
      38s
  2. 1h 10m
    1. What you need to get started
      4m 27s
    2. Installing Moodle on a Mac
      9m 23s
    3. Configuring Moodle for the Mac
      5m 29s
    4. Installing Moodle on a Windows computer
      11m 35s
    5. Configuring Moodle for Windows
      7m 21s
    6. Creating a custom theme
      10m 0s
    7. Creating user accounts
      6m 4s
    8. Creating a new course
      6m 35s
    9. Just enough site administration
      9m 51s
  3. 1h 20m
    1. Logging in and getting oriented
      4m 23s
    2. Managing private files
      3m 41s
    3. Customizing your profile
      8m 26s
    4. Customizing course settings
      10m 14s
    5. Editing the header block
      5m 18s
    6. Posting a course syllabus
      3m 43s
    7. Communicating news to students
      4m 4s
    8. Managing files and folders
      6m 14s
    9. Posting lecture slides
      4m 37s
    10. Organizing course content
      12m 31s
    11. Setting up the Gradebook
      5m 4s
    12. Creating a simple assignment
      9m 45s
    13. Messaging students
      2m 49s
  4. 26m 45s
    1. HTML Editor overview
      5m 9s
    2. Formatting text
      5m 10s
    3. Creating internal links
      3m 14s
    4. Creating external links
      2m 42s
    5. Inserting local pictures with HTML
      4m 26s
    6. Creating equations
      6m 4s
  5. 47m 28s
    1. Preparing images
      5m 19s
    2. Posting image files
      3m 18s
    3. Posting a photo gallery
      3m 23s
    4. Creating header graphics in Fireworks
      7m 58s
    5. Preparing audio
      9m 41s
    6. Posting audio files
      4m 49s
    7. Preparing video
      7m 21s
    8. Posting QuickTime video as .mov files
      2m 43s
    9. Posting Flash video as .flv files
      2m 56s
  6. 36m 9s
    1. Understanding repositories
      3m 5s
    2. Configuring a Dropbox repository
      6m 13s
    3. Using a Dropbox repository
      4m 43s
    4. Configuring a Google Docs repository
      1m 15s
    5. Using a Google Docs repository
      5m 20s
    6. Configuring a Flickr repository
      6m 13s
    7. Using a Flickr repository
      4m 5s
    8. Configuring the YouTube videos repository
      1m 7s
    9. Using the YouTube videos repository
      4m 8s
  7. 38m 50s
    1. Understanding resources and activities
      1m 9s
    2. Posting a file or document
      8m 36s
    3. Displaying a folder of documents
      4m 33s
    4. Using a label to bring your course to life
      6m 42s
    5. Creating a custom web page
      10m 33s
    6. Posting a URL for a web resource
      7m 17s
  8. 25m 51s
    1. Assignments overview
      1m 43s
    2. Advanced uploading of files assignment
      11m 32s
    3. Online text assignment
      4m 20s
    4. Uploading a single file assignment
      3m 42s
    5. Offline activity assignment
      3m 21s
    6. Assignment and Gradebook interactions
      1m 13s
  9. 35m 34s
    1. Creating a live chat room
      4m 57s
    2. Understanding Choice, Feedback, and Survey activities
      1m 23s
    3. Creating a Choice activity
      5m 10s
    4. Creating a customized Feedback activity
      4m 47s
    5. Adding a multiple choice question
      3m 14s
    6. Adding a dependent followup question
      3m 7s
    7. Adding a rating question
      2m 39s
    8. Adding an open response question
      2m 36s
    9. Analyzing Feedback results
      4m 16s
    10. Adding a standardized survey
      3m 25s
  10. 17m 18s
    1. Creating a main glossary
      5m 29s
    2. Adding concepts to the glossary
      2m 53s
    3. Enabling glossary auto-linking
      2m 53s
    4. Creating a secondary glossary
      6m 3s
  11. 11m 56s
    1. Creating a forum
      4m 40s
    2. Seeding a forum with questions
      3m 9s
    3. Participating in a forum
      4m 7s
  12. 31m 24s
    1. Creating a wiki
      4m 15s
    2. Wiki editing basics
      5m 28s
    3. Creating new pages
      2m 47s
    4. Creating lists
      3m 42s
    5. Adding images
      3m 53s
    6. Creating external links
      4m 24s
    7. Creating a table
      6m 55s
  13. 1h 4m
    1. Online assessment overview
      1m 20s
    2. Creating question pool categories
      2m 24s
    3. Creating a first question
      7m 10s
    4. Creating true/false questions
      3m 1s
    5. Creating multiple choice questions
      8m 22s
    6. Creating short answer questions
      8m 19s
    7. Creating essay questions
      4m 59s
    8. Creating match questions
      7m 10s
    9. Creating a quiz
      9m 0s
    10. Adding questions to a quiz
      2m 20s
    11. Changing the order of questions
      3m 1s
    12. Assigning quiz points
      1m 35s
    13. Previewing a finished quiz
      5m 50s
  14. 39m 38s
    1. Gradebook overview
      4m 53s
    2. Moving an assignment into a category
      1m 33s
    3. Completing assignments as a student
      11m 31s
    4. Grading assignments
      5m 5s
    5. Using quick grading
      1m 28s
    6. Grading assignments with uploaded files
      1m 58s
    7. Grading offline assignments
      1m 26s
    8. Grading an online quiz
      5m 1s
    9. Exporting grades to Excel
      2m 48s
    10. Importing grades from Excel
      3m 55s
  15. 9m 55s
    1. Calendars and events overview
      4m 8s
    2. Creating a new event
      2m 40s
    3. Creating a repeating event
      3m 7s
  16. 50m 41s
    1. Course administration overview
      2m 54s
    2. Managing course settings
      9m 5s
    3. Enabling completion tracking
      2m 20s
    4. Setting tracking for resources and activities
      3m 38s
    5. Managing tracking settings
      3m 51s
    6. Reporting on course tracking
      1m 32s
    7. Managing user roles
      4m 2s
    8. Backing up your course
      3m 36s
    9. Restoring data from a backup
      4m 50s
    10. Restoring a Moodle 1.9 course into Moodle 2.1
      6m 25s
    11. Importing content to another course
      3m 46s
    12. Resetting a course
      4m 42s
  17. 2m 6s
    1. Additional resources
      1m 37s
    2. Goodbye
      29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Moodle 2.1 Essential Training for Teachers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.