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: http://yuilibrary.com/yui/docs/panel/panel-animate.html
I pasted the below part into my frontpage.php file (head):
<script type="text/javascript">
YUI().use('transition', 'panel', function (Y) {
var openBtn = Y.one('#openButton'),
panel, bb;
function showPanel() {
panel.show();
bb.transition({
duration: 0.5,
top : '80px'
});
}
function hidePanel() {
bb.transition({
duration: 0.5,
top : '-300px'
}, function () {
panel.hide();
});
}
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) {
e.preventDefault();
hidePanel();
}
}
]
});
bb = panel.get('boundingBox');
openBtn.on('click', function (e) {
showPanel();
});
});
</script>
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>
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>
</div>
</div>
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?
