...
...
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
...
...
.
...
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.
...
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.
...
Take a copy of the /themes/default directory and paste it back into the /themes folder. Rename it and edit its 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
...
new theme's
...
/include
...
directory,
...
edit
...
header.tmpl.php
...
to
...
add
...
the
...
following
...
before the </head> tag:
| Code Block |
|---|
<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 <link rel="stylesheet" href="<?php echo $this->base_path.'themes/'.$this->theme; ?>/at_fluid.css" type="text/css" /> |
Note that fluid-atutor.js 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
...
:
...
| Code Block |
|---|
<?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
...
are
| Code Block |
|---|
<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:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
.grab { cursor cursor:move; padding padding: 0px 5px 0px 5px; }\\ |
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:
...
| Code Block |
|---|
<?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.
...
| Code Block |
|---|
<?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 |
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 the script "src" values in step 2 accordingly.