1<?xml version="1.0" encoding="UTF-8"?> 2<!-- 3 4Coal skin is based on Ocean skin 5Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+ 6Except background.jpg, by elisee 7Except stars, by s@f 8 9To make your own skin, I suggest simply duplicating this file and modifying it as needed. 10There are two types of images : some will be simply stretched as a whole, others will 11have non-stretchable borders (you cannot choose which one you must use, it's hardcoded 12for each element type; though, as you will see below, for all "advanced stretching" images 13you can easily fake "simple stretch") 14 15All elements will have at least 2 properties : 16 type="X" sets what you're skinning with this entry 17 image="skinDirectory/imageName.png" sets which image is used for this element 18 19Most elements also support states : 20 state="neutral" 21 state="focused" 22 state="down" 23You can thus give different looks for different states. Not all widgets support all states, 24see entries and comments below to know what's supported. 25Note that checkboxes are an exception and have the following styles : 26 "neutral+unchecked" 27 "neutral+checked" 28 "focused+unchecked" 29 "focused+checked" 30 "deactivated+unchecked" 31 "deactivated+checked" 32 33"Advanced stretching" images are split this way : 34 35 +----+--------------------+----+ 36 | | | | 37 +----+--------------------+----+ 38 | | | | 39 | | | | 40 | | | | 41 +----+--------------------+----+ 42 | | | | 43 +----+--------------------+----+ 44 45The center border will be stretched in all directions. The 4 corners will not stretch at all. 46Horizontal borders will stretch horizontally, verticallt borders will stretch vertically. 47Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify 48the size of each border in pixels (setting all borders to '0' makes the whole image scaled). 49 50In some cases, you may not want vertical stretching to occur (like if the left and right sides 51of the image must not be stretched vertically, e.g. for the spinner). In this case, pass 52parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping 53their aspect ratio. 54 55Some components may fill the full inner area with stuff; others will only take a smaller 56area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion" 57that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's 58area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders, 59the 'v' one is for vertical borders. 60 61Finnally : the image is split, as shown above, into 9 areas. In osme cases, you may not want 62all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom" 63and explicitely specify which parts you want to see. The 4 corner areas are only visible 64when the border that intersect at this corner are enabled. 65 66--> 67 68<skin name="Coal" author="Alayan"> 69 70<!-- Stateless --> 71<element type="background" image="background.jpg" /> 72 73<element type="bottom-bar" image="bottom_bar.png" /> 74 75<element type="achievement-message" image="achievement.png" 76 left_border="160" right_border="13" top_border="13" bottom_border="13" 77 preserve_h_aspect_ratios="true" hborder_out_portion="0.3" vborder_out_portion="0"/> 78 79<element type="friend-message" image="friend.png" 80 left_border="160" right_border="13" top_border="13" bottom_border="13" 81 preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/> 82 83<element type="error-message" image="error.png" 84 left_border="160" right_border="13" top_border="13" bottom_border="13" 85 preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/> 86 87<element type="generic-message" image="generic.png" 88 left_border="160" right_border="13" top_border="13" bottom_border="13" 89 preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/> 90 91<element type="button" state="neutral" image="glassbutton.png" 92 left_border="13" right_border="13" top_border="13" bottom_border="13" 93 hborder_out_portion="0" vborder_out_portion="0"/> 94 95<element type="button" state="focused" image="glassbutton_focused.png" 96 left_border="13" right_border="13" top_border="13" bottom_border="13" 97 hborder_out_portion="0" vborder_out_portion="0"/> 98 99<element type="button" state="deactivated" common="y" image="glassbutton_deactivated.png" 100 left_border="13" right_border="13" top_border="13" bottom_border="13" 101 hborder_out_portion="0" vborder_out_portion="0"/> 102 103<!-- TODO : buttons could support 'pressed' state --> 104 105<element type="textbubble" state="neutral" image="textbubble.png" 106 left_border="13" right_border="13" top_border="13" bottom_border="13" 107 hborder_out_portion="0.7" vborder_out_portion="0.3" /> 108 109<element type="textbubble" state="focused" image="textbubble2.png" 110 left_border="13" right_border="13" top_border="13" bottom_border="13" 111 hborder_out_portion="0.7" vborder_out_portion="0.3" /> 112 113<element type="progress" state="fill" image="glasssgauge_fill.png" 114 left_border="5" right_border="5" top_border="5" bottom_border="5" /> 115 116<element type="progress" state="neutral" common="y" image="progress_bg.png" 117 left_border="31" right_border="31" top_border="15" bottom_border="15" /> 118 119 120<element type="tab" state="neutral" image="glasstab.png" 121 left_border="11" right_border="11" top_border="6" bottom_border="10" 122 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 123 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 124 125<element type="tab" state="focused" image="glasstab_focus.png" 126 left_border="11" right_border="11" top_border="6" bottom_border="10" 127 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 128 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 129 130<element type="tab" state="down" image="glasstab.png" 131 left_border="11" right_border="11" top_border="6" bottom_border="10" 132 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 133 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 134 135 136<element type="verticalTab" state="neutral" image="glasstab_vert.png" 137 left_border="10" right_border="10" top_border="10" bottom_border="10" 138 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 139 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 140 141<element type="verticalTab" state="focused" image="glasstab_vert_focus.png" 142 left_border="10" right_border="10" top_border="10" bottom_border="10" 143 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 144 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 145 146<element type="verticalTab" state="down" image="glasstab_vert.png" 147 left_border="10" right_border="10" top_border="10" bottom_border="10" 148 preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0" 149 h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" /> 150 151<!-- Stateless --> 152<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png" 153 left_border="6" right_border ="6" top_border="6" bottom_border="6" 154 hborder_out_portion="1.0" /> 155<element type="squareFocusHalo1" common="y" image="glass_square_focused_black.png" 156 left_border="6" right_border ="6" top_border="6" bottom_border="6" 157 hborder_out_portion="1.0" /> 158<element type="squareFocusHalo2" common="y" image="glass_square_focused_cyan.png" 159 left_border="6" right_border ="6" top_border="6" bottom_border="6" 160 hborder_out_portion="1.0" /> 161<element type="squareFocusHalo3" common="y" image="glass_square_focused_red.png" 162 left_border="6" right_border ="6" top_border="6" bottom_border="6" 163 hborder_out_portion="1.0" /> 164<element type="squareFocusHalo4" common="y" image="glass_square_focused_green.png" 165 left_border="6" right_border ="6" top_border="6" bottom_border="6" 166 hborder_out_portion="1.0" /> 167<element type="squareFocusHalo5" common="y" image="glass_square_focused_yellow.png" 168 left_border="6" right_border ="6" top_border="6" bottom_border="6" 169 hborder_out_portion="1.0" /> 170 171<!-- Stateless. No splitting into 9 areas is done; the image is just resized. --> 172<element type="selectionHalo" image="bubble.png" /> 173<element type="focusHalo" image="glass_iconhighlight_focus.png" /> 174 175<element type="spinner" state="neutral" common="y" image="glassspinner.png" 176 left_border="110" right_border="110" top_border="0" bottom_border="36" 177 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 178 179<element type="spinner" state="focused" image="glassspinner_focus.png" 180 left_border="110" right_border="110" top_border="0" bottom_border="36" 181 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 182 183<element type="spinner" state="deactivated" common="y" image="glassspinner_deactivated.png" 184 left_border="110" right_border="110" top_border="0" bottom_border="36" 185 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 186 187<!-- player name spinner color in multiplayer--> 188<element type="spinner1" state="neutral" common="y" image="glass_square_black.png" 189 left_border="110" right_border="110" top_border="0" bottom_border="36" 190 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 191<element type="spinner2" state="neutral" common="y" image="glass_square_cyan.png" 192 left_border="110" right_border="110" top_border="0" bottom_border="36" 193 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 194<element type="spinner3" state="neutral" common="y" image="glass_square_red.png" 195 left_border="110" right_border="110" top_border="0" bottom_border="36" 196 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 197<element type="spinner4" state="neutral" common="y" image="glass_square_green.png" 198 left_border="110" right_border="110" top_border="0" bottom_border="36" 199 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 200<element type="spinner5" state="neutral" common="y" image="glass_square_yellow.png" 201 left_border="110" right_border="110" top_border="0" bottom_border="36" 202 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 203 204 205<!-- This one is a bit special. Only area(s) LEFT and/or RIGHT will be rendered. They will be overlaid 206 on top of the spinner's background --> 207<element type="spinner" state="down" image="glassspinner_down.png" 208 left_border="110" right_border="110" top_border="0" bottom_border="36" 209 preserve_h_aspect_ratios="true" hborder_out_portion="0.0" /> 210 211<!-- For checkboxes, no splitting into 9 areas is done; the image is just stretched --> 212<element type="checkbox" state="neutral+unchecked" image="glasscheckbox.png"/> 213<element type="checkbox" state="neutral+checked" image="glasscheckbox_checked.png"/> 214<element type="checkbox" state="focused+unchecked" image="glasscheckbox_focus.png"/> 215<element type="checkbox" state="focused+checked" image="glasscheckbox_checked_focus.png"/> 216<element type="checkbox" state="deactivated+unchecked" common="y" image="glasscheckbox_deactivated.png"/> 217<element type="checkbox" state="deactivated+checked" common="y" image="glasscheckbox_checked_deactivated.png"/> 218 219<!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched. 220 Note: the body of a guage is the same as for for spinners. --> 221<element type="gaugefill" image="glasssgauge_fill.png" /> 222 223<!-- Lists are always in neutral state for now --> 224<element type="list" image="glass_section.png" 225 left_border="15" right_border="15" top_border="7" bottom_border="7" 226 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 227 228<element type="listitem" state="focused" image="select.png" 229 left_border="0" right_border="0" top_border="0" bottom_border="0" 230 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 231 232 233<!-- Scrollbars. Background and thumb have no state (always neutral state). 234 The buttons are the top and bottom arrows. Image must be top arrow, will 235 be mirrorred for bottom. Buttons can be in neutral or down state. 236 Advanced stretching is only used for the background and thumb. --> 237<element type="scrollbar_background" common="y" image="scrollbar_bg.png" 238 left_border="7" right_border="7" top_border="7" bottom_border="7" 239 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 240<element type="scrollbar_thumb" image="scrollbar_thumb.png" 241 left_border="7" right_border="7" top_border="7" bottom_border="7" 242 hborder_out_portion="-1.0" vborder_out_portion="-1.0" /> 243<element type="scrollbar_button" common="y" image="scrollbar_btn.png" /> 244<element type="scrollbar_button" state="down" image="scrollbar_btn_down.png" /> 245 246<element type="left_arrow" state="neutral" common="y" image="left_arrow.png" /> 247<element type="right_arrow" state="neutral" common="y" image="right_arrow.png" /> 248<element type="left_arrow" state="focus" image="left_arrow_focus.png" /> 249<element type="right_arrow" state="focus" image="right_arrow_focus.png" /> 250 251<element type="list_header" state="neutral" image="table_header.png" /> 252<element type="list_sort_up" state="neutral" common="y" image="list_sort_up.png" /> 253<element type="list_sort_down" state="neutral" common="y" image="list_sort_down.png" /> 254<element type="list_header" state="down" image="table_header_down.png" /> 255 256<!-- Stateless --> 257<element type="section" image="glass_section.png" 258 left_border="15" right_border="15" top_border="15" bottom_border="15" 259 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 260 261<element type="section" state="selected" image="glassbutton_focused.png" 262 left_border="15" right_border="15" top_border="15" bottom_border="15" 263 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 264 265<!-- Stateless --> 266<element type="rounded_section" image="glass_rsection.png" 267 left_border="15" right_border="15" top_border="15" bottom_border="15" 268 hborder_out_portion="0.0" vborder_out_portion="0.0" /> 269 270<!-- Stateless --> 271<element type="window" image="dialog.png" 272 left_border="7" right_border="7" top_border="7" bottom_border="7" 273 hborder_out_portion="1.0" vborder_out_portion="0.2" /> 274 275<!-- Stateless --> 276<element type="tooltip" common="y" image="tooltip.png" 277 left_border="10" right_border="10" top_border="10" bottom_border="10" 278 hborder_out_portion="1.0" vborder_out_portion="1.0" /> 279 280<!-- Colors --> 281<color type="text" state="neutral" r="220" g="220" b="220" /> 282<color type="brighttext" state="neutral" r="240" g="240" b="240" /> 283 284<!-- For highlighted items, e.g. in list --> 285<color type="text" state="focused" r="255" g="255" b="255" /> 286 287<!-- Color used in the credits --> 288<color type="credits_text" state="neutral" r="220" g="220" b="220" /> 289 290<!-- Color used for emphasized items in e.g. lists --> 291<color type="emphasis_text" state="neutral" r="230" g="210" b="50" /> 292<color type="emphasis_text" state="focused" r="255" g="226" b="56" /> 293 294<!-- Color used for red/blue items in list (e.g. player team color in networking) --> 295<color type="list_blue" state="neutral" r="0" g="0" b="180" /> 296<color type="list_blue" state="focused" r="0" g="0" b="255" /> 297<color type="list_red" state="neutral" r="255" g="0" b="0" /> 298<color type="list_red" state="focused" r="255" g="0" b="0" /> 299 300<!-- Color used to fade out background when a dialog is shown --> 301<color type="dialog_background" state="neutral" a="120" r="0" g="0" b="0" /> 302 303<!-- Color used for tips in the loading screen --> 304<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" /> 305 306<!-- Text field color --> 307<color type="text_field" state="background" a="255" r="35" g="35" b="35" /> 308<color type="text_field" state="background_focused" a="255" r="15" g="15" b="15" /> 309<color type="text_field" state="background_deactivated" a="255" r="90" g="90" b="90" /> 310<color type="text_field" state="background_marked" a="128" r="220" g="220" b="220" /> 311<color type="text_field" state="neutral" a="255" r="35" g="35" b="35" /> 312<color type="text_field" state="focused" a="255" r="15" g="15" b="15" /> 313<color type="text_field" state="deactivated" a="255" r="90" g="90" b="90" /> 314 315<!-- Rating star image --> 316<element type="rating" state="neutral" common="y" image="rating_star.png" /> 317 318<!-- Font color --> 319<color type="font" state="top" a="255" r="140" g="140" b="140" /> 320<color type="font" state="bottom" a="255" r="235" g="235" b="235" /> 321<color type="font" state="normal" a="255" r="220" g="220" b="220" /> 322 323</skin> 324