In this tutorial we will show you how to change the default Moodle icons when creating your own theme. While the default icons that come with Moodle are good enough for a lot of basic installs when we are creating our own themes it is not unusual to come across situation where the default icons do not fit with the rest of your design. We will show you how to override the default icons rather than replacing them in the core. This way when we upload our theme to our website or someone else’s website our icons will automatically go with the theme so that we do not have to muck around modifying the core of Moodle to achieve the look and feel we are looking for.
In this tutorial we will show you how to make changes to the header of your Moodle 2.1 custom theme using Dreamweaver CS5.5. We will concentrate on changing the background of our header and the text contained within it. If you wish to change the logo or add one I have already done a tutorial on this so I won’t be covering that in this article.
To add a Logo to your header see this tutorial:
In this quick tutorial we will show you how to change the Standard Moodle Logo to your own logo and how to change the Favicon to one that you have created for yourself. We will not be going into creating these images only how to change them on your Moodle website. If you want more information on creating your own Favicon please visit Photoshop CS5: Favicon Creation and Embedding. Continue reading
In this tutorial we will be concentrating on using Dreamweaver CS5.5 to add a logo to your Custom Moodle theme. Before you go ahead with this tutorial you should make sure that you have already set your Moodle server up and that the theme you are going to edit is ready to edit before proceeding. If you have not already done so please check out the following articles then we can begin to edit your Moodle themes header and footer ready for deployment to the web.
- Dreamweaver CS5.5: Create Custom Moodle 2.0 Themes in Dreamweaver CS5
- Moodle 2.1: Getting a Theme Ready to Edit
Although I am using Dreamweaver CS5.5 for my run through everything that I do is exactly the same in Dreamweaver CS5 and CS4.
Note: This method is based loosely on the Methods used in the older style Moodle setups. This will work more often than not however there there is an easier way to do this so please visit that tutorial to see if that will work for you before proceeding with this now outdated method. (some themes may still need to do things using this method.) This method is usually used if the code that places the Logo in your header has been removed from the theme you are basing your Custom theme on.
In this tutorial we will show you how to set your Moodle theme up ready for you to edit it to your hearts content. We will show you how to get the name of your Moodle theme to show up properly in the themes selection menu, edit the basic information of your theme and how to get Moodle to show any changes you have made to the CSS. Many beginners have problems with these three areas in particular having their CSS changes not show up in Moodle.
Although I am using Moodle 2.1 for this tutorial these changes are all exactly the same in Moodle 2.0 and Moodle 1.9. Although I am not sure about earlier versions they would fairly similar to the changes in these versions. Continue reading
In this Tutorial we will show you how to set up Dreamweaver CS5.5 and your Moodle 2.0 servers so that they are ready for your to create your own templates using an existing Moodle Theme as your base. This is the best practice for creating a new theme for a beginner as it gives you a chance to see how the Moodle 2.0 themes work and how the various files interact with one and other.
Three things you need to have ready to go before we begin.
- A XAMPP server set up and ready to go. This should be switched on already.
- A Moodle 2.0 Server installed inside your XAMPP server.. Your should already be at the stage at which you have already logged in with your admin account already set up.
- Apart from that its just Dreamweaver CS5.5 installed on your computer and we are ready to go.