jQuery themes with ThemeRoller

jQuery themes with ThemeRoller

Mauno Korpelainen -
回帖数：23

Hi Frank and other jQuery users,

I was testing yesterday customizing my math plugins with jQuery.

tabs

Has anybody tried to create jQuery css based themes for moodle? ThemeRoller http://jqueryui.com/themeroller/ makes modifying basic theme css very easy, you can immediately download the css and images as compact set, it's crossbrowser compatible and easy to integrate with any plugins of moodle.

Extra plus for testers is external theme switcher that can be used to test basic structure before adding the actual themes or plugin themes. Although jQuery libraries are not a core part of moodle it is easy to add and update the basic lib, css and widget files for example to lib/jQuery ...

I think we could create some jQuery based theme for moodle 2.0 as well - it does not seem to have conlicts with YUI or other scripts of moodle and should work fine with new theme system that Petr and Tim have been building.

roller

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

Originally I was planning to implement just editable settings to theme administration (if Petr's theme plan goes through in moodle 2.0) but this kind of system can be used to simply let moodlers create their own css with ThemeRoller and add this css to demo theme css so that basic css comes from moodle and additional css for headers, tabs etc from ThemeRoller css.

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

No comments from anybody but I can say that this idea actually works...

My first themable editor plugin is ready and it's time to test whole theme next week... it's possible to create any custom theme with ThemeRoller and my test plugin uses the classes from the selected theme. For normal themes of moodle the same idea can be used first to a couple of classes but in moodle 2.0 it is also possible to create a ThemeRoller theme that can be used in all activities of moodle.

We don't need jQuery in themes to render css but it can be used to create and change themes and styles...to create new theme prototypes in an easy way.

附件 plugin1.gif
平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
Sir How can I used this in my 1.9.5+? Is this desame as the usual theme?
平均分： -
回复Jet Batung Bakal

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

I need to make a "demo theme" first. The idea is that demo theme is using the same classes as ThemeRoller themes and when you download a theme created with ThemeRoller you will just need to move the theme folder inside moodle's demo theme folder.

No example themes available yet but I will test this next week - I tested the basic idea with editor plugin first but I am sure the idea can be used for a whole theme.

In any version of moodle - but I will test first moodle 2.0 and 1.9.5+ (1.9.6)

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
So Sir this is not yet usuable? I'm exicited to see the result after that.. Keep it UP!!!微笑 I hope this is easy as the usual theme that can copy and paste only......
平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Patrick Malley -
Very straight-forward indeed. At first, when I saw this in my feed reader, I thought "oh no, we don't need another Chameleon." But, this is something quite different indeed. Would settings such as this be available to the admin through the admin menu?

My only fear would be a future unknown conflict in javascript.
平均分： -
回复Patrick Malley

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

I was thinking to use css classes of ThemeRoller custom themes.

In moodle 2.0 we can simply add them to any elements with  http://jqueryui.com/docs/Theming/API 

(for example add class ui-widget-header to those headers that we want to use ThemeRoller header css and when that class is added any ThemeRoller custom variations can be used)

In moodle 1.9 it is much more difficult because we should either edit some files like weblib.php to add the needed classes or use some replacement script to replace some current classes with ThemeRoller classes (but it might require javascript to be enabled) or disable standard theme css and define body level classes in theme css and header.html for all basic elements (a sort of reset css) and then check all tiny parts of different activities etc.

ThemeRoller switcher is using different cookies with jQuery and ThemeRoller themes can be changed even if session themes are not enabled in moodle but in my opinion theme switcher is most useful in testing new themes (colors, fonts etc).

For permanent themes selectable settings in administration are a better way to go. In ideal case we should be able to use tools like ThemeRoller to create a nice set of color (style) variations with basic layout but we still need different layouts for different needs. In tabs and other widgets these editable classes are really nice.

When Petr continues with his theme proposal I will give some examples about those tests that I made with Petr's last demo version - I suppose nothing essential has happened during the past month???

In maths forum we have been talking about conflict between jQuery dollars and latexmathml dollars but you don't actually need to use jQuery at all in themes - unless you want to use jQuery widgets - you can use ThemeRoller for creating custom theme css and use just that css (those few classes) for themes of moodle...

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Frank Ralf -
Hi Mauno,

Thanks for the hint. I hadn't heard of ThemeRoller yet. Seems to be a very promising concept!

Frank
平均分： -
回复Frank Ralf

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

It is - and I have already tested ThemeRoller made css with

http://moodle.org/mod/forum/discuss.php?d=133132 my math plugins

and

borders and sliders of JSXGraphs http://moodle.org/mod/forum/discuss.php?d=135727

Implementing to moodle 1.9.6+ themes is not as simple as one might think because moodle simply does not have those classes that ThemeRoller uses but in moodle 2.0 it's possible to add/change those classes everywhere. Before moodle 2.0 you can mostly change the header and footer parts. It might be possible to use jQuery also for changing the existing classes in themes but I will test the 2.0 system first.

Creating new styles with ThemeRoller for given elements is a piece of cake for anybody and if they are combined to settings.php of moodle 2.0 themes (images etc) it is possible to make creating themes much easier for beginners. On the other hand it is not necessary to use jQuery (if not wanted) in actual themes - it is also possible to use ThemeRoller just for creating the css for headers and (some) activities.

It might be possible to create a similar system like ThemeRoller for current styles and classes of moodle with jQuery as well - but it's easier to start with existing code...

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

In moodle 1.9.x ui-widget classes could be added to existing code of content area (outside headers and footers) with some replacement code to achieve the same result as with actual change of core code.

http://jqueryui.pbworks.com/Extending-ThemeRoller-beyond-widgets

In moodle 2.0 the output renderer code created by Tim and Petr let's us to do this directly to themes.

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
Sir can I adopt this in 1.9.5+? How can I able get this stuff and put it on my moodle to see for my self? How to run this? Thanks.,.,
平均分： -
回复Jet Batung Bakal

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

Jet,

I did not test moodle 1.9.5+ yet (has been busy with maths and graphs) but I promise to give you 2 demo packages for moodle 1.9.6+ next week.

Themes of moodle 1.9.5 are using a totally different logic than themes of moodle 2.0 will use so I may need to make some tiny changes to core files but I will try to create one demo theme that does not require any changes to any core lib files - even if all elements of moodle 1.9.5/6+ may not be themable that way...

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

After all it's not so difficult even in moodle 1.9.5 and no editing of core files of moodle is needed - if we use jQuery.

I will create the experimental class replacement file during the coming days but I explain how it works. We need to add link to jQuery file and custom theme css file (custom css created with ThemeRoller and downloaded to some folder in our website or link to some of the existing ThemeRoller theme css files) for example to our theme header.html

<link type="text/css" href="<?php echo $CFG->wwwroot ?>/lib/jquery/development/themes/blue/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo $CFG->wwwroot ?>/lib/jquery/development/jquery-1.3.2.js"></script>

Then we add a jQuery (to external js file or inline javascript) using this kind of rules:

<script>
$(document).ready(function() {
$('#page').addClass('ui-widget-content');
...and here come the rest of replacements...
});
</script>
</head>

where underlined code adds class ui-widget-content to div id page (main content area) and moodle reads css from custom ThemeRoller theme ui-widget-content.

There is a long list of classes and id:s that can be replaced in themes and activities of moodle and like I said before this replacement method requires that javascript is enabled or only original css is used. (Or actually we just add new classes to some tags and this time these classes come from ThemeRoller that creates us as many different css packages as we want with a couple of button clicks)

The other option is to add ThemeRoller classes to core files of moodle but I don't want to do it that way - core files are core files and they should never be changed unless we have no other option.

Demo theme will be available next week for moodle 1.9.x and when moodle 2.0 is stable I will create that ThemeRoller demo theme for moodle 2.0 using layout files directly without need for replacement code...

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -
You can download a very basic version of themeRoller theme for moodle 1.9.x from http://korpelainen.net/themeroller.zip - unzip the theme to theme folder like any other theme and test...

The main example code is in lines 9 to 21 of theme header.html:

<link type="text/css" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/ui-lightness/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/jquery-1.3.2.js"></script>
<script>
$(document).ready(function() {
$('body').addClass('ui-widget-content');
$('.content').addClass('ui-widget-content');
$('.section td.side').addClass('ui-widget-content');
$('.header').addClass('ui-widget-header');
$('.navbar').addClass('ui-widget-header');
$('.loginbox').addClass('ui-widget-header');
$('#switcher').themeswitcher();
});
</script>

and you can test/use other classes from http://jqueryui.com/docs/Theming/API when you have tried to create a custom theme in http://jqueryui.com/themeroller/

When you download a custom theme from jquery.com and unzip it you should find a folder custom-theme from the package inside development-bundle folder. Rename this folder custom-theme and move it inside folder theme/themeroller on your test site - and change ui-lightness in previous code to your custom theme name.

Themeswitcher is included but you could take it away after first tests - just remove line

$('#switcher').themeswitcher();

and from the bottom of header.html

<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>

Have a nice time - I will send a link to more modified themes next week.

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
Can you give me more easier procedure next week so we can also adopt this new theme....Thanks...微笑
平均分： -
回复Jet Batung Bakal

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

OK - I'll try:

1. read http://docs.moodle.org/en/Themes#Installing_a_theme

(demo theme package in http://korpelainen.net/themeroller.zip is just a normal theme - a modified standard theme - that you can install and modify like any other theme of moodle)

2. ThemeSwitcher is included to this theme for testing your moodle with the current gallery themeroller themes in http://jqueryui.com/themeroller/ - it's not necessary for the actual theme and I will remove it next week but I included those couple of lines just to show how the system works. All script tags are in file theme/themeroller/header.html (my package)

3. If you want to change styles (of course you want wink ) you simply go to http://jqueryui.com/themeroller/ and start creating new theme with buttons and sliders (can use one of the gallery themes as a preset example) or you can open for example theme/themeroller/custom/jquery-ui-1.7.2.custom.css with text editor and find a string like

http://jqueryui.com/themeroller/?ffDefault=Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&bgColorHeader
=030303&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=45
&borderColorHeader=000000&fcHeader=ffffff&iconColorHeader=fadc7a
&bgColorContent=feeebd&bgTextureContent=03_highlight_soft.png
&bgImgOpacityContent=100&borderColorContent=8e846b&fcContent=383838
&iconColorContent=d19405&bgColorDefault=fece2f&bgTextureDefault=
12_gloss_wave.png&bgImgOpacityDefault=60&borderColorDefault=d19405
&fcDefault=4c3000&iconColorDefault=3d3d3d&bgColorHover=ffdd57
&bgTextureHover=12_gloss_wave.png&bgImgOpacityHover=70&borderColorHover
=a45b13&fcHover=381f00&iconColorHover=bd7b00&bgColorActive=ffffff
&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=30
&borderColorActive=655e4e&fcActive=0074c7&iconColorActive=eb990f
&bgColorHighlight=fff9e5&bgTextureHighlight=12_gloss_wave.png
&bgImgOpacityHighlight=90&borderColorHighlight=eeb420&fcHighlight=1f1f1f
&iconColorHighlight=ed9f26&bgColorError=ef1527&bgTextureError=
03_highlight_soft.png&bgImgOpacityError=10&borderColorError=171512
&fcError=ffffff&iconColorError=fece2f&bgColorOverlay=eeeeee&bgTextureOverlay
=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow
=dddddd&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow
=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px (don't use this link - I added some line breaks)/a>

and you can edit your custom theme with this link in ThemeRoller directly. It passes all variables of your custom theme to themeroller application.

InterfaceGallery

When you a finished click the download link download the jQuery package to your local PC etc. Open that zipped package, unzip it and you should find your theme from folder development-bundle/themes with name custom-theme. This is the folder that you need to rename - call it for example 'jet' and move this folder jet to your test site and to folder ...yoursite/theme/themeroller/

Open file theme/themeroller/header.html and change line

<link type="text/css" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/ui-lightness/ui.all.css" rel="stylesheet" />

to

<link type="text/css" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/jet/ui.all.css" rel="stylesheet" />

and theme reads your new css. Move header.html back to your site - done.

For further modifications we need settings for custom logos etc but that's all "normal" editing of themes of moodle explained in documentation of moodle. With themeroller you can define css for some selected elements of moodle and edit them online with themeroller but there are still many features that could be improved and could be done differently - and I am going to implement them to demo theme of moodle 2.0 but most likely not to all classes and id:s of moodle 1.9 - that other stuff can be chaged with normal theme css and images.

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -
And later (may be even next year...) - when moodle 2.0 is stable and has settings.php and other cool stuff available I will implement the administration of most of these settings directly to administration panel in a new demo theme.
平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -

I made a tiny upgrade to http://korpelainen.net/themeroller.zip and added the datepicker widget classes to calendar. On monday I will add some styles to form elements (check boxes, radio buttons etc) and add some selectable logos, icon sets and background images.

Current replacement/additional jQuery code looks now like this:

$(document).ready(function() {
$('body').addClass('ui-widget-content');
$('.content').addClass('ui-widget-content');
$('.section td.side').addClass('ui-widget-content');
$('.header').addClass('ui-widget-header');
$('.navbar').addClass('ui-widget-header');
$('.loginbox').addClass('ui-widget-content');
$('.loginbox h2').addClass('ui-widget-header');
$('.block_calendar_month').addClass('ui-datepicker');
$('.minicalendar').addClass('ui-datepicker-calendar');
$('.weekend').addClass('ui-datepicker-week-end');
$('.calendar-controls').addClass('ui-datepicker-header ui-widget-header ui-helper-clearfix');
$('.calendar-controls .previous .arrow').addClass('ui-helper-hidden');
$('.calendar-controls .previous').css({ color: "transparent", width: "16px", float:"left" });
$('.calendar-controls .previous .arrow').addClass('ui-icon ui-icon-circle-triangle-w');
$('.calendar-controls .next .arrow').addClass('ui-helper-hidden');
$('.calendar-controls .next').css({ color: "transparent", width: "16px", float:"right" });
$('.calendar-controls .next').addClass('ui-icon ui-icon-circle-triangle-e');
$('.minicalendar .day').addClass('ui-widget-content ui-state-default');
$('.minicalendar .today').addClass('ui-widget-content ui-state-hover');
$('.minicalendar .day, .minicalendar a').css({'text-align' : 'center', 'vertical-align' : 'middle'});
$('#overDiv').addClass('ui-state-highlight');
$('#calendar .maincalendar .eventlist .event .topic').addClass('ui-widget-header');
$('#calendar .maincalendar .eventlist .event .picture, #calendar .maincalendar .eventlist .event .side').addClass('ui-helper-reset');
$('#calendar .maincalendar .filters table, #calendar .sidecalendar .filters table, .sideblock.block_calendar_month .filters table').addClass('ui-widget-content');
$('#switcher').themeswitcher();
});

It can be made a little shorter by combining rules when I have checked different classes... but still no changes to core moodle needed but theme itself needs some additional styles and elements (this is based on standard theme) wink

PS. None of the demo ThemeRoller themes is particularly "good-looking" so people will most likely want to create their custom look with themeroller anyway... or edit theme files for their custom needs. And that's exactly the reason why themeRoller was originally made for...

附件 cale1.gif
平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
Hi sir just a few questions.... I already tried it in my 1.9.5+ and as far as my observation this theme is working fine. My question is where is the math that you are talking about? Is this theme affect the performance of my system? Can I control the themes choices as admin? Can I add here in jquery my official them of our school? how?
平均分： -
回复Jet Batung Bakal

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -
- math plugins... are part of my plugin project and they will be available later (when moodle 2.0 is stable enough)

- performance and control... if you take away that theme switcher code and leave only code for adding themeroller classes it's like normal theme - your custom css is used the same way as any other theme is using css + a couple of classes are updated with jQuery. This is just a start for more advanced modifications and my purpose was not originally to use jQuery in moodle 1.9 at all but I tested it when you asked...

-Theme switcher of ThemeRoller is ment only for testing - I suggest that you take it away on production environment and use session themes of moodle if you need more than one theme.

- Control of settings will be available in moodle 2.0 version. It would be possible to add administration of settings also to this moodle 1.9 version at least with with extra filter (theme filter) and filtersettings.php but I won't add those settings now. You can control settings directly with files of your theme and can use this theme or jQuery in your school's theme if you can install it and select it from administration panel > themes ... see the theme documentation.

- I added some icons this morning... more to come later.

- The only conflict I have seen is between LatexMathML using single dollars for rendering maths and jQuery scripts using the same dollars in functions. TeX filter works ok with jQuery.

平均分： -
回复Mauno Korpelainen

Re: jQuery themes with ThemeRoller

Jet Batung Bakal -
can I control the theme switcher? for example only admin can see that because in my test site even guess user has the access to change the themes. 伤心
平均分： -
回复Jet Batung Bakal

Re: jQuery themes with ThemeRoller

Mauno Korpelainen -
You can control themes of your site from administration menu - and test themes in some course that is hidden from students if you allow course themes.

I said before that you should not use ThemeSwitcher of ThemeRoller on production sites - you can take a copy of Themeroller theme and test with one theme and use another without theme switcher.

It does not actualy matter if students or guests can change styles of theme - nothing changes on server side, the settings are saved only in cookie and when users close the browser or session is deleted they see the original theme again.

A better theme switcher system is to use session themes of moodle itself (see theme docs again... ) and some of the "ready themes" - and when your custom theme is ready just drop the themeroller switcher code and your theme can be used on production site.
平均分： -