The Allegro Wiki is migrating to github at https://github.com/liballeg/allegro_wiki/wiki

Difference between revisions of "Allegro.cc themes"

From Allegro Wiki
Jump to: navigation, search
(twiki import)
(twiki import)
Line 51: Line 51:
 
====doc.add_onLoad Function====
 
====doc.add_onLoad Function====
  
To register an onload event, use the function add_DOM_onLoad. Do not directly modify any onload events like ''body.onload'', because basic functionality might be broken.
+
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.
  
 
<pre>
 
<pre>

Revision as of 05:36, December 23, 2006

Allegro.cc Themes

Overview

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.

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.

http://www.allegro.cc/theme/default.zip

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 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.

Images

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.

CSS

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: AllegroCcCssTips

JavaScript

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 Allegro.cc, see: AllegroCcJsTips. For more information regarding some helpful Allegro.cc JS functions, continue on.

Classes and Global Functions

There are a few Allegro.cc 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.

function myOnLoadFunction()
{
  // this will be called after the DOM is loaded
};

doc.add_onLoad(myOnLoadFunction);

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:

// myEvent might be something like an onClick for an image
function myEvent(event)
{
  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

Absolute Positions

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

var e = document.getElementById('foo');
alert(getAbsX(e));