Module Mania

Dr Dzoe has it from a reliable source that several Firefox extensions cause performance problems with active Javascript and AJAX pages.  This includes popular developer extensions like Firebug.  The affected sites include AIMPages.

So, unless you like waiting for your pages to load, or unless you really need to debug AIMPages, Dr Dzoe recommends you disable Firebug and other extensions while browing AIMPages.

|  Add to del.icio.us |  digg this

A new release of the core AIMPages publisher infrastructure went into production this week, and it fixes several of Dr Dzoe's most hated bugs.

Chief among these are the dreaded third-column bug that Dr Dzoe previously discussed.  This bug caused some pages to have their third column drop down the page below the first or second column, but only on Internet Explorer.  Pretty annoying.

The AIMPages team has fixed it.  But there's a catch: you have to republish your profile for the fix to take place.  Just go into edit and hit Publisher and it now works.  (The team is working on a fix that will retroactively apply to existing profiles.)

But that's not all!  With this week's release, you also get a fix to an annoying Pictures module bug.  With that, when you saved changes to the module, the edit panel would hang out there, waiting for you to hit the little x in the corner.  Also annoying.

But here also, you have to do a little work to get the fix.  In this case, delete all pictures modules from your page, publish the page, re-edit the page, and add the pictures module back.  You'll have to configure the module again, but you won't have to upload the pictures.  They will be there, waiting for you in the backend.  As a special bonus, when you have updated your pictures module, your page will be a little quicker to display.

But even that's not all!  You won't see any more ugly error messages when browsing pages.  And there's a whole host of other stability fixes.  So rush right out and get the new Publisher release!  Special price, this week only, free for the first billion customers!

|  Add to del.icio.us |  digg this

There's one last secret to styling the page, and this one is definitely for experts.

Modules themselves can make changes to the page style.  So, if you are into HTML or Javascript programming, you can create a module that does just about any kind of magic on the page.  Just visit http://iamalpha.com for all the details on creating a module - and drop Dr Dzoe a comment when you've created one - I'd love to check it out.

But happily, even if you're not quite up on the intricacies of module-writing, you can use the work of others.  Dr Dzoe knows of three modules that change the look and feel of the page.  (And, in fact, Dr Dzoe wrote two of these, so he is particularly fond of them.)  These are all in the Under Construction category.  They are:

- BackgroundManiac: Dr Dzoe's very first module.  This lets you set up your page so that the background flips between different images or colors.  One of Dr Dzoe's best friends has put this to good use at http://aimpages.com/jdzik.

- ForegroundFader: Dr Dzoe wrote this one at the request of his wife, who never did get around to using it.  With this module, you can cause the foreground of any module on the page to fade out, revealing only the background image.  The foreground reappears when the viewer mouses over the module.  This is used somewhere on Dr Dzoe's page (http://aimpages.com/drdzoe) - can you find it?

- title-changer: Dr Dzoe didn't write this one, but one of his friends did, the great Kevin Lawver, world-expert in modules.  In creating a page, you can see that most modules let you change their title.  But most is not all.  Sometimes you want to change the title of a module that doesn't support it.  Enter title-changer.  It lets you change the title of any module on the page, whether that module allows it directly or not.

That's all the special-effects styling-modules that Dr Dzoe knows of.  If you know any others, or create one yourself, send a note! 

|  Add to del.icio.us |  digg this

The last piece of the page-styling puzzle is styling modules.  You can set the style for an individual module - even set a special background image just for that module.  It's easy, and the effect can be pretty darn neat.

Dr Dzoe is acquainted with one young lady who has made good use of this technique on her page.  Click on http://www.aimpages.com/rezogrl2000/profile.html and you'll see that rezogrl2000 has set a different background image on almost every module.  Looks neat, doesn't it?

So how did she do it?  Well, it's pretty simple, really.  Just edit your page, position your mouse over a module, and select "Style".  The style box pops up, and you've got all sorts of options.  Set your fonts, set your border, set your background colors!  And all will affect only the module that you're on.

Dr Dzoe's favorite module style setting is the background image.  Just go to that tab, click an image, and hit "Save."  Voila - you're module now has its own background!

Of course, to be really cool you need to upload your own image.  When you've got the background image panel open, click on "Upload image" and you'll be able to upload an image from your desktop. Click on that image and it becomes the background for your module.  That's what rezogrl2000 did on her page, and doesn't it look great?

One warning: you need to be careful about uploading too large an image.  If you've just gotten a new digital camera, chances are that its pictures are awfully big - multi-mega-pixels are great for a lot of things, but they do not make for great background images - only a small part of the image will be visible in the background, and your page load time will be sloooooow from downloading that large image.  Just scale the image down using your favorite picture editor.  (Dr Dzoe is partial to Photoshop, but there's plenty of good choices out there.)

And oh - Dr Dzoe uses a background image on one of the modules on his page as well.  Look around and see if you can guess which one it is - maybe you can even find the secret message...

|  Add to del.icio.us |  digg this

Check out this profile: http://www.aimpages.com/artgrrlcathy/profile.html

This is just about the best profile that Dr Dzoe has seen - and Dr Dzoe looks at a lot of profiles.  (A couple thousand at least since AIMPages launched.)

So what makes this profile so great?  It's got a really nice, clean design.  There isn't a lot of text there, but what is there is clever and well-written.  The pictures are attractive, and the presentation (with the spiral notebook) is even better.  Put it all together and you have a really nice looking profile.

But... (and isn't there always a but?)

If you look at it using Internet Explorer or any of the AOL clients (which all use Internet Explorer under the covers), you will encounter an unfortunate AIMPages bug.  That is the third-column-wrap issue.  Some profiles, and some themes on some profiles, cause the third column of the page to drop down below the first column in Internet Explorer.  Dr Dzoe has it from a reliable source that AOL is working hard to fix this bug, and the fix will be out in the wild before too long.  But as of now, it is annoying.

Do you want to avoid third column wrap in the meanwhile?  Here's some suggestions:

- If you are viewing other peoples' profiles, about your only option is to use Firefox.  Which is better than IE anyway - why aren't you already using it?  (Go to http://www.mozilla.com/firefox/ to get Firefox.)

- If you want to remove third-column-wrap on your profile, in most cases it is caused by the theme.  Some themes have bugs that cause third-column wrap.  Try another theme and see if it goes away.  (Unfortunately, this isn't foolproof - it wouldn't help Art Grrl, for example.  But it may help.)

|  Add to del.icio.us |  digg this

Check out this profile: http://www.aimpages.com/badboybx130/profile.html.  Scroll down the page until you see the pictures module.  Pretty neat effect, isn't it?

How does he do that, you ask?  Well, as Dr Dzoe is more curious than any cat, he went peering through the page's HTML to find out.

BadBoyBx130 set an animated GIF as the background image of his module.  (Yeah, I know - I haven't covered how to set background images on modules yet.  That's coming soon - but Bad Boy BX didn't need to be told.)  His background image is the following:

See how it rotates?  Want to do something like that yourself?  Get a friendly computer image geek to help you out - it's not hard with the right software.

Next, Bad Boy BX set a background color of red, to set the color as he wants it.  (Further up, in the how-to-build module, he used the same background image.  Only there, he set the background color to green.)  That combines with the picture module's built-in scrolling pictures effect to make it look like the pictures are rolling across on top of the medallions.  Which is exceedingly cool.

If you like it, go to Bad Boy BX's profile and leave him a nice comment.  Tell him that Dr Dzoe sent you!

|  Add to del.icio.us |  digg this

So you've set a theme, but you've started looking around at other pages, and you've found that a bunch of them use the same theme.  What are you to do?

If you are artistically inclined, Dr Dzoe recommends that you set your own style.  This is easy.  In page edit mode, hit "Style your page."  The theme panel will drop down.  From there, hit "Edit theme."  The edit theme panel will slide over (love that slide!).  From there, you'll be able to set fonts, colors, and borders.  Even better, you'll be able to set a background image - either choose one of the presets or, even better, upload your own.

Want to see this in action?  Look at http://aimpages.com/shukuchiing.  Shukuchiing has uploaded one of her own drawings as her background image.  Looks pretty neat, doesn't it?  And you won't see it on anyone else's profile!

But if you do upload a picture from your camera, scale it down to something reasonable.  Multi-megapixel digital cameras take pictures much bigger than a web page.  For performance reasons, you're better off scaling it down to something on the order of 1200 pixels wide.  (Yeah yeah, I know - we should do that automatically for you.  We're working on it, and it may be done by the time you read this.  But for now, just use your favorite image editing program and do it yourself!)

|  Add to del.icio.us |  digg this

Nothing makes for a great looking page like a great style.  And it's easy - when you've got your page in edit mode, you just click "Style your Page" and you're off and running.

The easiest way to fancy up your profile is to pick a theme.  This sets the fonts, background images, and text color.  There's lots to choose from - just pick a category, click on one of the themes, and see how your page looks.  If you don't like it, don't worry - you can pick another one just as easily.

(Dr Dzoe chose the rich-looksharp theme from the Designer themes category.  But there's plenty of other great ones.  Just don't settle on the first one that comes up - where's the fun in that?)

(And oh - the default theme is something called "brown-navigational."  So if you want to go back to the default, now you know what to look for.  Though frankly, I don't see why you'd want to.  It's an ugly theme.  The AIMPage designers tell us that brown is the new black.  Personally, Dr Dzoe thinks that brown is the same old brown, and the brown-navigational not even a particularly nice brown.  But they don't pay me for my fashion sense - Dr Dzoe's wife is the one with color sense in his family - so what do I know?)

If you really want to get particular, though, you have to set your own fonts, background colors, or background images.  That's not hard, but it will have to wait until my next entry...

|  Add to del.icio.us |  digg this

Have you noticed pictures of AIMPages people on other pages, and you want to put them in your module?  Then you want access to the Minipic.

The Minipic, as anyone who has created a page will know, is the picture of the page owner that appears in the Minipic module.  But it's more than just a picture.  It's a picture that is available for use anywhere - not only within AIMPages.

Suppose you want to create a module that displays minipics of other AIMPage users.  Or suppose you want to put your minipic on some other website.  That's easy.  The format for the minipic image URL is as follows:

             http://aimpages.com/SCREENNAME/.aim/aimface.SIZE.jpg

in which:

SCREENNAME is the normalized screenname of the person whose picture you want.  (A normalized screenname is an AIM screenname with the spaces removed and converted to lowercase.)

SIZE is the maximum size of a dimension of the image in pixels.  It can be 140, 75, or 40.

For example, the following are the various versions of Dr Dzoe's minipic:

http://aimpages.com/drdzoe/.aim/aimface.140.jpg

http://aimpages.com/drdzoe/.aim/aimface.75.jpg

http://aimpages.com/drdzoe/.aim/aimface.40.jpg

One thing to note: minipics are not guaranteed to be square.  In all cases, the size is the maximum dimension: if you ask for a 75 pixel minipic and the image is not square, it will be either 75 pixels wide or tall, and the other dimension will be smaller.  To display the picture correctly, you need to use CSS magic to set the dimensions of the panel in which it appears.  How to do that magic will be subject of another post.

|  Add to del.icio.us |  digg this