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.
Dreamweaver CS5.5: Create Custom Moodle 2.0 Themes in Dreamweaver CS5
Although the task of creating a Moodle 2.0 Theme may seem daunting at first it is really not that hard. We are going to break the process up into smaller easier to understand steps. Once we have finished the tutorial you will be ready to edit a Moodle theme to exactly how you like it. We will then quickly show you how to identify what components need to be edited to achieve the look you are looking for.
Setting up a Moodle 2.0 Server in Dreamweaver CS5.5
Naturally our first step is going to be setting up Dreamweavers server capabilities so that while we are working in Dreamweaver we can access all the files we need when we need them. So first we need to go to Site >> New Site so that we can set up the server and site definitions for our Moodle server.
On the first page we naturally need to give our server a name and then navigate to the root folder of our Moodle server (not the folder for your theme). Then we need to go the Server tab on the right hand side and then hit the Add New Server button(looks like a little plus symbol). We should now be in the basic server tab now.
Server name is localhost ( as we are working on our local machine) and Change Connect Using to Local/Network. Again for our server folder we need to navigate to the same folder that we did on the previous page. And the last setting is the URL that we need to use in our browser to access the Moodle server on our machine. It should be for most people either http://localhost OR http://localhost/the-name-of-the-folder-you-installed-moddle-in. Once you have done that click on the advanced tab up the top and at the bottom of the new page change the Server Model to PHP/MySQL. Click on save and then when we see our new server listed change the tick box for our server from Remote to Testing. If we don’t do this Dreamweaver will try looking outside your computer for the database.
You will be asked if you wish to discover files at this stage click discover and change to live view. You should now see what your web-page looks like in your browser. Unlike other CMS systems in Dreamweaver we need to login to the server in Dreamweaver. This is because most parts of the Moodle Websites you need to be logged into to be able to view them. So while in live view hit Ctr-click on the log-in button. Every link or button you need to press to progress you need to remember to hit the Ctr button first or you will just examine the object in Dreamweaver. Ctr-click will follow the link instead.
Now that you are logged and ready to go lets move onto creating our theme folder in Dreamweaver.
Starting the Basis of our Moodle 2.0 Template in Dreamweaver
Not exactly a difficult task to perform but was a little tricky the first time I did it. first find a template that you like that has similar characteristics to what you wish to create. Once it has been installed into your Moodle server open Dreamweaver and in the files palette navigate to the Themes folder. Local the folder that contains your them. Right click on this folder and go to Edit >> duplicate. When you hit enter to commit to the name change a window will pop up asking if you want update links, DO NOT update links. Dreamweaver will duplicate the folder for you, it will also open the original folder so when it has finished duplicating the theme close the original folder and look for the copy. It will have the same name as the original but will have the word copy added to the end of it. Right click on it and go to edit >> rename and call it what ever you would like to call your theme.
Once you have done that open the folder and open Config.php in your Dreamweaver. Near the top you will find a line of code like this.
$THEME->name = 'old_theme';
Change old_theme to the name of your new theme, however make sure you don’t delete anything around it and do not use any spaces. Now you may re-save this file.
If your theme has a file in the top directory called renders.php locate this line right up the top.
class theme_mytheme_core_renderer extends core_renderer
Change where I have mytheme in there to the name of your theme. Do not use spaces or any underscores etc in your name though. Again save the file.
Open the directory called lang and open the directory for your language. You will find a file in there called theme_name.php. If you were working with a template called standard it would be theme_standard for example. We need to open this file but first right click on it and rename the file to theme_(insert your theme name here).php. Once you have done that open the file up and locate this line (again up near the top).
$string['pluginname'] = 'old_theme';
Again we change the name from the old name to our new theme name. Do not use spaces in here. Once you have done that save the files and go back to your browser, log-in as the admin account and change the Theme being used to the theme we are going to be working on. We must have this set to the default theme or when we are working in Dreamweaver we won’t see any of our changes.
For some reason Dreamweaver does not like to be able to find the CSS files associated with the template you are using. So you will have to open the CSS files in your template styles folder yourself. Also because it can’t find the CSS files itself using inspect mode will not tell your the CSS rules that apply to a particular element. You can how ever see what div’s and tags surround and element and what classes they are. You must then go through by hand unfortunately to find each of those CSS rules. The task is a labor intensive one but there is not much you can do about it no matter what editor you use.
But at least now it is set up in view so you can see your changes as they happen so you can see if you have found the right elements to change, unlike other editors where you will be going back and forth between the editor and refreshing your browser pages.
Hopefully you found that helpful and see you again soon.