Home > Development, Dokkeos, English > Howto make the Dokeos footer float

Howto make the Dokeos footer float

I don’t know about you, but I really don’t like the Dokeos footer moving around the screen when there’s less content.

Luckily, CSS offer an easy way to change this. Let’s say I want to update the css/dokeos_classic/ theme.

The rule, as always, is to make a copy of the directory that is the closest to what I want, and only work on a copy, so I’m going to do that. Note that in the following example, I’m using vim as a text editor, which might seem a bit too difficult for some of you, but it has the added interest of letting me edit text files directly on my server.

~$ cd dokeos/main/css/

~$ cp -r dokeos_classic dokeos_classic_floating_footer

~$ cd dokeos_classic_floating_footer/

~$ vim default.css

Now I’m inside default.css, I’m searching for the #footer element (around line 360 in Dokeos 1.8.5).

I want to change it as follows (the most important there being position: fixed; )

#footer {
height: 1.5em;
padding-top: 0.2em;
border-top: 1px solid #4171B5;
background-color: #E5EDF9;
font-size: 12px;
padding-left: 1em;
padding-right: 1em;

If I stop here, and try it in my browser (on a long page, otherwise the difference is not obvious), I can see that it already works, but that maybe some of the page’s text is hidden under the footer.

That’s because the outer-frame element in which the footer is included should define a margin of the height of the footer. This can be done by adding the property margin-bottom: 1.5em; as follows:

#outerframe {
position: relative; /* do not remove, fixes a bug in IE */
border: 1px solid #fff;
background-color: #fff;
margin-bottom: 1.5em;

That’s it (for now). It’s only been tested under Firefox 2 so far, so make sure you try it out with other browsers before “rolling it out” on your production server.

I’d like to find a way to always stick it at the bottom of the page but without floating effect… just leave it be static at the bottom of the page, but also when there’s only like half-a-screen of text, but I haven’t found a way to do that just yet.

2009-01-05 update:

Apparently, *one* way of doing this is done here: http://www.uservoice.com/session/new

  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: