Theme Gurus

  • View
    131

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Text of Theme Gurus

  • 1. Theme Gurus Getting started with themes in moodle

2. Aim of this workshop We Will Provide background on themes in moodle Demonstrate theme design best practice Show tools helpful to theme design We Won' This is NOT a technical workshop No prior experience expected HTML and CSS not covered 3. Getting startedWhy use themes?Build local, deploy global Tools you needDont re-invent the wheel! 4. Getting started - Why use themes? Meet brand requirements Match an existing site Present a more engaging design for your particular audience Establish a unique look and feel for your site. be a Stand out! 5. Getting started - Build locally, deploy globally There is no Moodle theme dev development tool Building in Dreamweaver is extremely difcult. I usually edit using a text editing tool. Easiest to deploy a moodle on your machine and edit this directly. See changes instantly as you make them When nished local build, then upload to your server 6. Getting started - Tools you will be needing Firefox web browser Firefox Web Developer plugin http://chrispederick.com/work/web-developer A Text editor Textpad (Windows) Smutron (OSX) & CSSEdit (OSX) Local Webserver Application XAMPP (Win & OSX) http://www.apachefriends.org 7. Getting started - Dont re-invent the wheel Themes are very time consuming to build from scratchBest Practice Tips Small Scale changesWhen creating your own themefolder the name needs to be in lower Create a new theme using standardsheetscase. If it is not then the Moodlesmartpix will not function Large Scale changes Start with a theme that is similar to your need Just duplicate its folder and rename to use 8. Moodle theme setupadmin settingsthe le structure 9. Moodle theme setup - Admin settings Theme SettingsBest Practice Tips Theme list Allow User ThemesYou dont have to drill down throughthe Administration to hunt down Allow Category Themestheme settings. Just type in themeinto the admin search eld to see the Allow users to hide blocks available options. Allow blocks on module pages Hide activity type navigationWhat theme goes where? Theme SelectorThere is a new setting you can put in The theme selector allows you to apply a selected theme at a your sites cong.php site level.$CFG->themeorder = array('page', 'course','category', 'session', 'user', 'site'); Set how you want themes displayed 10. Moodle theme setup - Files in a typical theme Themes are always stored in the themes folder in your moodle directory PHP les CSS les cong.php syles_layout.css styles.php styles_fonts.css docstyles.php styles_color.css meta.php Other les HTML les favicon.ico header.html screenshot.jpg footer.html readme.html 11. Creating a themeThe PHP lescong.phpstyles.php docstyles.php meta.php 12. Creating a theme - Cong.php This le contains a few conguration variables that control Best Practice Tips how Moodle uses this theme. Tags Used:Dont create this from scratch. It needs to be exact, so copying an $THEME->sheetsexisting cong le is a good way of $THEME->standardsheetsmaking sure you do not miss anything $THEME->parent $THEME->parentsheets $THEME->modsheets $THEME->blocksheets $THEME->langsheets $THEME->custompix $THEME->layouttable 13. Creating a theme - Cong.php Cong.php variablesBest Practice Tips $THEME->sheetsWhile you can call your stylesheets Denition: anything you like, or even just have This variable is an array containing the names of all the stylesheet les you want one, the listed example is considered included in this theme, and in what orderbest practice to make the themeeasier to edit if passed around the Demo Use:community.$THEME->sheets = array('styles_layout','styles_color','styles_fonts'); 14. Creating a theme - Cong.php Cong.php variables $THEME->standardsheetsDenition: This variable can be set to an array containing lenames from the *STANDARD* theme. If the array exists, it will be used to choose the les to include in the standard style sheet. When false, then no les are used. When true or NON-EXISTENT, then ALL standard les are used. This parameter can be used, for example, to prevent having to override too many classes. Note that the trailing .css should not be includedDemo Use:$THEME->standardsheets = true; this would also generate the same result $THEME->standardsheets = array('styles_layout','styles_fonts','styles_color'); 15. Creating a theme - Cong.php Cong.php variables Best Practice Tips $THEME->parent Dont reference standard as your Denition:parent theme. this wont kill your This variable can be set to the name of a parent theme which you want to have theme, but it is doubling up if parent included before the current theme.has been set to true. This can make it easy to make modications to another theme without having to actually change the les. If this variable is empty or false then a parent theme is not used.Demo Use:$THEME->parent = 'wood'; 16. Creating a theme - Cong.php Cong.php variables $THEME->parentsheetsDenition: This variable can be set to an array containing lenames from a chosen *PARENT* theme. If the array exists, it will be used to choose the les to include in the standard style sheet. When false, then no les are used. When true or NON-EXISTENT, then ALL standard les are used. This parameter can be used, for example, to prevent having to override too many classes. Note that the trailing .css should not be includedDemo Use:$THEME->parentsheets = array('styles_layout','styles_color','styles_fonts'); 17. Creating a theme - Cong.php Cong.php variables $THEME->modsheets, $THEME->blocksheets and $THEME->langsheetsDenition: When any of these are enabled, then this theme will search for les named quot;styles.phpquot; inside all Activity modules, blocks and/or language folders and include them. This allows modules to provide some basic layouts needed by these tools so that they work out of the box. It is HIGHLY recommended to leave this enabled.Demo Use:$THEME->modsheets = true; $THEME->blocksheets = true; $THEME->langsheets = false; 18. Creating a theme - Cong.php Cong.php variables !!WARNING!! $THEME->custompix If this is enabled you will need to make sure you have every image in Denition:Moodles pix folder replicated inside If true, then this theme must have a quot;pixquot; subdirectory that contains copies of all your theme. les from the moodle/pix directory, plus a quot;pix/modquot; directory containing all the If any images are missing they will icons for all the activity modules. appear as broken on your theme.Demo Use:Best Practice Tips $THEME->custompix = true; Instead of using custompix use the new SmartPix search built into Moodle 1.8 and above.This searches for images in your theme and if absent it then uses standard moodle images. 19. Creating a theme - Cong.php Cong.php variables Version Notice $THEME->layouttable This is a new tag that will only operate in versions 1.8 and above. Denition: This new variable gives the designer the ability to change the order of how columns are displayed. Typically blocks are displayed in left and right columns with content in the middle. The layouttable tag allows block columns to be re-ordered in any combination.Demo Use:$THEME->layouttable = array('middle', 'left', 'right'); 20. Creating a theme - meta.phpBest Practice Tips Denition: This le contains any meta data that you may need to put into your sites header.Dont create this from scratch. It More often than not this le is emptyneeds to be exact, so copying anexisting cong le is a good way ofmaking sure you do not missanything Demo Use: 21. Creating a theme - styles.php/docstyles.php These are two les used by moodle, pulling data from your cong le to generate your theme as based on your settings. There is nothing you need to do with these les. 22. Creating a theme The HTML lesheader.html footer.html readme.html 23. Creating a theme - The HTML Files Header and Footer .html les These contain your logo, the login, the jumpto menu, the breadcrumb navigation, the moodle logo etc. Within these les you can give Moodle your individual look at the top and the bottom of all pages Readme.html This contains details entered by the author of the theme. It can contain anything you like. Typically it includes the authors name, license type and contact details. 24. Creating a theme - The header and footer Creating the container The header.html and footer.html les essentially create a container within which yourmoodle site resides.Header Footer 25. Creating a theme - The header and footer What goes in the header and footer.html lesuot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtdquot;> >As the name suggests, these are both html les quot; /> and therefore contain raw html.themewww .'/'. current_theme() ?>/ favicon.icoquot; />Designers can use any HTML they like. Most>

specic php code.
wwwrootquot; ?>quot;> 26. Creating a theme - The header and footer PHP Tags you need to know *footer.html only *footer.html only 27. Creating a theme - The header and footer PHP Tags you need to know Denition:This generates the title of the page. Demo Use: 28. Creating a theme - The header and footer PHP Tags you need to know Best Practice Tips Try and keep all images in a folder called pix. Denition: This generates an absolute path to your theme. This must be used if this Makes them easier to identify and theme is going to be used in more than one install. It is best practice to replace as you move on. always be used to save you issues in the future when URLs may change.Demo Use:themewww .'/'. current_theme() ?>/pix/logo.gifquot;> 29. Creating a theme - The header and footer PHP Tags you need to know Denition: This generates the summary of the page. This is either p