Home > Dokkeos, English, Graphics, Techie > Changing Dokeos style, #2

Changing Dokeos style, #2

A few weeks ago, I explained how to change the Dokeos footer to make it “float”. Today, in the context of an indirect contract with the Ministry of Education in Peru, I have to change the style a little bit more.

The idea is to [1] have a left bar showing large tools icons in the course homepage, and [2] have an alternative portal homepage for users, showing an introductory screen of the main general tools. This must all work on a 800×600 screen (which is a real challenge).

[1] Left toolbar showing course tools

This is not as tricky as it sounds (although it’s very close to it). There is a set of options in the administration panel that allow us to show a floating menu of short links to tools. It is recommended to use a style based on “Public Admin” to do that, as this is now the default for Dokeos, it is up-to-date and it works well with the feature we’re about to use.

Although we are basing this on the “Public Admin” style, it is important to note that it would be smart to actually start from “Dokeos Classic” instead, as this style is better suited for 800×600 display (Public Admin is, in fact, more suited for 1024×768 or larger). Nevertheless, in the context of this first challenge (left tools menu), it’s more easily explained with Public Admin.

Let’s first activate this menu:

Go to Portal administration -> Dokeos configuration settings -> Course, and look for the option “Display course navigation menu”. Change it to “Icons and text”.

Now go inside a course. Hoooo, a nice menu has appeared on the right.

OK, so we want this menu on the left instead… Lucky us, there is already a bunch of CSS directives to move this menu from right to left inside the main/css/public_admin/default.css style. Look for “#toolnav” and the following commented code. Comment the first part, uncomment the second, save and reload. Now this *should* have moved the menu to the left (if not, take a look at the following code, this should do it).

#centerwrap {
width: 100%;
/*  float: right; */
/*width: 100%;*/
/*margin-right: -95%;*/
/* margin-left: -95%;*/
/* this needs to be less than 100% for Moz/Mac which thinks
it’s empty otherwise. The difference is made up by putting a
negative left margin on the left float:
Note IE/Mac doesn’t like this method ~ it wants the 100% so it can
be fed in using IE only CSS below becasue IE/Win also works with the 100% method.
/* — course navigation menu as a definition list  — */
float: left;
float: left;
margin-right: 15px;
width: 154px;
#toolnavbox {
margin: 0 0 0 10px;
padding: 0;
/*float: left;*/
border: 1px solid #f0f0f0;
#toolnavbox dl {
width: 150px;
margin: 0 auto;
padding: 0;
background: transparent;
font-size: 12px;
text-align: center;
#toolnavbox dt {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
text-align: center;
color: #000;
border-bottom: 1px solid #fff;
background: transparent;
#toolnavbox dd {
margin: 0;
padding: 0;
color: #009;
text-align: left;
border-bottom:1px solid #fff;
background: #E5EDF9;
min-height: 35px;
padding: 10px 0px 10px 10px;
#toolnav img {
float: left;
width: 25px;
height: 25px;
margin: 0 4px 0 0;
#toolnavlist a, #toolnavlist a:link {
background: #E5EDF9;
/*color: #dcdcdc;*/
color: #333333;
padding: 1px 1px 0px 2px;
margin: 0 5px 0px 0;
text-decoration: none;
display: block;
#toolnavlist a:hover {
background: #fff;
/*color: #dcdcdc;*/
color: #333333;
#toolnavlist a#here {
background: #fff;
/*color: #dcdcdc;*/
color: #333333;

See the #swap_menu_link over there? Well, there is a small missing feature in Dokeos 1.8.5, whereby the swap_menu_link item has a style hard-coded in a script. It is fixed in 1.8.6, but if you want to fix it in 1.8.5, just edit main/inc/tool_navigation_menu.inc.php and remove the “style” attribute from the declaration of the element with id=”swap_menu_link”.

That’s it for a left menu (you might get alignment problems in some cases, but I leave the little details for you to fix following your taste).

[2] Different portal homepage for logged-in users

This is also a littlebit less tricky than it sounds (although some improvements might be *very* tricky to add).

The idea is that we don’t want to get rid of user_portal.php, because it serves us well, but we would like to add a page to which the user will be directed when he logs in. This can be done through the very useful configuration variable “page_after_login”, which you can select in Portal administration -> Dokeos configuration settings -> Platform, but which only offers two possibilities by default: “Portal homepage” and “My courses”. We want to add one.

First let’s make a copy of user_portal.php and call it “my_homepage.php”. Let’s change some text in there to show that we are actually viewing the new page when we log in.

Second, let’s add this page as a choice in the portal administration panel. This can be done by adding a row to the settings_options table:

INSERT INTO settings_options (variable, value, display_text) VALUES (‘page_after_login’,’my_homepage.php’,’Custom homepage’);

Once this is inserted, and if we select this option in the administration panel, the page will appear when anyone logs in.

This is all very well, but the problem is that this page isn’t referenced anywhere (no link to it), so users won’t be able to get there after they log-in and click another link.

To make it available, you either have to provide a link to it on your portal’s homepage, or to add a new tab to the Dokeos navigation header. This however, is tricky, and I won’t cover it this time.

[3] Making the style fit to 800×600

There’s no secret recipe here. You have to try it and fix what’s to big to fit on screen. To help you, you can install the Web Developer extension for Firefox, which allows you to pick any dimension and resize your window to show you what it would look like on a 800×600 screen.

Although it may sound kind of “old fashion” to use 800×600 nowadays, I must admit that for very large administrations, it’s a nice feature to have as a low resolution also means larger fonts on screen, so you don’t annoy people with bad sight.

Categories: Dokkeos, English, Graphics, Techie Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: