I often get many questions on how to extract files from a zip file. This process is not too difficult but people seem very confused over the file itself. This tutorial will show you how to extract a file to any directory. The second part of the tutorial will apply these steps to skins hosted on this site.

This tutorial is made through Windows XP, if you are using another Operating System such as Windows Vista, certain names and functions will differ. Please follow the general idea of this tutorial to get a handle on zip files.

Page 2: Installing a skin

]]> http://bumped.org/tek/2009/07/27/how-to-extract-files-and-install-a-skin/feed/ 19 http://bumped.org/tek/2008/03/17/aim-68-beta-2/ http://bumped.org/tek/2008/03/17/aim-68-beta-2/#comments Mon, 17 Mar 2008 23:53:29 +0000 WBMike http://bumped.org/tek/2008/03/17/aim-68-beta-2/ Additional Plugins 

Aim 6.8 Beta 2, has launched with some reorganized features moved into different locations. Most notably, AOL Music, AIM Call Out, AOL Hot Searches, and AIM Mobile has been moved into a new My Plugins button. The My Plugins feature will allow developers and users to pick and choose what extra features they want with AIM. You are no longer tied to the four buttons at the bottom of the buddy list since now you can disable them and pick only the ones you like.

Two additional plugins were added called Notes and Stock Quotes. Notes allows you to write notes within your buddy list. Stock quotes just show Stocks within a small window. This is not a full featured Stock Ticker like many have been requesting but its a start.

Skinning Additions

If you’ve been skinning Aim, there has been some new functions added

    <linearGradientBrush id=”gradient.uiPluginPopup”>

        <rotateTransform center=”50% 50%” angle=”-90″/>

        <gradientStops>

            <gradientStop offset=”0%” color=”#FFFFFF”/>

            <gradientStop offset=”100%” color=”#EFFAFF”/>

        </gradientStops>

    </linearGradientBrush>

   <pen id=”pen.uiPluginPopup.border” color=”#000000″ WIDTH=”1″ /> 

gradient.uiPluginPopup, which was a pain to find, controls the box that shows up when you hover over “My Plugins”

pen.uiPluginPopup.border, controls the border around said box.

 

Look at how Things don’t work! :3

Aim 6.5 Skin: OS X Leopard

= Download This Skin =

So anyway the skin will be included in an OS pack which will include, Windows Vista, OS X Leopard, and Windows XP skin. If you have any OS skin requests speak now or forever hold your peace!

AIM OS Skin Pack:

–Windows Vista Basic [Blue] + Windows Vista [Black]

–OS X Leopard [Frost] + OS X Leopard [Grey]

–Windows XP Royal Blue

Introduction

Vista Basic is a skin featuring a design similar to the default Windows Vista Basic theme.

Vista Basic is a part of the OS skin pack which includes five skins:

• AimXP
• AIMXP Blue
• Vista Basic
• OSX Leopard
• OSX Leopard White

Each skin is included in the pack, you do not need to download them separately.

Getting Started

Adding skins to Aim 6 requires the knowledge of using zip files, overwriting a file, and navigating folder directories. If you have trouble with any of these concepts, be sure to read an in-depth tutorial which details the process for you.

The instructions will install the skin at a specific directory highlighted in teal. Since the theme supports an obsolete AIM version, it is recommended you download Aim 6.8 at websites like oldversion.com. The instructions will assume you have Aim 6.8 installed.

For more information read the last page of the in-depth tutorial on skins and their compatibilities.

Please Note!

Warning: Installing any skin pack on this site will overwrite existing custom skins. This skin pack ONLY contains the skins listed in the introduction. Before continuing please be sure you understand the concepts of opening and extracting a zip file.

Currently this skin pack supports Aim 6 version: 6.8.14.6

To check your AIM version number Open AIM.
Click:  Help > About AIM

• How do I install this skin on a different version number!?

Installation

1. Extract themes.box and select Yes to Replace the existing themes.box file at the folder:

C:\Program Files\AIM6\services\imApp\ver6_8_14_6\theme

2. Extract blgadgets.box and select Yes to Replace the existing blgadgets.box at the folder:

C:\Program Files\AIM6\services\imApp\ver6_8_14_6\content\bl

3. Extract “aimxp” and “leopardosx” and “vistabasic” folders at:

C:\Program Files\AIM6\services\imApp\ver6_8_14_6\theme

4. Close AIM completely and Restart AIM, then select the skins from the theme icon.

Download Now!

OS Skin Pack

Screenshots

AOL has released Aim 6.5.4.15, this newest version doesn’t add anything major in terms of features, which means Aim 6.5 is very very close to being Gold Master. The most notable new feature is new skins, now there are 20 skins to choose from for both light and dark themes. You can now stream music with Aim Tunes, and other UI edits and enhancements. The Buddy info now displays buddy updates on the side in its own little box. To the left you will see the regular buddy info. Sometimes the buddy updates do not load so the buddy info is displayed in full width. Aim has added the newest annoyance, Text Ads!, but when you think about it, Text Ads aren’t as annoying as music ads. So lets hope AOL decides to remove that large ad box at the top and give us back the buddy list we so desire!

AIM Security Hole

I’ve been asked on the situation of the “AIM Virus” that the major news companies have been reporting. I’ll cover this briefly. According to AOL’s statements, if you have Aim 6.5.4.16, you should be immune to any attacks that rise up. However Aim 6.1, 6.2, Pro, and Aim Lite are still affected. AOL has silently patched these versions for the majority of attacks, however according to the security research findings, these versions are still vulnerable to attacks. It seems AOL wanted to avoid releasing a new version AIM that patches this and just monitor IM streams for suspicious activity. Right now they don’t have any reports if Aim 6.5.4.16 is vulnerable right now. AOL at the time said that the next AIM beta version will patch this hole. Now that Aim 6.5.4.16 has been released, it should be safe to use.  

Skins in My Aim?

Well lets thank the developers for not changing the UI so drastically, this time my work converting skins to was less stressful. About 2 new IDs were added and they actually help make dark themes look better. Even though there are 20 skins to choose from, why not have 4 more colors just for fun. As promised, new skins will be on the way, Windows Vista Aero Basic Themes are coming up. Oh and one more thing, 4 more colors just for fun means FOUR MORE COLORS! Now all 4 colors are included in the download, so you can switch between any of them as much as you like. If you need skins, just click the Aim Skins category on the left. As always, check the FAQ for help on what version your supposed to be using.

Blue Skin – Red Skin – Green Skin – Pink Skin

Vista Skin

Wow did we just skip a few numbers didn’t we? Aim 6.5 skins will be linked from here, coming later this week will be the black and red skin as promised. Aim 6.5 has changed the UI again and moved the invisible icon next to the away message, new skinning functions were added and some were removed. I’ve noticed Aim developers have adopted my gradient within the tabs idea, and have also started coloring the screen name area at the top. The new function areas that were added are:

<linearGradientBrush id="gradient.bl.away.quickButtons.toggled">

This changes the background color of the button when you press the small away icon at the top.

<solidBrush id="toUserFaceMobile" fill="#D1EAFF" />

When you send a text message, this is the background for that screen.

<linearGradientBrush id="brush.aim.flyout.background">

This is the quickview panel that pops up when you hover over a buddy

<linearGradientBrush id="gradient.awayMenuBox.top.normal">

This controls the background for the whole area of the top area with your screen name

<linearGradientBrush id="awayStatusPanelGradient">

In An IM window, the Away Panel’s colors are controlled by this ID.

<solidBrush id="brush.bl.modulesSpacer" fill="#202020" />

The 4 buttons on the bottom, this changes the top and bottom borders between them.

<linearGradientBrush id="brush.bl.modulesBackground">

This changes the background when you click on one of the 4 buttons at the bottom.

There are more but they aren’t really interesting but you can find them within the themes folder. I’ve had people ask me how to start the process of making skins and the best thing you could do is edit the black theme that comes with AIM. This theme has most of the extra functions, or you can look through my themes and see all the tiny details you probably won’t notice.

= Learn more about Creating Themes =

Unless you have a good graphics program you probably won’t be able to create transparent PNGs. You don’t really have to use a transparent PNG but you’ll notice that you might get a white background distracting the title bar’s color of black, blue, orange, etc… If you have the skills to do so, please cut out the image your going to be using an icon. Otherwise, use a font and set that on another layer. When you create the actual PNG, make sure you have alpha layer transparency or use a background color similar to the skin. Please make sure this background color has blended with your icon.

Image Locations

Please Refer to Aim Skinning Post for location of the file themeBrushes.box

    <bitmap id="bmp.aim.icon" src="box://imApp/resources/bumpx.png"/>

Lets take a look at "bmp.aim.icon" on GregsBlog’s Aim Themer tool. This is what "Main Icon" is at the top. This icon should be 32×32, preferably put this icon in the center, although putting it on the left side helps out a bit in design. Now where this icon is located is where things get strange.

C:\Program Files\AIM6\services\imApp\ver6_1_32_1\resources\en-US

This is the current folder for Aim 6.1 GM, this means that whenever Aim 6.1 updates to a new version number you’ll have to keep moving the image to the newest location. Also note that the language will be different depending on your country. When more information rolls in on how to package themes, we can hopefully put this file in another easier to install location.

Please Refer to Aim Skinning Post for location of the file themeBrushes.box

    <bitmap id="bmp.aim.icon.small" src="box://imApp/resources/aim_green_16.png"/>

"bmp.aim.icon.small" is naturally the Small Icon on Aim Themer Tool. The funny thing about this icon is that you’ll hardly if ever will see it. Whenever you format your screen name this icon appears. Since I’m a AOL user, I never see this icon at all. The icon’s directory is located below.

C:\Program Files\AIM6\services\imApp\ver6_1_32_1\resources\en-US

With this you can naturally just insert Official Aim Icons if you please, or you can just make up your own.

Please Refer to Aim Skinning Post for location of the file blGadgets.box

     icon="box://imApp/theme/bumpx/images/icon_selector.png"

Now the last image is shown whenever you press the colorwheel on the buddy list. If you scroll down to your theme’s location in the blGadgets.box file, [you can find your theme's location based on the folder name you made for it], you’ll notice, "box://imapp/theme/THEMENAME/images/" in this case you must add the path to whatever image you want to use in the following folder.

C:\Program Files\AIM6\services\imApp\ver6_1_32_1\theme\THEMENAME\images

By Default, you should have images of dark purple circles in there. The icon that is used is called "icon_selector.png", you are free to change the colors if you like, but keep it PNG. You will also notice the module colors that control the four buttons at the bottom of the buddy list. In an upcomming entry I will hand out some freebies of extra colors you can use in your skins.

Learn More About Creating Aim 6.0 Skins
- Download Aim 6.0 Skins –

Solid Brushes
Aim 6.0 has a Solid Brush function. solidBrush tells the program that the particular ID of what your editing will have ONE color. The solid brush markup goes like this…

    <solidBrush id="textColor.defaultButton" fill="#000000" />

Note fill="#000000", this is where you place the HTML Color Code. #000000 is the color code for black text. If you want to change it to another color you would change the letters and numbers after the # sign. Also there must be 6 Letter/Number combination in order to work.

Linear Gradient Brush 
Aim 6.0 also has a Linear Gradient Brush. linearGradientBrush tells the program that the particular ID of what your editing will have multiple colors. The linear gradient brush markup goes like this…

    <linearGradientBrush id="gradient.aimWindow.windowContent">
        <rotateTransform center="50% 50%" angle="-90"/>
        <gradientStops>
            <gradientStop offset="0%" color="#121212"/>
            <gradientStop offset="100%" color="#363636"/>
        </gradientStops>
    </linearGradientBrush>

Ok woah what happened here!? This got way more complicated than the solid brush. Well a gradient needs more than 1 color to become an actual gradient. Most of the entries in your skins will use linear gradients. In theory all solid brushes should be able to convert to linear gradient and vice versa. Now there are a few rules with linear gradients though. It needs to have a gradientStops tag and that tag must be closed after your gradientStop offsets. You also must close the linearGradientBrush tag at the end of the particular ID. Another rule is that you should begin the gradientStop offset at "0%" and end at "100%". Your free to place whatever values you want between those two colors. Aim 6.0′s boxely engine will render the blending it will take to those positions.

GradientStop Offset.
This is particularly hard to visualize if your new to creating gradients in photoshop or paint shop pro. What you need to do here is start off with one color at "0%" and end at "100%". The percentage tells you where that particular color will start and continue to. At the same time that particular color will also blend with the next gradientstop offset unless you specify otherwise.

Now your not limited to just 2 colors, in my skin, I use 4 to 5 different gradient offsets. By positioning the colors in a certain way you can create an effect where the colors smoothly create a bump like effect, or abrupt colors that creates a sheen glass like effect. Lets take a look at one of the mistakes I used in my skin.

            <gradientStop offset="0%" color="#f3f8e7"/>
            <gradientStop offset="25%" color="#8cc110"/>
            <gradientStop offset="51%" color="#abd747"/>
            <gradientStop offset="100%" color="#abd747"/>

Now you may not see anything wrong here, but if your as picky as I am, you’ll notice that the send IM button’s colors does not match the bar beside it. Take a look at the markup. According to my percentages, these colors will blend smoothly. The farther apart the percentages are, the more smoother bump-like the colors are… [however this isn't always true since you can just use 2 similar colors at the top and 2 similar colors at the bottom to make use of the abrupt glass like effect.] Lets fix this up to create a similar style.

            <gradientStop offset="0%" color="#abd747"/>
            <gradientStop offset="40%" color="#8cc110"/>
            <gradientStop offset="41%" color="#D9FF82"/>
            <gradientStop offset="44%" color="#8cc110"/>
            <gradientStop offset="100%" color="#abd747"/>

Ok now you’ll see a major difference. Take a look at the markup, I’m using 5 gradient offsets to achieve this effect. Note that at  41%-44% the brightest color is used. Then it continues back to the regular gradient. This can be cleaned up better since its kind of redundant to have 5 colors doing that style when I could just fake it with 4 colors.

            <gradientStop offset="0%" color="#abd747"/>
            <gradientStop offset="41%" color="#abd747"/>
            <gradientStop offset="44%" color="#8cc110"/>
            <gradientStop offset="100%" color="#abd747"/>

There, nobody will notice the difference unless they have really keen eyes. Thats all for this lesson.

Learn More About creating Aim 6.0 skins
- Download Aim Skins -

Read More About Creating Themes

= Download the 6.1 Theme =

= Download the 6.2 Theme =

= Download This Theme For Aim 6.5 =

= Download =

= Download this Theme =

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.