Skins
From Digsbies Wiki
Contents |
What Is A Skin?
A skin consists of a setup file called skin.yaml and various image files. Skin variants (e.g. green.yaml or red.yaml to include different color schemes) can be included in a folder named "variants".
Note: Comments in YAML are noted with the pound (#) symbol.
UPDATE!!! Read this:
Get the beta version of the official skinning documentation!
What Do I Need?
You will need:
A Text Editor
A Digsby
Photo software, like Photoshop, is recommended but not necessary.
All About Skinning 101
• After making a change, go to Digsby and press F5, or go to Preferences >> Skins, then select a different skin, then your own and the changes will be added. No need to exit/restart Digsby. :D Now if you do run into an issue with a change or something, you will need to undo the change, then restart Digsby if it decides not to load at all, otherwise you’ll never be able to see your contact list since the skin didn’t load right. Crtl + Z is your friend.
• If you want to change a font, simply type in the name of the new font you want to use. If it is two words, you may need to put quotes around the name. Don’t use any non-standard fonts.
• YAML (Language this is in) info at http://en.wikipedia.org/wiki/YAML
• It is also set up like this:
MainCatagory:
SubCatagory:
Details: 0xFFFF
• All colors are in hex, meaning it’s 0xHTMLcolorCODEhere, for example white is 0xFFFFFF
• If you want to do a gradient, instead of just one color, you need to type two color codes. So then it would look like this “Background: 0xFFFFFF 0x000000” and that is a gradient.
• You may use images in *most* cases. You simply direct to the path of the image. Ex: You have a folder with images named “img”. You want to load “buddylistbackground.png” so then in main skin file you would instead of putting a color, put (no quotes) “img/buddylistbackground.png”
• To tile an image, simply add a h_tile or v_tile to the end of the line. Ex: - watermark.png v_center h_center v_tile
• As far as images go, PNG seems to be what is preferred.
• If an image isn’t quite the right size, Digsby will stretch to fix it.
• You will notice that there are “skins” in this. You may come across “itemskin”, “ButtonSkin”, or “MenuSkin” and that just refers back to someplace where you have assigned that variable (the itemskin or whatever) certain colors and styles that instead of typing again and again you just want to have down once.
• At the top where themes say “Common:”, you can make any types of styles you want to regularly use, and you give them a name (that would be the MyWhite: or whatever) and choose what color or image or gradient you want it to be. Then, to call it up later, instead of typing a color code into some other place, you would just say $Name.
• For most things, you can add how transparent you want it, and you do this by simply adding a percentage after. So for example, watermark: img/eggtastic.png 50% and that would show the image being 50% transparent.
• Some things in this tutorial you will need to grab from the “default” skin. The default skin holds everything and everything, but you can’t simply go and copy and paste random parts, otherwise it won’t work correctly. The default skin is located in C:\Program Files\Digsby\res\skins\default\skin.yaml.
• If you don’t want something to show up, stick a (no quotes) “#” in front of the line. This is only allowed at select places, and if used incorrectly can result in a Digsby skin not loading. If this happens, undo any changes and save again, then exit/restart Digsby.
How Do I Make The Skin?
To make a skin, copy a folder in your C:\Program Files\Digsby\res\skins then rename it, then open the skin.yaml and change the value of the “name:” to whatever you want to name your skin.
Skin That Thing
Below I have a reference image where using a number system, I will explain how you can change just about everything.
1. This is the background of the top menubar. To change it you can either use a gradient, image, or single color. To change this, find the top level “MenuBar:” and where it says “background:” change whatever is there to what you want. MenuBar is 19 pixels high.
2. This is the normal/down/hover/active/activehover of the buttons on the MenuBar. Located at “ButtonAlt:”. For the backgrounds, on Normal, if you want it the same looking as the MenuBar, then either paste the same color codes, gradient, or image as you did for the MenuBar background. You can also change the font colors so you can use any color for easy readability. ButtonAlt is 19 pixels high.
3. This is the Contact list or in the skin “BuddiesPanel:”. Here you can change if there is a watermark image (background image), the colors of buddies and groups, and if buddy icons have rounded edges or not, and the color of the list background.
a. To change the watermark image, where it says “watermark:” type in the path to an image that will show up on the buddy list. Transparency is allowed here.
b. To change the background color of the list, under Backgrounds, then List you should see a “-“ then some value, default would be $MyWhite. You can change this to any color, gradient, or image.
c. To change if buddy icons are round or not, you can either change under BuddyIcons: the “Rounded:” to yes or no. To change how transparent the digsby logo is when someone doesn’t have an icon, you change, under BuddyIcons: the “NoIconAlpha:” to any percent.
4. To change the buddy appearance on the contact list, you can do that under BuddiesPanel: then Backgrounds: and FontColors:. BuddySelected, BuddyHover, and Buddy for Backgrounds are all what they say they are, those are the backgrounds of the image. Colors, gradients, or images may be used here. For images, there isn’t a set height as there are different buddy list styles, but even numbers are a good thing.
a. For the font colors, Buddy, BuddyOffline, BuddyHover, and BuddySelected for the buddy names. For their status, you change Status, StatusHover, Status Selected, Idle Time, IdleTimeHover, and IdleTimeSelected. Only solid colors are allowed.
5. To change the group panels, go under BuddiesPanel, then Backgrounds and Font Colors. Group, GroupHover, and GroupSelected in Backgrounds are used. There isn’t a set height for these either. Colors, gradients, or images are allowed.
a. For the font colors, Group, GroupHover, and GroupSelected are all used. Only solid colors.
6. This is the status chooser box, to change how this appears go to ButtonCombo:, then Backgrounds. This changes both the one with the status icon, and then the drop down button with an arrow. Colors, gradients, and images all allowed.
a. For the text box, go to ComboBox, then backgrounds, or if you just want to change the text color you can change that at FontColors. You can also change the Font at Font. The Available status if just marked Available will always be a light gray no matter what. Only solid colors are allowed.
7. To change this, you need to load up the default skin (C:\Program Files\Digsby\res\skins\default\skin.yaml) go to SimpleButtonSkin:, then copy it over to the bottom of your skin file. Once that is done, you can go to the SimpleButtonSkin, Backgrounds, and then change the values. Solid colors, gradients, and images are all allowed.
8. This is the menu that appears when you right click the Digsby icon, when you use the menubar, when you do a whole lot on Digsby. To change it, look for “Menu”, and to change the border on it, go to Frame: and change the value to any solid color. You can change the size of the icons in the gutter (side part) by going to Iconsize and changing that. That number is in square pixels. You can change the font by going to Font. To change the background, go to Backgrounds: and “menu:” is the background of the menu Solid colors, images, and gradients. and “Gutter” is that side part where icons are. Solid colors, images, and gradients. You can add a border to the “menu”. Change font colors by going to FontColors. Solid colors only.
9. Go to” Menu”, “Background”, then “Selection:” and this is when you mouseover an item on the menu. Solid colors, images, and gradients.
10. Formatting bar background, to change the background go to ButtonBarNP and change background: to any gradient, color, or image.
11. This is the top part of the buddy hover window and then the top part of IM windows. Go to ButtonBar then change background to any gradient, solid color, or image.
12. This is for the background of buttons on the formatting bar and top part of the window, and the buddy info hover window. Normal, if you don’t want any special button look should be the same as what you use for the background. Any images, gradients, or solid colors. Images should be around 19-20pixels tall. Change font colors with FontColors. Solid colors only for fonts.
a. To change the icons (like the smile or bold/italicize/underline), after the FormattingBar:, make a thing called “Icons:” then add whatever buttons you want. It would end up looking like this:
Code:
FormattingBar: ToolBarSkin: ButtonBarNP MenuSkin: SimpleMenu IconSize: 15 FontDropDownWidth: 100 SizeDropDownWidth: 33 Icons: Emote: img/Smile.png
In the default skin file you can find out all the icons available to change (look under FormattingBar then Icons). Simply copy the code over and change what image. The dimensions on these images seem to be 15x15 pixels.
13. Same as 12, if you want two different things, then for one of them change the buttonskin to like “ButtonFormat”, then copy and paste “Button” and rename that to “ButtonFormat” then work from there on.
14. This is the account panels, you can find it at “AccountPanels:” To change the background, go to Backgrounds then to change the back part go to Behind: and you can use a gradient, solid color, or image, and with solid color or gradient you can use borders. To change the boxes the accounts are in, go to Account: and add solid color, gradient, or image. Borders can be used with solid color or gradient.
(From here on photos software is needed unless you find service icon sets or status icon sets)
15. Service icons. These are to be stored in a separate folder labeled “serviceicons”. To add these to your theme, copy and paste this at the end of the skin file:
Code:
serviceicons: # im services aim: serviceicons/aim.png icq: serviceicons/icq.png msn: serviceicons/msn.png yahoo: serviceicons/yahoo.png jabber: serviceicons/jabber.png gtalk: serviceicons/gtalk.png digsby: serviceicons/digsby.png widget: serviceicons/widget_trans.png
# email services ymail: serviceicons/ymail.png hotmail: serviceicons/hotmail.png gmail: serviceicons/gmail.png pop: serviceicons/pop.png imap: serviceicons/imap.png aolmail: serviceicons/aolmail2.png
#social services facebook: serviceicons/facebook.png myspace: serviceicons/myspace.png
You can get a copy of these by going to the default skin’s folder (C:\Program Files\Digsby\res\skins\default) and copying the service icon folder over. Then, replace the images in there with 32x32 pixels versions of things. If you don’t have this part of the skin, then it will use the default ones.
16. These are the status icons, to use these copy the folder from (C:\Program Files\Digsby\res\skins\default) named statusicons to your skin’s folder. Then, use this code at the bottom of your skin file:
Code:
statusicons: available: statusicons/available.png mobile: statusicons/mobile.png idle: statusicons/idle.png away: statusicons/away.png invisible: statusicons/invisible.png offline: statusicons/offline.png unknown: statusicons/unknown.png typing: statusicons/typing.png typed: statusicons/enteredtext.png
You can change any of these to any image that is 13x13 pixels (for best look). This is also optional; if you don’t include this into your skin then it will use the default status icons.
17. This is for the tabs themselves. To do this, you need to go to the default skin and copy and paste code that should look something like this to the bottom of the skin file:
Code:
Tabs: Spacing: 2 Padding: 3 4 margins: 3 3 3 6 Backgrounds: Bar: ../../AppDefaults/v/tabBar.png 6 6 -6 -7 Normal: ../../AppDefaults/v/tabinactive.png 6 6 6 7 Active: ../../AppDefaults/v/tabselected.png 6 6 6 7 ActiveHover: ../../AppDefaults/v/tabselected.png 6 6 6 7 Notify: ../../AppDefaults/v/tabmouseOver.png 6 6 6 7 Hover: ../../AppDefaults/v/tabmouseOver.png 6 6 6 7 CloseButtonSkin: TabCloseButton ScrollButtonSkin: TabScrollButton Dropmarker: Offset: -6 Image: ../../AppDefaults/v/droparrow.png Icons: Close: ../../AppDefaults/v/x.png Right: ../../AppDefaults/v/blue_right.png Left: ../../AppDefaults/v/blue_left.png Up: ../../AppDefaults/v/blue_up.png Down: ../../AppDefaults/v/blue_down.png Iconsize: 16 MaxWidth: 150 FontColors: Normal: 0x666666 Active: black ActiveHover: 0x333333 Notify: black Hover: black
To change the background, go to the Tabs: in your skin file that you just created, then Backgrounds: and change Normal, ActiveHover, Notify, and Hover to any IMAGE you want. Reference to the tab images in C:\Program Files\Digsby\res\AppDefaults\v to see how you should make them. Change the path to whatever your tabs’ images’ path is. You must leave the 6 6 6 7 at the end. You can change the Font colors and how big they can be by going to MaxWidth: and changing that number for how wide in pixels, then go to FontColors: to change the colors. Solid colors only.
18. To change the background of the tab, go to the Tabs: then Backgrounds: then Bar: and choose any IMAGE. You must leave the 6 6 -6 -7 at the end. Image should be 33 pixels tall.
To see any changes in your skin, again, go to Digsby and press F5 or go to Tools >> Preferences >> Skins, then choose a different skin, then the one you are working on and it reloads it and you can see the changes. If for some reason one of your changes doesn’t work right, either you won’t be able to select the Skins tab, or you will get an error code, or the contact list won’t show. In this event, undo changes made, resave, then restart digsby or if you can get to the skin chooser simply select another skin then reload the one you were working on.
Variants
There are also modifications called "Variants" where the skin can be slightly altered (colours, images, etc) but remain the same overall skin. To make a variant, create a folder named "variants" in the skins folder. Once inside the variants folder, create a .yaml document with the name you wish your variant to be called. For example, if you wanted to create a variant named "Coded" for the "Delirium" theme, you would create a file named "Coded.yaml" in the variants folder in the Delirium skin folder. Once created, the object of a variant is to slightly change a part of a skin without creating a new skin entirely. So to do that, pick a part of the skin you wish to change, copy it over to the variant's .yaml and alter it. For example, if you didn't like this line " Menu: $GSelected" you would copy it from the skin.yaml file to the variant file and change it to whatever you wish. Then load the variant and the skin will change to what you altered.. A video will be coming explaining how to do this later --Delirium 05:12, 16 May 2008 (CEST)
Showing It Off
Now that you have made your skin, you are probably like “So what, where do I go from here?” SHARE WITH THE COMMUNITY :D To package your theme up, simply stick the skin’s folder into a zip and then go to Digsbies.org, log in or create an account, then go to Add Theme and add all the stuff needed. Now it’s out there in the world. Yay. Feel free to post it in the Customization Forum on the Digsby Forums as well.
IRC
Please join us on irc.freenode.net in the #digsbyskins room.
