The Allegro Wiki is migrating to github at https://github.com/liballeg/allegro_wiki/wiki
The allegro.cc 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.
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:
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 Allegro.cc / 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 default.zip 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, Allegro.cc 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 Allegro.cc 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: Allegro.cc css tips
Classes and Global Functions
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.
// this will be called after the DOM is loaded
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.
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:
var e = new xEvent(event);
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
If you want to know the absolute position of an HTML element, use getAbsX() and getAbsY():