home *** CD-ROM | disk | FTP | other *** search
/ Freelog 8 / Freelog008.iso / Efx / SKINFAQ.TXT < prev   
Text File  |  1998-11-23  |  9KB  |  206 lines
  1. -------------------------------------------------------------------------------
  2. eFX Skin FAQ v0.21 updated 11/22/98
  3. Maintained by Bryan Beretta <tfboc@thirty4.com>
  4. Current version can be found at http://thirty4.com/skinfaq.txt
  5. -------------------------------------------------------------------------------
  6.  
  7. Changes since v0.2
  8.     -Added info about BTN_EXEC
  9.     -Fixed some stuff =]
  10. Changes since v0.1
  11.     -Added info about titlebar text alignment.
  12.     -Updated the BTN_SIZE information about the new format.
  13.  
  14. OK, there are a bunch of tiny details related to skins that are probably going
  15. to generate a lot of questions. So here's an attempt to minimize confusion. =]
  16.  
  17. Skin basics
  18. --------------
  19.  
  20. The basic layout of a skin looks something like this:
  21.  
  22. BEGINTOP
  23.     RIGHT BUTTON titlebar.bmp STRETCH BTN_MOVE
  24.     RIGHT BUTTON btn-min.bmp NORMAL BTN_MIN
  25.     RIGHT BUTTON btn-max.bmp NORMAL BTN_MAX
  26.     RIGHT BUTTON btn-close.bmp NORMAL BTN_CLOSE
  27. ENDTOP
  28.  
  29. BEGINLEFT
  30.     TOP BUTTON fr-left.bmp STRETCH BTN_SIZE
  31. ENDLEFT
  32.  
  33. BEGINRIGHT
  34.     TOP BUTTON fr-right.bmp STRETCH BTN_SIZE
  35. ENDRIGHT
  36.  
  37. BEGINBOTTOM
  38.     RIGHT BUTTON fr-bottom.bmp STRETCH BTN_SIZE
  39. ENDBOTTOM
  40.  
  41. Not too difficult to understand. There's a section specifying what graphics go
  42. where for each side of the window. This script would be for a basic layout
  43. similar to the default Windows look. Here is the basic syntax of a line:
  44.  
  45.     <JUSTIFICATION> <TYPE> <IMAGE> <SIZING METHOD> <FUNCTION>
  46.  
  47. -------------------------------------------------------------------------------
  48. Key
  49. -------------------------------------------------------------------------------
  50. <JUSTIFICATION>     How the graphic is justified. Valid options are LEFT and
  51.                     RIGHT.
  52.          <TYPE>     Just use BUTTON for now, I'll explain later. =]
  53.         <IMAGE>     The name of the BMP file to be used.
  54. <SIZING METHOD>     How the graphic reacts to the varying condition of window
  55.                     dimensions. Valid options are STRETCH, TILE, and NORMAL.
  56.      <FUNCTION>     What function the graphic performs when selected/clicked.
  57.                     Valid options are BTN_SIZE_*, BTN_MOVE, BTN_MIN, BTN_MAX,
  58.                     BTN_CLOSE, and BTN_EXEC.
  59.  
  60. The * in BTN_SIZE_* needs to be replaced with the button's location. Valid
  61. options are BTN_SIZE_LEFT, BTN_SIZE_RIGHT, BTN_SIZE_TOP, BTN_SIZE_BOTTOM,
  62. BTN_SIZE_BOTTOMLEFT, BTN_SIZE_BOTTOMRIGHT, BTN_SIZE_TOPLEFT, and
  63. BTN_SIZE_TOPRIGHT.
  64.  
  65. BTN_EXEC allows you to add buttons to run external programs. Just give it a
  66. command line argument for your desired program. ie. BTN_EXEC "c:\ultraedit.exe"
  67. -------------------------------------------------------------------------------
  68.  
  69. Text basics
  70. --------------
  71.  
  72. If you have an abnormal/non-standard skin, you may need to modify the way the
  73. titlebar text is displayed. Here's a sample section which would appear at the
  74. top of the skin script:
  75.  
  76. BEGINTEXT
  77.     FONT "Arial" 14 BOLD
  78.     OFFSET 20 2 230 -2
  79.     ALIGN LEFT
  80.     ACTIVECOLOR 000000
  81.     INACTIVECOLOR 808080
  82. ENDTEXT
  83.  
  84. It's fairly simple, but the OFFSET stuff may be a little tricky so read on. =]
  85.  
  86.     FONT <FONT> <SIZE> <FORMAT>
  87.  
  88. -------------------------------------------------------------------------------
  89. Key
  90. -------------------------------------------------------------------------------
  91. <FONT>      The name of the font. If it includes spaces it must be in quotes.
  92. <SIZE>      Um... =]
  93. <FORMAT>    The format of the text. Valid options are THIN, NORMAL, BOLD, and
  94.             HEAVY.
  95. -------------------------------------------------------------------------------
  96.  
  97.     OFFSET <BEGIN X> <BEGIN Y> <END X> <END Y>
  98.  
  99. -------------------------------------------------------------------------------
  100. Key
  101. -------------------------------------------------------------------------------
  102. <BEGIN/END X>   This specifies the horizontal range for the titlebar text. This
  103.                 is useful for when you have a skins with abnormal titlebars
  104.                 that don't span the entire width of the window or if the
  105.                 titlebar has graphics you don't want covered up by text.
  106. <BEGIN/END Y>   These do the same as above but for vertical placement. Helpful
  107.                 when you have a gap between the window and the titlebar.
  108.  
  109. That might be a little confusing so here's a quick example. Say your title bar
  110. has some graphics on the left that you don't want covered up, like Dreamworks
  111. for example. Lets say the graphics are 20 pixels wide. In that case, you'd want
  112. to make <BEGIN X> something like 25, that way you pass the graphics and have a
  113. small buffer space before the text starts. Lets say those graphics are also on
  114. the right side of the titlebar. Make <END X> -25, this tells eFX to stop
  115. printing text 25 pixels in from the right side. The same applies for the Y
  116. settings. <BEGIN Y> applies to the top, and <END Y> applies to the bottom. So if
  117. you want your text to be up 5 pixels from the bottom of the titlebar, give <END
  118. Y> a value of -5.
  119. -------------------------------------------------------------------------------
  120.  
  121.     ALIGN <ALIGNMENT>
  122.  
  123. -------------------------------------------------------------------------------
  124. Key
  125. -------------------------------------------------------------------------------
  126. <ALIGNMENT>     Pretty self explanatory. Valid options are LEFT, CENTER, and
  127.                 RIGHT
  128. -------------------------------------------------------------------------------
  129.  
  130.     ACTIVECOLOR <RRGGBB>
  131.     INACTIVECOLOR <RRGGBB>
  132.  
  133. -------------------------------------------------------------------------------
  134. Key
  135. -------------------------------------------------------------------------------
  136. <RRGGBB>    These specify the color in hex RGB. It's the same method used in
  137.             HTML.
  138.  
  139. ACTIVECOLOR specifies the color of the titlebar text in the active window,
  140. INACTIVECOLOR specifies the color of the titlebar text in all the other inactive
  141. windows.
  142. -------------------------------------------------------------------------------
  143.  
  144. Misc notes
  145. --------------
  146.  
  147. Now, there are a few things that we came across while messing with skins that
  148. would be good to know. So here are a few tips:
  149.  
  150. Corners part A
  151. --------------
  152. Corners can be tricky if you want them to look a certain way. Especially if you
  153. want rounded corners. If you have the corners as part of a side graphic, they're
  154. in danger of being stretched out which could mess up the alignment. And
  155. currently, there is a bug with transparency where it doesn't work on stretched
  156. images. This results in having nasty pink spots on the corners of your windows.
  157. So, the best way to do corners is to make them separate buttons that you stick
  158. on either side of the side graphic. Lets take the HoG BLue skin for example. If
  159. you notice, the corners are all rounded, which results in a nice clean border.
  160. Each corner is a separate graphic. Lets take a look at part of it's script:
  161.  
  162. BEGINBOTTOM
  163.     LEFT BUTTON cnr-bottomleft.bmp NORMAL BTN_SIZE
  164.     LEFT BUTTON frm-bottom.bmp STRETCH BTN_SIZE
  165.     RIGHT BUTTON cnr-bottomright.bmp NORMAL BTN_SIZE
  166. ENDBOTTOM
  167.  
  168. As you can see, it starts out with the left corner, then the bottom frame, and
  169. following that the right corner. This allows the corners to keep their size no
  170. matter what the dimension of the window. It is generally a good idea to use this
  171. method whenever you have significant corners. And remember, the top and bottom
  172. edges of the window are the sides use the entire length of the window. So when
  173. specifying corner graphics, you must have them on the top or bottom frame.
  174.  
  175. Corners part B
  176. --------------
  177. Another important thing to know is that eFX calculates justification in regards
  178. to the images sizes rather than the window dimensions. Huh? Let me explain. =]
  179. Once again lets look at HoG Blue. You'll notice it's buttons in the upper left
  180. corner of the window. The way they're done, is they protrude 15 pixels out from
  181. the border for the 3 buttons and then it kinda smooths back to 5 pixels into the
  182. border. Now, take a look at that bottom right corner. In order to make that
  183. align with the right frame, we had to pad it with 15 extra transparent pixels on
  184. the right side. Why? because, like I said, eFX calculates justification based on
  185. image size. Those extra 15 pixels compensate for the protrusion of the buttons
  186. up above. If we didn't have those extra pixels there, the corner would go 15
  187. pixels past the right frame because it would be justified to the edge of the
  188. right frame graphics which are 15 pixels wider than the corner graphic. That
  189. might sound confusing but if you open up the graphics in Photoshop or something
  190. and arrange them to form a border you'll understand better.
  191.  
  192. Justification
  193. -------------
  194. There's currently a bug that prevents graphics from justifying to the right side
  195. unless there's a graphic before them on the same line. So, for example, you
  196. couldn't have nothing but a few buttons as your title bar and have them on the
  197. right side. You'd need a graphic of some sort on the tope before them. The way
  198. around this for now is to simply make a transparent section and stick it up
  199. there before you're desired graphic.
  200.  
  201. ---
  202. Well, that's it for right now. HTML version coming soon! -tfboc
  203. -------------------------------------------------------------------------------
  204. EoF
  205. -------------------------------------------------------------------------------
  206.