Our ATutor themes

ATutor redux is our first theme, which can be seen both on this blog and on our demo server.

The Redux theme was created as we needed a theme that was easier to modify by only editing the CSS. In the first version all tables were removed, and the CSS was completely rewritten, with new classnames and more comments in the CSS file.

A second goal was to create a less cluttered and cleaner look and feel.

Main changes from the default theme:

As of ATutor 1.6.* the default ATutor theme is completely rewritten. The Atutor Redux is more like the 1.5.* theme with regards to colors and general look and feel.
Completely new login page, which we have found to reduce the number of e-mails we get from people that has forgotten their password (as they now see where to get a new one).
The side menu can be switched from left to right by changing the class of the html element in /include/header.tmpl.php. standard is class="rightmenu", change to class="leftmenu" and the menu floats to the left.
Override banner styles per course by placing style declarations in a file called banner.txt in each course's file manager, at root level.
Removed breadcrumbs: with proper menu highlighting, proper use of title, and proper use of headings, breadcrumbs tends to clutter things up and only provide redundant information. Screenreaders read the title, and people with normal eyesight can see the path visually in the menues
Removed sitename in header: ..but added a empty box where you can put it.
Removed system time and date: people have watches and calendars, this just isn't neccessary
Added a print page function in javascript. There are also dedicated CSS files for print, but people tend to look for these buttons.
works in IE6, IE7, FF 1.5+ (including 2.0 and 3.0), Opera 9.* and Safari for Mac. some glitches at some pages in IE 5.0 and IE 5.5, haven't tested any more.
..and a whole lot of smaller and larger adjustments to the general look and feel!

Changelog for 1.6.1

Qstats is now a part of ATutor 1.6.1 so all theme files under test_questions are removed, as well as a few other redundant files.
login.tmpl.php is updated to work with the new password encryption method in 1.6.1
If the patch for announcement subscribe is installed, this will work in the theme.

Attachment	Size
Atutor-redux.zip	87.21 KB

Comments

Theme does not work for me

July 10, 2008 - 15:04 — eviking (not verified)

This theme does not seem to work with my 1.6.1 installation (the pl-1 release).

I get a warning from ATutor that it may not be compatible, and the result is not good. For example there is no graphics at all...

Thanks for the report

July 11, 2008 - 08:28 — Vegard A. Johansen

Thanks for the report eviking! It seems something had gone wrong with the theme export, as all images was placed on root and not in the images folder, causing paths to break and images not showing.

I have fixed this now, and tested with the updated theme, which works just fine here. Give it a try! As for the compatibility warning this can safely be ignored.

Additional information: a common thing when you upload themes is that the permissions are wrong: make sure all theme files are readable. If on Unix / Linux, use chmod -R 755 Atutor-redux for this.

Thanks! The theme works now.

July 11, 2008 - 18:03 — eviking (not verified)

Thanks! The theme works now. Had to set the permissions manually, though.

Hi there. I've found a flaw

July 28, 2008 - 11:56 — Serhiy Kostyshyn

Hi there.

I've found a flaw in login protocol of ATutor, and fixing it with patch #0007 will, as a side effect, disable login in Redux.
Fortunately, it's easy to fix. You'll need to edit the file themes/Atutor-redux/login.tmpl.php to replace in JavaScript

document.form.form_password_hidden.value = hex_sha1(document.form.form_password.value);

with

document.form.form_password_hidden.value = hex_sha1(hex_sha1(document.form.form_password.value) + "<?php echo $_SESSION['token']; ?>");

Thanks! The theme has been

August 7, 2008 - 13:27 — Vegard A. Johansen

Thanks! The theme has been updated now, and will thus only work with ATutor 1.6.1 after patch #0007 has been installed!

Noticed a few minor issues

August 21, 2008 - 11:44 — Serhiy Kostyshyn

Noticed a few minor issues with the theme:

1. File include/header.tmpl.php includes non-existent (in a fresh system) scripts: togglebox.js, audio-player.js and flashembed.min.js.
It may be better to first check for the presence of respective modules like it's done on lines 13, 52 and 53 of themes/default/profile.tmpl.php .

2. core.css does not specify any formatting for the non-tag-specific "button" class, like those link-buttons on tools/test_intro.php page. As a result, they are displayed as ordinary links.
Rewriting the page as a form is an alternative solution, but that's up to the ATutor team.

3. custom-styles.css contains a typo: colons (":") are present on lines 9, 14, 27 and 32, causing error messages in browsers.

4. In login.tmpl.php quotes are missing around strings on lines 38 and 40:
"_AT(rl_or)" should be "_AT('rl_or')",
"_AT(password_reminder)" should be "_AT('password_reminder')".
PHP issues notices like:
Notice: Use of undefined constant rl_or - assumed 'rl_or' in /var/www/html/atutor161pl1/themes/redux/login.tmpl.php on line 38

Not much for such a large work, I'd say.
Thanks again for the cool theme! We're going to use it as a default (and, more likely, the only one) in our soon-to-be-upgraded installation.

Thanks a bundle! 1. have no

August 22, 2008 - 13:53 — Vegard A. Johansen

Thanks a bundle!

1. have no idea what the togglebox thing did, but it was probably present in the version Redux first was created from. it's removed with the rest of the files. the other files are for the mp3 and flv flash players, but should't be there by default. I don't know if jquery.js is a part of the default theme (even though it is a part of ATutor), but I left it there as jquery is cool and I will start learning more about it :)

2. thanks - I was wondering why that was, but hadn't investigated it! I've added the same styles to .button as to the other (actual) buttons. they don't look exactly the same as some link styles interfere, but they should really be rewritten as a form! if it should appear as a button, it should BE a button!

I remember I struggled quite a lot with all the different input styles when creating the theme. we should clean all this up in the future, and make all forms and form elements look the same..

3. what a strange bug on my side, anyways, fixed :)

4. thanks, fixed!

we are actually just about to start the process on redesigning, or adusting our design again, so there will either be a new theme or more changes in the Redux theme some time this year.

when you say you will use it as your default theme (which is cool!) I'm thinking that I will probably create a new one based on Redux rather than changing Redux..

I really don't understand why

August 26, 2008 - 10:24 — Serhiy Kostyshyn

I really don't understand why you are going to create a new theme. In fact, we did create a separate theme and named it Redux-T ("T" stands for "TSTU", our university). We have a lot of customization anyway.

One more tiny issue in case you have too much spare time: ;)

5. It appears that div.main-content-container inside a course doesn't end where it should, that is where "< !-- .main-content-container ends -- >" text is located.
It's evidenced by the screenshot on http://atutor.no/atutor/trinity_test/content/60/: OUTside a course the distance to the page frame (left and right) is 0 px, as supposed to be; INside a course it's 5 px -- exactly the padding specified for .main-content-container.
Seems to be related to the side menu.

you're probably right that I

August 26, 2008 - 11:38 — Vegard A. Johansen

you're probably right that I don't have to write a new one (or a derivative as I was thinking of).

the reason for doing it would be that the Redux theme is created to mimic the look of the default theme for ATutor 1.5, while the new one will probably have a quite different look and feel. in that case it's nice to keep them separate so those using Redux now don't suddenly get a whole new look and feel.

a different reason would be to start from scratch, using the default 1.6.1 as a basis, thus making sure the theme doesn't use any old template files for anything (as I'm pretty sure it doesn't anymore, but you never know).

on a side note, I believe most with this of the work will involve struggling with the side menu again, as I wish to be able to hide the side menu and at the same time avoid using absolute formatting in CSS. haven't seen anyone succeed here yet, but it should be possible :) the end result would be that you could use both flexible and fixed width on ATutor, say force it to be 800 px wide, set max-width, min-width etc..

thanks for the new bug report, will look at it soonish :)

Oh, now I see

August 30, 2008 - 09:40 — Serhiy Kostyshyn

Now, when you've explained, I think you better do create a new theme. Don't shoot me!
Really, you already have one very good, finished product, and if you derive from it you're going to have two of them. Twice as good as having one.

Besides, Redux's similarity to the 1.5 default might be the argument for those seeking for a more pleasant alternative to the 1.6 default. I guess this look&feel shouldn't be just discarded.

BTW, consider a tagline for marketing purposes, "From the creators of Redux! See a new, epic theme Whatever-the-Name". :D

there is definately need for

September 3, 2008 - 12:57 — Vegard A. Johansen

there is definately need for a way over-the-top epic theme name, and I haven't though of any good one yes, so please leave all your suggestions below! :)

Re: there is definately need for

September 3, 2008 - 14:43 — Serhiy Kostyshyn

Thinking a theme could be a "killer app"? Who knows.

No new ideas for now. More about functionality, but that's more to the "bare" ATutor, not themes.

we might be talking about

September 4, 2008 - 08:44 — Vegard A. Johansen

we might be talking about different things now, as I'm just curious for a new theme name suggestion :)

on your other question: a theme cannot be a killer app in itself, but I'm personally a very firm believer that the pure design of something is a very important feature of a killer app. it's not just a "coat of paint", "bells and whistles" or other non-importaint things that some developers seem to think, but rather something that can make or break an application or website.

I personally think the default theme falls short here. ATutor is a far better aplication than it's default theme suggests. Redux is IMO better, but not all the way there yet.

Oh well, I could talk a lot about this, but I wont :)

Re: we might be talking about

September 4, 2008 - 09:22 — Serhiy Kostyshyn

Sorry, you're right, I've overlooked the word "name". :)

Login again..?

September 5, 2008 - 20:38 — gorzan

Just downloaded a fresh copy of atutor from .ca and redux from .no, and it seems the login problem with redux persists.. FYI ;)

Re: Login again..?

September 7, 2008 - 08:09 — Serhiy Kostyshyn

Have you installed patch 0007? I think the 1.6.1 pl1 out there is in its original state, unpatched.

Side menu too long

September 8, 2008 - 13:01 — Serhiy Kostyshyn

One more visual imperfection: in courses where the side menu is long (has many items) and the page has little information, it often happens that the side menu stretches far lower then the page footer does.

See the picture here: http://atutor.no/atutor/trinity_test/content/61/ .
The height proportions are roughly the same in 100% scale.

re: Side menu too long

September 9, 2008 - 08:48 — Vegard A. Johansen

yup, I am aware of that and have spent hours trying to solve it but with no success.

it's a combination of many issues. it worked in the default theme at the time I made Redux, as the default theme used a table to split between the content and the side menu. the Redux theme uses CSS and DIVs, which simply behaves differently than tables.

also, many issues are due to the absolute positioning of the side menu, and last it's due to the fact that height: 100% (or, specifying height in percent in CSS) does not work in other browsers than Internet Explorer. I have also experimented a lot with display: table and display: table-cell but that has different issues in other browsers.

these days I'm working on the new theme (Hopper!) where I try a different approach, using jquery to show and hide the menu. so far it's looking quite good. if I get this to work I might add it to Redux too.

The sPacemaker

September 10, 2008 - 12:29 — Serhiy Kostyshyn

You know, in medicine, when conservative treatment fails to stabilize patient's heart rate, a pacemaker is often implanted.
When CSS alone doesn't make a side menu behave, here comes the sPacemaker! – a script that invisibly compensates for that by adding extra space to the page. ;)

Insert near the end of footer.inc.php (drop the PHP tags):

<?php
<script language="JavaScript" type="text/javascript">
// Fix a bug: side menu being longer that the main content
function adjust_content_height() {
    var content = document.getElementById('content');
    var menu    = document.getElementById('side-menu-container');

    if (content && menu && menu.offsetHeight > content.offsetHeight) {
        var footer;

        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            var e = divs[i];
            if (e.className == 'footer-container') {
                footer = e;
                break;
            }
        }
        if (footer != undefined) {
            footer.style.marginTop += menu.offsetHeight - (content.offsetHeight - footer.offsetHeight) + 'px';
        }
    }
}
adjust_content_height();
</script>
?>

BTW, if you assign an ID to your "footer-container" you'll be able to simplify the script by using getElementById to find it, like it's done for "content" and "menu", instead of the "for" loop.

Also you should add to the function toggleToc in atutor.js right before the '} else {' line:
adjust_content_height();
It will make the things work when a page was loaded with collapsed menu and then it was expanded.

Safety and side effects:
None detected in IE 6, Firefox 2. In Opera 9.51 only the course home page fails to resize. Found the cause to be in the CSS:
.announcement-single span.date { float: right; }
is, oddly, causing this bug.

Current status:
Just installed in our production system. Looks OK.

P.S. Good luck with creating Hopper. And don't sneeze!

very cool

September 12, 2008 - 12:36 — Vegard A. Johansen

thanks - I've installed the sPacemaker on my production server and it seems to work just fine so far! I'll have it up on this server too, and will include it in Redux in the future - just waiting for this server to start to behave properly again :)

the new theme will use jquery for the side menu instead. I believe I'm almost there with it now, which does all this in 10-15 lines of javascript, with no inline scripting, and allows for much simpler *and* more functional CSS as well!

Re: very cool

September 14, 2008 - 09:33 — Serhiy Kostyshyn

Great. Tell me if you're going to assign an ID to the footer so that I can post a refined version, with fixed algorithmic and stylistic issues.

Sure

September 14, 2008 - 11:55 — Vegard A. Johansen

I can change the class "footer-container" to be an id instead, and update the CSS accordingly - so if you post a refined version based on that we're pretty much ready to go! :)

Here you are

September 16, 2008 - 09:52 — Serhiy Kostyshyn

Then here's that version of the function. Shorter and better now. Everything else remains the same.

<?php
function adjust_content_height() {
    var content = document.getElementById('content');
    var menu    = document.getElementById('side-menu-container');
    var footer  = document.getElementById('footer-container');

    if (content && menu && footer) {
        var delta = menu.offsetHeight - (content.offsetHeight - footer.offsetHeight);
        if (delta > 0) {
            footer.style.marginTop += delta + 'px';
        }
    }
}
?>

updated

September 16, 2008 - 10:39 — Vegard A. Johansen

thanks, Redux theme is now updated with the new sPacemaker!

Bug: glossary terms in content

November 30, 2008 - 10:00 — Serhiy Kostyshyn

One more minor bug.
In Redux, tooltips for glossary terms in content aren't displayed on mouseover events. To fix that, the div#overDiv element has to be copied to redux/include/header.tmpl.php from default/include/header.tmpl.php .
I guess this will be valid for Hopper as well.

Mui exellente!

December 8, 2008 - 14:35 — Vegard A. Johansen

thanks Indie! I think I have noticed that bug before, but we're seldom using it so I haven't really investigated it further..

However, the same day you found this bug one instructor informed me of it aswell, so I would have to find the solution to it now, but you beat me to it! :)

Thanks - theme is updated with this fix!

(and yes, it was the same with Hopper)

overlib.js?

December 9, 2008 - 11:31 — Vegard A. Johansen

I'm still getting a few bugs with this, mostly in IE 6 and mostly with the Hopper theme.

but I belive this functionaltity is way overdue a rewrite..? this is handled by the overlib.js file, which I also believe only handles this small thing?

if so the file is almost 1300 lines of javascript, and copyright on that file is 1998 - 2002. I believe the same thing can be done today with about 20 lines of jquery, and be cross browser compatible..

if anyone can confirm that this is the only function overlib.js has, we'll probably try to rewrite this for our themes, and 1.6.3 default.

this is fixed now

January 27, 2009 - 10:28 — Vegard A. Johansen

BTW, the tooltip bug for glossary has been fixed with our jQuery replacement.

For those interested about the future of the Redux theme: We have now switched to the Hopper theme for our installs, and thus not using Redux actively ourselves.

I do not believe we will give out a public version of the Hopper theme very soon, as it's too much work right now to maintain both our custom version of it, and a community version.

I do however plan to beef up the Redux theme a bit, using many of the cooler things from Hopper in it, like the jQuery side menu, and some of the new UI changes we've done in the top bar! When that is done we'll also add the theme to the ATutor theme directory, so it can be installed automatically in 1.6.2 and up.

Re: this is fixed now

January 27, 2009 - 14:10 — Serhiy Kostyshyn

Looking forward for the updated Redux. However, we probably won't be considering any changes to the theme until the next summer upgrade.

Minor bug in course stats (Redux and Hopper)

March 8, 2009 - 13:38 — Serhiy Kostyshyn

In tools/course_stats.php , bars of the chart are aligned at the top, i.e. go downward from the baseline instead of the more usual (and intended) bottom alignment.

"Before and after" screenshots are here:
http://atutor.no/atutor/go.php/trinity_test/content.php?cid=75

This bug is caused by class td.graph that is defined in the script but doesn't exist in Redux's CSSs. In fact, it doesn't exist in the ATutor default theme either, but the bars are rendered correctly there.

The solution is obvious: add

td.graph {
  vertical-align: bottom;
}

to core.css.

_______________________________________________

Off-topic: there's also a bug in your customizations to ATutor. The multy-file uploader tool seems to be not working at least in Opera 9.63. After clicking on Browse Files button nothing happens and the error console contains:

JavaScript - http: //atutor.no/atutor/tools/filemanager/index.php
Event thread: click
Unhandled exception: "Invalid function name"

Will fixy!

March 13, 2009 - 10:30 — Vegard A. Johansen

hia Serhiy! thanks, I will fix that CSS in the next version of Redux and I will have a look at the multi-file uploader today. I had noticed myself but not gotten to it yet :)

does it work at all?

March 13, 2009 - 15:03 — Vegard A. Johansen

Hm.. I cannot get the multi-file uploader to work in the default theme, Fluid, Redux or Hopper, not on my own install nor at the demo server at atutor.ca (tried with Safari 4 beta and Firefox 3.1 beta)

..does it work at all on your system?

No answer

March 13, 2009 - 21:47 — Serhiy Kostyshyn

We're using 1.6.1, so can't say.
On the demo server it seems to work. You might want to check there under different themes, I had time only for Fluid.

Not getting it to work

March 17, 2009 - 11:29 — Vegard A. Johansen

I'm not getting ut to work on the official demo server either. Have tried with Firefox and Opera on several themes, including Fluid, and they all behave the same way: all looks good untill you click the "browse files" button when nothing happens.

Atutor.no