Apr
12

Creating Aim 6.0 Skins! Tips and Tricks!

By WBMike  //  AOL, Skinning Aim, Techies Only  //  27 Comments  // 

Finally, the ability to skin Aim 6.8 is here. After months of skinning AIM, here are some tips and tricks to get you started on creating your own AIM skin. After you have created your skin you’ll be able to save it and it will create its own folder at

C:\Program Files\AIM6\services\imApp\ver6_8_10_1\theme\ This blog entry will have additional tips and tricks dynamically added once its been found.

= Download Aim 6 Skins =

Files Required to create a Theme
There are 3 Main Files that are used to create the theme.

C:\Program Files\AIM6\services\imapp\ver6_8_10_1\theme\**theme**
themeBrushes.box

C:\Program Files\AIM6\services\imapp\ver6_8_10_1\theme
themes.box

C:\Program Files\AIM6\services\imapp\ver6_8_10_1\content\bl
blGadgets.box

themeBrushes.box controls the colors and images used on the skin.
themes.box must be edited to add a new theme. This will be read by blgadgets.box
blgadgets.box adds the skin to the color picker.

Getting Started

You need to know a few things before you can create a skin

  • Be knowledgeable about basic html
  • Understand how to pick colors
  • How to open files in notepad

Be knowledgeable about Basic HTML

Skins are set up in XML language and is read by AIM. You do not need to know how to write XML as all you’ll be doing is editing and replacing colors already used by the skin. Also you need to know that tags must be properly formatted in order for the skin to work. One mistake in formatting will revert the skin the default and orange theme.

Understand how to pick colors

You need to visualize colors along a gradient.  A gradient is where one color blends into another color. AIM will automatically blend two colors based on its positioning. You can read more about colors and gradients in our color article.

How to open files in notepad

The easiest way to open a file in notepad is to drag the file from windows explorer into a blank notepad page. You can find notepad program in your start menu under accessories. If you have Windows Vista, type in notepad to find the program. When you drag the file into notepad you will be able to see and make changes to any color you want. You’ll be able to create your own unique skin and add it into your color chooser.

Editing a Skin

Editing a skin is very easy, in fact if you read the color tutorial you’ll have an even easier time. Skins featured on this site feature almost every customizable area in AIM. The best way to get started is to edit the themes found on the AIM Skin category.

  • Use Notepad to edit a themebrushes.box file
  • Add pictures and graphics with transparent PNGs

Using Notepad for themebrushes.box

Once you open a skin file in notepad. You can change the attributes by editing the colors that appear. In the skin you will see several IDs and gradients. An ID tells which part of the skin you are editing. Most of the names are straight forward. Lets take  a look at some IDs.

<solidBrush id=”brush.bl.modulesTitleColor” fill=”#d0d0d0″ />

id= contains the area of the skin that is being edited. The bolded part reveals that you will be editing the title color for the modules section. In this case modules refer to the plugins at the bottom. When you click on a plugin, the name of the plugin will be displayed next to its icon. The color of this name will be controlled by that by using the color #d0d0d0. If you change the color of #d0d0d0 to #FFFFFF, the plugin’s title will become the color white.

Add picture and graphics

Adding graphics to a skin can be done in many places. The buddy list can support 1 new graphic location which will be the top left corner of the buddy list. In other places you can use graphics to replace images in other areas. Most of these images are already featured in skins on this site. Lets take a look at an example

<bitmap id=”bmp.bl.buddyInfo” src=”images/red_getInfo.png”/>

In this skin, the bitmap that will be changed is shown in bold. The image is stored in an image folder in a subdirectory below a skin. Using a graphics editing program like Photoshop, you can create a transparent PNG image and place it within the image folder. All you would need to do is point to the file name of that image. If you made an image which name was example.png, that entry would look like this.

<bitmap id=”bmp.bl.buddyInfo” src=”images/example.png”/>

Remember that images should be stored in the image folder to make installing a skin simpler. If you replace any image, please try putting all image replacements in the image folder beneath your theme’s directory. If you overwrite an image in its original location outside of your theme’s folder, your new image will be applied to all skins, which may not be visually appealing to those who frequently switch to another color other than your skin.

How to Install A Skin

Once you have an original name for your skin and it has its own original and unique folder name, you will need to edit two files additional files in order to install the skin. The first file you need to edit is themes.box. You can find the location of themes.box by scrolling up to the top of this post.

What to do in themes.box

themes.box contains all locations of where the themes are installed. To add your own theme, copy and paste a theme that starts as <theme> and ends with </theme>. For Example:

    <theme id=”gold”>
        <themeLibrary src=”box://imApp/theme/gold/themeBrushes.box”/>
    </theme>

The theme id is gold, and gold’s location is in a directory called gold, with a file in that directory called themeBrushes.box. If we had a theme called example, and themeBrushes was under example’s directory, the location would look like this.

<theme id=”example“>
<themeLibrary src=”box://imApp/theme/example/themeBrushes.box”/>
</theme>

Pay attention to the theme id. You will need this when you edit blgadgets.box. Blgadgets.box will insert your theme into the color chooser. So please make sure you spell your theme id correctly or else your theme will not show up.

What to do in blgadgets.box

Scroll down all the way near the bottom. You will see that each theme is listed. Please maximize your notepad’s window for better readability.

Each skin has 5 to 6 lines starting off with <box:aolImageButton  and ends off with Command();”/>. Take these 5 or 6 lines and copy them. Paste  these 5 to 6 lines on a line directly below command. Edit each line to point directly to your skin.

icon= should point to where your skin’s icon is located at the image folder
tooltip= should be the name of the skin between quotations
themeid= should be the name of your theme id that you made in theme.box.
statsID= is only for AOL, please delete this line
oncommand should be the last line before the next skin location starts.

How to Uninstall A Skin.

Locate this Directory C:\Program Files\AIM6\services\imapp\ver6_8_10_1\content\bl
Open the blgadgets.box file in Notepad

<box:aolImageButton style=”colorPickerItem” selectablePopupChild=”true” focusMode=”ignore” collapsed=”false”
icon=”box://imApp/theme/bumpx/images/icon_selector.png” s:padding=”1 0″
themeId=”bumpx”
on:command=”gadget:onItemCommand();”/>

Delete the whole entry for your theme’s name and it will now dissappear from the color picker.

Visitors also Read:

27 Comments to “Creating Aim 6.0 Skins! Tips and Tricks!”

  • ?

  • [...] Read More About Creating Themes= Download the 6.1 Theme == Download the 6.2 Theme = [...]

  • Is it possible to change the colors of screen names in IM? For example, my name, and my friends name, show up as blue and red… though that doesn’t match your themes at all, and I had peeked through the coding, but couldn’t figure out what to change. -.-;

  • Hi i didnt quite get it… and you e-mail me a SUPER defined tutorial? Lordofblake@aim.com. I would rllly apreciate it

  • Hi i didnt quite get it… and you e-mail me a SUPER defined tutorial? Lordofblake@aim.com. I would rllly apreciate it. Thank you

  • A super defined tutorial will be coming sometime in the next few months.

  • Okay. How much u wanna bet that it will be huge hit. And btw most of the bumpx skins work for 6.8 mine works fine

  • The Bumpx skins were just updated for Aim 6.8 and they feature some new minor details.

  • okay, can u still send me a super detailed tutorial? I dont want to sound annyoning, but a few months is a while.

  • It will take a long time to make a super defined tutorial. The best thing you can do in the meantime is look through my files with notepad.

  • okay. But, i actully figured most of it out on my own. But, can i have your IM screen name for questions that may arise

  • i have a question, i got everything done, but the only problem i have is when i go to select my skin in the color picker, it gets selected, but its just the regular orange and white skin? WTF!!!!!!!! plz help

    lordofblake@aim.com

  • That means you have some kind of a mistake within your brushes file. Every time you edit your brushes file, make sure your able to undo changes just in case you leave a tag open, or forget to put the colors in the right format.

    Reasons why your theme can fail can be:
    1. You left a tag open.

    ….titleBarEndColor” fill=”#111111″ /
    Just like HTML, you need to close your tags. The above example forgot the “>” symbol at the end of the slash.

    2. You inserted color in the wrong format

    ….titleBarEndColor” fill=”111111″ />

    Just like HTML, you need to insert a pound sign for every single color you use. The above example is missing the # sign before 111111. The theme can also fail if you put in less than 6 digits for the colors.

    3. You inserted tags that cannot be read by AIM.

    ….titleBarEndColor” fill=”#111111″ Hello There! />
    Inserting things that don’t belong in the brushes file such as “Hello There” or any other thing you can come up with, can make the theme fail also.

    Brush files won’t fail for deprecated ids (these are Ids that no longer work in AIM) and they won’t fail if you point to an image that does not exist.

  • i used greg’s themer tool…tho like a moron, i used it for 6.8…I’m trying it for 6.1 now. Thanks for the help!!!

  • tried…failed. Now in 6.1, it doesnt eve get selected

  • tried…failed. Now in 6.1, it doesnt even get selected

  • My only advice is to edit the skins I made.

  • I wrote a quick guide on what to do . Hope it helps.

  • WBmike is the coolest person ever!!! Thank you very much!!!!!

  • I have one more question. How did you make the sign on button red in Bumpx red. I cant find the code where the color is.

  • nevermind that question. figured it out

  • I do have one more question. My theme is complete except for one aspect. The stupid fugly orange thats around the status bar message. How do i get rid of it? here is a picture so you know what im talking about.

    http://i218.photobucket.com/albums/cc49/lordofblake/Untitled-1copy.jpg

  • “gradient.bl.away.background”
    controls the orange at top

    “gradient.bl.away.background.away”
    controls that area when you are away.

    Examples of these ids are included at all skins here on the site.

  • My skin is at long last complete! Thank you WBmike for answering all my n00bish questions. Here is the completed result.

    http://i218.photobucket.com/albums/cc49/lordofblake/AIMwindow.jpg

    http://i218.photobucket.com/albums/cc49/lordofblake/buddylist.jpg

  • Thanks, if you make any more skins I’d like to see some screenshots.

  • No problem… any chance you would like to host my skin on your site? I only have a few more things to finish up.

  • hey do you think you can explain how to get the black and red skin because im really confused of how to get it.

Leave a comment

♦ ♦ ♦

Twitter

Sponsors