The Allegro Wiki is migrating to github at

Difference between revisions of " themes"

From Allegro Wiki
Jump to: navigation, search
m (fixing cat)
m (AllegroCcThemes moved to themes: Twiki -> MediaWiki title format)
(No difference)

Revision as of 18:00, July 15, 2007 Themes


The website allows anyone to create and use his or her own theme. A theme is a set of custom CSS, JS, and image files that let can drastically alter the look of the site. If you only want to change a few things (like a color here or there), creating your own theme is overkill. For minor changes, just use the CSS textbox that is provided.

Getting Started

The first thing to do is download the default template. It might not be completely up-to-date with the live site, but that's not very important.

After uncompressing the zip file, you will see a directory structure like:

  • /button
  • /css
  • /icon
  • /image
  • /js

The button, icon, and image folders all contain images that you can alter. The css and js folders obviously respectively contain CSS and JavaScript.

After you have made the changes, upload all the files to your website. Create a base folder for your theme and then upload all the folders as sub folders. Under the / Control Center / Custom CSS & JS section, enter the URL to your theme folder. After saving the changes, you should see your new theme.


The images included in the file should be every one that is modifiable, but it's possible that it could be missing some. In the event that an image is missing, just switch back to the default theme to see what the name should be.

The first time a new image is encountered, will temporarily cache its dimensions. If it is resized, then it might incorrectly appear in the browser. To work around this, simply rename the image if it has been resized.

CSS (via img[src="..."] or img[alt="..."]) must be used to change any images that are not themed.


When using a theme, the standard CSS files are no longer used. Instead, your theme's css/global.css will be called, followed by css/[folder].css. The [folder] will be the base folder of whichever page is currently being viewed. So when /forums/recent is viewed, css/forums.css will also be loaded after your global CSS file.

Note that after your theme's CSS files are loaded, then the user's custom CSS will still be loaded.

For help on changing CSS, see: AllegroCcCssTips


One JavaScript file is automatically loaded with each theme: js/global.js. While it's not necessary to use JavaScript, it might be helpful to making some tweaks that are impossible with CSS. Keep in mind that the JavaScript basically runs after the page is loaded, so major modifications may result in undesirable drawing effects.

For user supplied tips and examples on JS with, see: AllegroCcJsTips. For more information regarding some helpful JS functions, continue on.

Classes and Global Functions

There are a few classes available to custom JavaScript files. It is recommended that you make use of them when it makes sense.

doc.add_onLoad Function

To register an onload event, use the function doc.add_onLoad. Do not directly modify any onload events like body.onload, because basic functionality might be broken.

<highlightSyntax language="javascript">function myOnLoadFunction() {

 // this will be called after the DOM is loaded


doc.add_onLoad(myOnLoadFunction); </highlightSyntax>

The specified function will be called as soon as the browser gives notification that the DOM has loaded. This may be before all images have loaded, but it will be after all the HTML is available.

xEvent Class

There are a lot of differences between how browsers handle events. To unify things, use the xEvent class. It should be set up like this:

<highlightSyntax language="javascript">// myEvent might be something like an onClick for an image function myEvent(event) {

 var e = new xEvent(event);

} </highlightSyntax>

You must name the parameter event for full compatibility. The xEvent class exposes the following:

  • getObject() - the object that triggered the event
  • getX(), getY() - the x,y coordinates
  • keyASCII() - the letter pressed. It returns 'A', not 65.
  • getKeyCode() - the ASCII code of the key pressed
  • keyLeft, keyUp, keyRight, keyDown - returns true or false depending if they key is pressed
  • shiftKey, ctrlKey, altKey - returns true or false depending if the modifier is pressed

Absolute Positions

If you want to know the absolute position of an HTML element, use getAbsX() and getAbsY():

<highlightSyntax language="javascript">var e = document.getElementById('foo'); alert(getAbsX(e)); </highlightSyntax>