Can anyone point me the right direction to build a theme for modile devices such as pdas. I understand that you would need to use a session theme and set the theme in the url but that is all i have found out.
How can i get Moodle to detect an iphone for instance and then load a theme that has minimal graphics?
Cheers for any advice
there is a theme for handheld devices included in standard release. its called 'orangewhitepda'. naturally, you cld base your custom theme on this. to eliminate horizontal scrolling, i recommend you set this theme as two columns ie shift all blocks to right-side of frontpage, mymoodle, course pages etc. you're right with respect to session theming config.
Cheers, Chad
Cheers, Chad
You can detect screen dimensions with javascript - I have tested a jQuery in moodle 2.0 themes - and in practise you can use this screen dimension detection to select totally different css for small screens and large screens - no matter if they are iphones or some other devices. Javascript detection can look like this:
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
and continue with myWidth and myHeight... for example if(myWidth<310) {...} else {...}
In any case you need to have a "basic css" just for the case that javascript is not enabled.
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
and continue with myWidth and myHeight... for example if(myWidth<310) {...} else {...}
In any case you need to have a "basic css" just for the case that javascript is not enabled.
Thanks for the answers and sorry for the delay in getting back I have been away
Is there any tutorials on how to use session themes?
Cheers
Is there any tutorials on how to use session themes?
Cheers
It's pretty simple. All you need to do is to add
$CFG->allowthemechangeonurl = true;
to the Moodle config.php
and call installed themes with additional parameter like
http://mymoodlesite.org/course/view.php?id=18&theme=orangewhitepda
Yes I tried that but in the example you give changes the theme for a specific area of Moodle rather than the fronpage if that amkes any sense.
I need a link that PDA devices can click on to take them to the fronpage of Moodle using the OrangeWhitePDA theme
Many thanks for you help
http://mymoodlesite.org/index.php?&theme=orangewhitepda!!!
I need a link that PDA devices can click on to take them to the fronpage of Moodle using the OrangeWhitePDA theme
Many thanks for you help
http://mymoodlesite.org/index.php?&theme=orangewhitepda!!!