ATutor Fluid Theme
ATutor is a PHP-based Learning Content Management System developed and maintained by the Adaptive Technology Resource Centre. This Atutor theme was developed to satisfy a user's particular layout preferences in a dynamic and easy way using Fluid's Reorderer. In this initial version of the theme, the course menu can be displayed to the left or right of the main content window simply by dragging the menu or content area to its preferred location. Doing this automatically saves the layout preference to the user's profile in the database. In the future, we would like to use the Reorderer again to rearrange modules within the menu.
(Picture 1)
Adding this functionality to a new theme (based on the ATutor default theme) is summarized as follows:
1. Create a new theme using a copy of the default theme
2. Include library files into the header.inc.php file of the theme
3. Rename the menu and content divs, add if-condition
4. Create "grab" areas
5. Add menu div to footer
6. Add initializing function call to end of footer
Full Instructions
1. Copy the default theme directory into the /themes folder and rename it. Edit the theme_info.xml and theme.cfg.php files. This will be your new theme.
2. Fluid's library files are necessary for the Fluid functionality. In your theme's /include file, edit header.tmpl.php to add the following:
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery.tabindex.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.base.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.draggable.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.droppable.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jARIA.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid/Fluid.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid/Reorderer.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid-atutor.js"></script>
Note that the last file contains custom code specifically for the ATutor implementation. Feel free to take a look at it to see how the Fluid commands are called to control our custom divs.
3. Continue to edit header.tmpl.php - around line 321, change the div id="leftcolumn" to id="atutor.menu". A few lines down, also change div id="contentcolumn" to id="atutor.content". This will provide a reference to our two areas we want to move around. On the line above the menu div, add another condition to the end of the if-statement so it appears like:
<?php if (($_SESSION['course_id'] > 0) && $system_courses[$_SESSION['course_id']]['side_menu'] && ($_SESSION['prefs']['PREF_MENU']!="right")): ?>
This doesn't display the menu on the left if a user's preference is to have it on the right.
4. To create a "grab" area for each section, create divs with id="toolbar.menu" and id="toolbar.content" respectively and put them inside each of the larger divs. I chose to implement it as an icon in the corners of each, however bars along the top are also common. Example of icon grab area:
<div id="toolbar.content" class="grab"><img src="<?php echo $this->img; ?>layers.png" style="float:left;" alt="<?php echo _AT('drag'); ?>" /></div>
with the addition of the following to styles.css:
.grab
5. Add a menu div and grab area to the footer as well - this will allow the menu to be shown on either side of the content area. Notice our if-statement that only displays this div if the user's preference is that it's on the right and they are viewing a course. The default menu location is on the left. In your theme's /include file, edit footer.tmpl.php after line 13, between the two </div> tags and before <div id="footer">. Add the following:
<?php if ($_SESSION['course_id']>0 && $system_courses[$_SESSION['course_id']]['side_menu'] && $_SESSION['prefs']['PREF_MENU']=="right"): ?>
<div id="atutor.menu" class="side-menu">
<div id="toolbar.menu" class="grabmenu grab"><img src="<?php echo $this->img; ?>layers.png" /></div>
<?php require(AT_INCLUDE_PATH.'side_menu.inc.php'); ?>
</div>
<?php endif; ?>
6. Include the following code right before the </body></html> tags in the footer template. This initializes the fluid code after the page has loaded. It also only calls this function if a user is within a course.
<?php
if (($_SESSION['course_id'] > 0) && $system_courses[$_SESSION['course_id']]['side_menu']):
?>
<script type="text/javascript">
demo.initMyLayout('<?php echo $this->base_path ?>');
</script>
<?php endif; ?>
See the ATutor theme "fluid" as reference.
Note: These instructions are for ATutor's 1.6.1 release. For 1.6.2+ releases, Fluid javascript library files may be located in different directories, so modify include statements in step 2 accordingly.