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

Allegro.cc themes

From Allegro Wiki
Revision as of 02:51, March 25, 2009 by Matthew Leverton (talk | contribs) (JavaScript)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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: Allegro.cc css tips

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: Allegro.cc custom JavaScript.