Adding YUI javascripts to moodle themes pages

Picture of Łukasz Styś
Odp: Re: Adding YUI javascripts to moodle themes pages

Hi Mauno,

Can you please give me some hints on the theme customization I want to develop? Basically I want to have animated login panel, something similar to:

I pasted the below part into my frontpage.php file (head):

<script type="text/javascript">
YUI().use('transition', 'panel', function (Y) {

var openBtn ='#openButton'),
panel, bb;

function showPanel() {;
duration: 0.5,
top : '80px'

function hidePanel() {
duration: 0.5,
top : '-300px'
}, function () {

panel = new Y.Panel({
srcNode: '#panelContent',
width : 330,
xy : [300, -300],
zIndex : 5,
modal : true,
visible: false,
render : true,
buttons: [
value : 'Close the panel',
section: 'footer',
action : function (e) {

bb = panel.get('boundingBox');

openBtn.on('click', function (e) {



and then in the boody I pasted:

<button id="openButton">Open Panel</button>

<div id="panelContent" class="yui3-widget-loading">
<div class="yui3-widget-hd">
Showing an animated panel
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>

Now if I open my page I see the button to open my panel, I press on the button to open it and it works - the only thing is that I want to customize it.

Could you please tell me how to change the CSS for this panel? I want to put my CSS stuff into a separate CSS file (according to the best practices). I created the file under /theme/myTheme/style directory, copy paste the example styles, modified it a little bit but when I open my page I still see the defualt YUI skin for the panel.

I would also like to put the script into a separate js file - can you help here?

Average of ratings: -
Picture of Łukasz Styś
Odp: Re: Adding YUI javascripts to moodle themes pages

one step forward smile I added the css file into sheets definition in the config.php file and now this is fine. JS left, any help?

Average of ratings: -
It's only an avatar...
Re: Odp: Re: Adding YUI javascripts to moodle themes pages
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

What kind of help do you want?

If it is to know how to add the JS script to a js file, and then add this file name into your theme config.php then I have added your JS to the attached file and called it openButton.js. Here are the instructions for adding this into your theme.

Add the attached file to theme/yourthemename/javascript/
directory that you will need to create first.

Then add the following to your theme/yourthemename/config.php where yourthemename is the name of YOUR theme.

$THEME->javascripts = array('openButton');

Now you can remove the script in the header as the code added to the config will add the JS automatically into the header when the page loads.

Also to see any changes to CSS & JavaScript you will need to Purge all caches in Site Administration > Development > Purge all caches



Average of ratings: -