ionconf/node5.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   2
   3 <!--Converted with LaTeX2HTML 2002-2-1 (1.71)
   4 original version by:  Nikos Drakos, CBLU, University of Leeds
   5 * revised and updated by:  Marcus Hennecke, Ross Moore, Herb Swan
   6 * with significant contributions from:
   7   Jens Lippmann, Marek Rouchal, Martin Wilck and others -->
   8 <HTML>
   9 <HEAD>
  10 <TITLE>4. Graphical styles</TITLE>
  11 <META NAME="description" CONTENT="4. Graphical styles">
  12 <META NAME="keywords" CONTENT="ionconf">
  13 <META NAME="resource-type" CONTENT="document">
  14 <META NAME="distribution" CONTENT="global">
  15
  16 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  17 <META NAME="Generator" CONTENT="LaTeX2HTML v2002-2-1">
  18 <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
  19
  20 <LINK REL="STYLESHEET" HREF="ionconf.css">
  21
  22 <LINK REL="next" HREF="node6.html">
  23 <LINK REL="previous" HREF="node4.html">
  24 <LINK REL="up" HREF="ionconf.html">
  25 <LINK REL="next" HREF="node6.html">
  26 </HEAD>
  27
  28 <BODY >
  29
  30 <DIV CLASS="navigation"><!--Navigation Panel-->
  31 <A NAME="tex2html297"
  32   HREF="node6.html">
  33 <IMG WIDTH="37" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="next" SRC="next.png"></A>
  34 <A NAME="tex2html291"
  35   HREF="ionconf.html">
  36 <IMG WIDTH="26" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="up" SRC="up.png"></A>
  37 <A NAME="tex2html285"
  38   HREF="node4.html">
  39 <IMG WIDTH="63" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="previous" SRC="prev.png"></A>
  40 <A NAME="tex2html293"
  41   HREF="node1.html">
  42 <IMG WIDTH="65" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="contents" SRC="contents.png"></A>
  43 <A NAME="tex2html295"
  44   HREF="node11.html">
  45 <IMG WIDTH="43" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="index" SRC="index.png"></A>
  46 <BR>
  47 <B> Next:</B> <A NAME="tex2html298"
  48   HREF="node6.html">5. Scripting</A>
  49 <B> Up:</B> <A NAME="tex2html292"
  50   HREF="ionconf.html">Configuring and extending Ion3</A>
  51 <B> Previous:</B> <A NAME="tex2html286"
  52   HREF="node4.html">3. Basic configuration</A>
  53  &nbsp; <B>  <A NAME="tex2html294"
  54   HREF="node1.html">Contents</A></B>
  55  &nbsp; <B>  <A NAME="tex2html296"
  56   HREF="node11.html">Index</A></B>
  57 <BR>
  58 <BR></DIV>
  59 <!--End of Navigation Panel-->
  60 <!--Table of Child-Links-->
  61 <A NAME="CHILD_LINKS"><STRONG>Subsections</STRONG></A>
  62
  63 <UL CLASS="ChildLinks">
  64 <LI><A NAME="tex2html299"
  65   HREF="node5.html#SECTION00510000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN> Drawing engines, style specifications and sub-styles</A>
  66 <UL>
  67 <LI><A NAME="tex2html300"
  68   HREF="node5.html#SECTION00511000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Known styles and substyles</A>
  69 <UL>
  70 <LI><A NAME="tex2html301"
  71   HREF="node5.html#SECTION00511100000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Frames</A>
  72 <LI><A NAME="tex2html302"
  73   HREF="node5.html#SECTION00511200000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">2</SPAN> Tabs and menu entries</A>
  74 <LI><A NAME="tex2html303"
  75   HREF="node5.html#SECTION00511300000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">3</SPAN> The rest</A>
  76 </UL>
  77 </UL>
  78 <BR>
  79 <LI><A NAME="tex2html304"
  80   HREF="node5.html#SECTION00520000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining styles for the default drawing engine</A>
  81 <UL>
  82 <LI><A NAME="tex2html305"
  83   HREF="node5.html#SECTION00521000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> The structure of the configuration files</A>
  84 <LI><A NAME="tex2html306"
  85   HREF="node5.html#SECTION00522000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining the styles</A>
  86 <UL>
  87 <LI><A NAME="tex2html307"
  88   HREF="node5.html#SECTION00522100000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> Colours</A>
  89 <LI><A NAME="tex2html308"
  90   HREF="node5.html#SECTION00522200000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Borders and widths</A>
  91 <LI><A NAME="tex2html309"
  92   HREF="node5.html#SECTION00522300000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> Text</A>
  93 <LI><A NAME="tex2html310"
  94   HREF="node5.html#SECTION00522400000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">4</SPAN> Miscellaneous</A>
  95 <LI><A NAME="tex2html311"
  96   HREF="node5.html#SECTION00522500000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">5</SPAN> Substyles</A>
  97 </UL>
  98 <LI><A NAME="tex2html312"
  99   HREF="node5.html#SECTION00523000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> An example</A>
 100 </UL>
 101 <BR>
 102 <LI><A NAME="tex2html313"
 103   HREF="node5.html#SECTION00530000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN> Miscellaneous settings</A>
 104 <UL>
 105 <LI><A NAME="tex2html314"
 106   HREF="node5.html#SECTION00531000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">1</SPAN> Extra fields for style <TT>frame</TT></A>
 107 <LI><A NAME="tex2html315"
 108   HREF="node5.html#SECTION00532000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">2</SPAN> Extra fields for style <TT>dock</TT></A>
 109 </UL></UL>
 110 <!--End of Table of Child-Links-->
 111 <HR>
 112
 113 <H1><A NAME="SECTION00500000000000000000"></A>
 114 <A NAME="chap:gr"></A>
 115 <BR>
 116 <SPAN CLASS="arabic">4</SPAN>. Graphical styles
 117 </H1>
 118
 119 <P>
 120 This chapter first gives in section <A HREF="#sec:engines">4.1</A> a general outline
 121 of how drawing engines are used, of style specifications and then
 122 in section <A HREF="#sec:defaultde">4.2</A> describes how to specify styles
 123 for the default drawing engine.
 124
 125 <P>
 126
 127 <H2><A NAME="SECTION00510000000000000000"></A>
 128 <A NAME="sec:engines"></A><A NAME="1665"></A><A NAME="1666"></A>
 129 <BR>
 130 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN> Drawing engines, style specifications and sub-styles
 131 </H2>
 132
 133 <P>
 134 Ion's drawing routines are abstracted into so-called drawing engine
 135 modules that can, again depending on the system, be dynamically
 136 loaded as needed. The drawing engine modules provide ''brushes''
 137 that objects can use to draw some high-level primitives such
 138 as borders and text boxes (in addition to simple text and rectangle
 139 drawing) on their windows and configure e.g. the shape and
 140 background of the window. While the drawing engines therefore
 141 do not directly implement looks for each possible object (that
 142 would hardly be maintainable), different brush styles can be
 143 used to give a distinctive look to different objects and engines
 144 could interpret some styles as special cases. Style specifications
 145 are strings of the form
 146
 147 <P>
 148 <PRE>
 149 element1-element2-...-elementn
 150 </PRE>
 151
 152 <P>
 153 An example of such a style specification is <TT>tab-frame</TT>;
 154 see the table in subsection <A HREF="#sec:styles">4.1.1</A> for more styles.
 155
 156 <P>
 157 When an object asks for a brush of certain style, the selected
 158 drawing engine will attempt to find the closest match to this
 159 specification. The styles/brushes defined by the drawing engines
 160 may have asterisks (<code>*</code>) as some of the elements indicating
 161 a match to anything. Exact matches are preferred to asterisk
 162 matches and longer matches to shorter. For example, let a brush
 163 for style <TT>foo-bar-baz</TT> be queried, then the following
 164 brushes are in order of preference:
 165
 166 <P>
 167 <PRE>
 168 foo-bar-baz
 169 foo-*-baz
 170 foo-bar
 171 *
 172 foo-baz   -- Doesn't match, not selected!
 173 </PRE>
 174
 175 <P>
 176 Some of the drawing primitives allow extra attributes to be
 177 specified, also in the form
 178 <PRE>
 179 attr1-attr2-...-attrn
 180 </PRE>
 181 These extra attributes are called <SPAN  CLASS="textit">substyles</SPAN><A NAME="1677"></A>
 182 and allow, for example, the state of the object to be indicated
 183 by  different colour sets while keeping the interface at an
 184 abstract level and the drawing engine completely ignorant
 185 of the semantics - only the writer of the drawing engine
 186 configuration file has to know them. However the drawing
 187 engine can again interpret known substyles as special cases
 188 and the default engine indeed does so with frame tab
 189 tag and drag states.)
 190
 191 <P>
 192
 193 <H3><A NAME="SECTION00511000000000000000"></A>
 194 <A NAME="sec:styles"></A>
 195 <BR>
 196 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Known styles and substyles
 197 </H3>
 198
 199 <P>
 200
 201 <H4><A NAME="SECTION00511100000000000000">
 202 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Frames</A>
 203 </H4>
 204
 205 <P>
 206 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 207 <TR><TD ALIGN="LEFT">Style name</TD>
 208 <TD ALIGN="LEFT">Description</TD>
 209 </TR>
 210 <TR><TD ALIGN="LEFT"><TT>frame</TT></TD>
 211 <TD ALIGN="LEFT">Style for frames.
 212         Substyles: <TT>active</TT>, <TT>inactive</TT>.</TD>
 213 </TR>
 214 <TR><TD ALIGN="LEFT"><TT>frame-tiled</TT></TD>
 215 <TD ALIGN="LEFT">A more specific style for tiled frames.
 216         Substyles as for <TT>frame</TT>.</TD>
 217 </TR>
 218 <TR><TD ALIGN="LEFT"><TT>frame-tiled-alt</TT></TD>
 219 <TD ALIGN="LEFT">An alternative style for tiled frames.
 220         Often used to disable the tab-bar.</TD>
 221 </TR>
 222 <TR><TD ALIGN="LEFT"><TT>frame-floating</TT></TD>
 223 <TD ALIGN="LEFT">A more specific style for floating
 224         frames.</TD>
 225 </TR>
 226 <TR><TD ALIGN="LEFT"><TT>frame-transient</TT></TD>
 227 <TD ALIGN="LEFT">A more specific style for frames
 228         containing transient windows.</TD>
 229 </TR>
 230 </TABLE>
 231
 232 <P>
 233
 234 <H4><A NAME="SECTION00511200000000000000">
 235 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">2</SPAN> Tabs and menu entries</A>
 236 </H4>
 237
 238 <P>
 239 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 240 <TR><TD ALIGN="LEFT">Style name</TD>
 241 <TD ALIGN="LEFT">Description</TD>
 242 </TR>
 243 <TR><TD ALIGN="LEFT"><TT>tab</TT></TD>
 244 <TD ALIGN="LEFT">Style for frames' tabs and menu entries.
 245         Substyles: combinations of the form <TT>a-s</TT> where
 246         <TT>a</TT> is one of <TT>active</TT>/<TT>inactive</TT> and
 247         <TT>s</TT> is one of <TT>selected</TT>/<TT>unselected</TT></TD>
 248 </TR>
 249 <TR><TD ALIGN="LEFT"><TT>tab-frame</TT></TD>
 250 <TD ALIGN="LEFT">A more specific style for frames' tabs.
 251         Substyles: combinations of the form <TT>a-s-t-d-u</TT> where
 252         <TT>a</TT> and <TT>s</TT> are as above and
 253         <TT>t</TT> is one of <TT>tagged</TT>/<TT>not_tagged</TT>,
 254         <TT>d</TT> is one of <TT>dragged</TT>/<TT>not_dragged</TT> and
 255         <TT>u</TT> is one of <TT>activity</TT>/<TT>no_activity</TT>.</TD>
 256 </TR>
 257 <TR><TD ALIGN="LEFT"><TT>tab-frame-tiled</TT>,</TD>
 258 <TD ALIGN="LEFT">&nbsp;</TD>
 259 </TR>
 260 <TR><TD ALIGN="LEFT"><TT>tab-frame-tiled-alt</TT>,</TD>
 261 <TD ALIGN="LEFT">&nbsp;</TD>
 262 </TR>
 263 <TR><TD ALIGN="LEFT"><TT>tab-frame-floating</TT>,</TD>
 264 <TD ALIGN="LEFT">&nbsp;</TD>
 265 </TR>
 266 <TR><TD ALIGN="LEFT"><TT>tab-frame-transient</TT></TD>
 267 <TD ALIGN="LEFT">More specific styles for frames in the
 268         different modes.</TD>
 269 </TR>
 270 <TR><TD ALIGN="LEFT"><TT>tab-menuentry</TT></TD>
 271 <TD ALIGN="LEFT">A more specific style for entries in WMenus.</TD>
 272 </TR>
 273 <TR><TD ALIGN="LEFT"><TT>tab-menuentry-bigmenu</TT></TD>
 274 <TD ALIGN="LEFT">An alternate style for entries in WMenus.</TD>
 275 </TR>
 276 </TABLE>
 277
 278 <P>
 279
 280 <H4><A NAME="SECTION00511300000000000000">
 281 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">3</SPAN> The rest</A>
 282 </H4>
 283
 284 <P>
 285 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 286 <TR><TD ALIGN="LEFT">Style name</TD>
 287 <TD ALIGN="LEFT">Description</TD>
 288 </TR>
 289 <TR><TD ALIGN="LEFT"><TT>input</TT></TD>
 290 <TD ALIGN="LEFT">A style for WInputs.</TD>
 291 </TR>
 292 <TR><TD ALIGN="LEFT"><TT>input-edln</TT></TD>
 293 <TD ALIGN="LEFT">A more specific style for WEdlns.
 294         Substyles: <TT>selection</TT> for selected text and
 295         <TT>cursor</TT> for the cursor indicating current editing point.</TD>
 296 </TR>
 297 <TR><TD ALIGN="LEFT"><TT>input-message</TT></TD>
 298 <TD ALIGN="LEFT">A more specific style for WMessages.</TD>
 299 </TR>
 300 <TR><TD ALIGN="LEFT"><TT>input-menu</TT></TD>
 301 <TD ALIGN="LEFT">A more specific style for WMenus.</TD>
 302 </TR>
 303 <TR><TD ALIGN="LEFT"><TT>input-menu-bigmenu</TT></TD>
 304 <TD ALIGN="LEFT">An alternate style for WMenus.</TD>
 305 </TR>
 306 <TR><TD ALIGN="LEFT"><TT>moveres_display</TT></TD>
 307 <TD ALIGN="LEFT">The box displaying position/size when
 308         moving or resizing frames.</TD>
 309 </TR>
 310 <TR><TD ALIGN="LEFT"><TT>dock</TT></TD>
 311 <TD ALIGN="LEFT">The dock.</TD>
 312 </TR>
 313 </TABLE>
 314
 315 <P>
 316
 317 <H2><A NAME="SECTION00520000000000000000"></A>
 318 <A NAME="sec:defaultde"></A>
 319 <BR>
 320 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining styles for the default drawing engine
 321 </H2>
 322
 323 <P>
 324 Drawing engine style files are usually named
 325 <SPAN  CLASS="textit">look_foo.lua</SPAN> where <SPAN  CLASS="textit">foo</SPAN> is the name of the
 326 style. The file that Ion loads on startup or when
 327 <A HREF="node7.html#fn:gr.read_config"><TT>gr.read_config</TT></A> is called, however, is <SPAN  CLASS="textit">look.lua</SPAN>
 328 and should usually be symlinked to or a copy of of some
 329 <SPAN  CLASS="textit">look_foo.lua</SPAN>.
 330
 331 <P>
 332
 333 <H3><A NAME="SECTION00521000000000000000">
 334 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> The structure of the configuration files</A>
 335 </H3>
 336
 337 <P>
 338 The first thing to do in a stylefile is to choose the drawing
 339 engine, possibly loading the module as well. This is done
 340 with the following chunk of code.
 341
 342 <P>
 343 <PRE>
 344 if not gr.select_engine("de") then
 345     return
 346 end
 347 </PRE>
 348
 349 <P>
 350 The <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> function sees if the engine
 351 given as argument is registered (the default drawing engine is
 352 simply called ''de''). If the engine could not be found, it
 353 tries to load a module of the same name. If the engine still
 354 is not registered, <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> returns <TT>false</TT>
 355 and in this case we also exit the style setup script.
 356 If the engine was found, <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> sees that
 357 further requests for brushes are forwarded to that engine
 358 and returns <TT>true</TT>.
 359
 360 <P>
 361 Before defining new styles it may be a good idea to clear old
 362 styles from memory so if the old configuration defines more
 363 specific styles than the new, the old styles don't override
 364 those specified by the new configuration. That can be done by
 365 calling
 366
 367 <P>
 368 <PRE>
 369 de.reset()
 370 </PRE>
 371
 372 <P>
 373 After this the new styles can be defined with <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>
 374 as explained in the next subsection. Finally, after the styles have
 375 been defined we must ask objects on the screen to look up new brushes
 376 to reflect the changes in configuration. This is done with
 377
 378 <P>
 379 <PRE>
 380 gr.refresh()
 381 </PRE>
 382
 383 <P>
 384
 385 <H3><A NAME="SECTION00522000000000000000">
 386 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining the styles</A>
 387 </H3>
 388
 389 <P>
 390 Styles for the default drawing engine are defined with the
 391 function <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>. It has two arguments the first being
 392 a style specification as explained in previous sections and the second
 393 a table whose fields describe the style:
 394
 395 <P>
 396 <PRE>
 397 de.defstyle("some-style", {
 398     attribute = value,
 399     ...
 400 })
 401 </PRE>
 402
 403 <P>
 404 The supported attributes are described in tables below. The different
 405 border elements and styles referred to there are explained in Figure
 406 <A HREF="#fig:borders">4.1</A>.
 407
 408 <P>
 409
 410 <DIV ALIGN="CENTER"><A NAME="fig:borders"></A><A NAME="1777"></A>
 411 <TABLE>
 412 <CAPTION ALIGN="BOTTOM"><STRONG>Figure 4.1:</STRONG>
 413 Sketch of different border styles and elements</CAPTION>
 414 <TR><TD><PRE>
 415 Elevated:        Inlaid:         Ridge:            Groove:
 416   hhhhhhhhhhhs     ............    hhhhhhhhhhhs      sssssssssssh
 417   h..........s     .sssssssssh.    h..........s      s..........h
 418   h.        .s     .s        h.    h.sssssssh.s      s.hhhhhhhs.h
 419   h.        .s     .s        h.    h.s      h.s      s.h      s.h
 420   h.        .s     .s        h.    h.shhhhhhh.s      s.hsssssss.h
 421   h..........s     .shhhhhhhhh.    h..........s      s..........h
 422   hsssssssssss     ............    hsssssssssss      shhhhhhhhhhh
 423
 424 h = highlight, s = shadow, . = padding
 425 </PRE></TD></TR>
 426 </TABLE>
 427 </DIV>
 428
 429 <P>
 430
 431 <H4><A NAME="SECTION00522100000000000000">
 432 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> Colours</A>
 433 </H4>
 434
 435 <P>
 436 Each of these fields a string of the form that can be
 437 passed to <TT>XAllocNamedColor</TT>. Valid strings are e.g.
 438 hexadecimal RGB specifications of the form
 439 <TT>#RRGGBB</TT> and colour names as specified
 440 in <SPAN  CLASS="textit">/usr/X11R6/lib/X11/rgb.txt</SPAN> (exact path varying).
 441
 442 <P>
 443 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 444 <TR><TD ALIGN="LEFT">Field</TD>
 445 <TD ALIGN="LEFT">Description</TD>
 446 </TR>
 447 <TR><TD ALIGN="LEFT"><TT>highlight_colour</TT></TD>
 448 <TD ALIGN="LEFT">Colour for the ''highlight'' part of a border.</TD>
 449 </TR>
 450 <TR><TD ALIGN="LEFT"><TT>shadow_colour</TT></TD>
 451 <TD ALIGN="LEFT">Colour for the ''highlight'' part of a border.</TD>
 452 </TR>
 453 <TR><TD ALIGN="LEFT"><TT>foreground_colour</TT></TD>
 454 <TD ALIGN="LEFT">Colour for the normal drawing operations, e.g. text.</TD>
 455 </TR>
 456 <TR><TD ALIGN="LEFT"><TT>background_colour</TT></TD>
 457 <TD ALIGN="LEFT">Window background colour (unless transparency is enabled) and
 458         background colour boxes.</TD>
 459 </TR>
 460 <TR><TD ALIGN="LEFT"><TT>padding_colour</TT></TD>
 461 <TD ALIGN="LEFT">Colour for the ''padding'' part of a border border. Set to
 462         <TT>background_colour</TT> if unset.</TD>
 463 </TR>
 464 </TABLE>
 465
 466 <P>
 467
 468 <H4><A NAME="SECTION00522200000000000000">
 469 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Borders and widths</A>
 470 </H4>
 471
 472 <P>
 473 All other fields below except <TT>border_style</TT> are non-negative integers
 474 indicating a number of pixels.
 475
 476 <P>
 477 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 478 <TR><TD ALIGN="LEFT">Field</TD>
 479 <TD ALIGN="LEFT">Description</TD>
 480 </TR>
 481 <TR><TD ALIGN="LEFT"><TT>border_style</TT></TD>
 482 <TD ALIGN="LEFT">A string indicating the style of border; one of
 483                      elevated/inlaid/ridge/groove as seen in the
 484                      above sketch.</TD>
 485 </TR>
 486 <TR><TD ALIGN="LEFT"><TT>highlight_pixels</TT></TD>
 487 <TD ALIGN="LEFT">Width of the highlight part of the border in pixels.</TD>
 488 </TR>
 489 <TR><TD ALIGN="LEFT"><TT>shadow_pixels</TT></TD>
 490 <TD ALIGN="LEFT">Width of the shadow part of the border in pixels.</TD>
 491 </TR>
 492 <TR><TD ALIGN="LEFT"><TT>padding_pixels</TT></TD>
 493 <TD ALIGN="LEFT">Width of the padding part of the border in pixels.</TD>
 494 </TR>
 495 <TR><TD ALIGN="LEFT"><TT>spacing</TT></TD>
 496 <TD ALIGN="LEFT">Space to be left between all kinds of boxes.</TD>
 497 </TR>
 498 </TABLE>
 499
 500 <P>
 501
 502 <H4><A NAME="SECTION00522300000000000000">
 503 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> Text</A>
 504 </H4>
 505
 506 <P>
 507 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 508 <TR><TD ALIGN="LEFT">Field</TD>
 509 <TD ALIGN="LEFT">Description</TD>
 510 </TR>
 511 <TR><TD ALIGN="LEFT"><TT>font</TT></TD>
 512 <TD ALIGN="LEFT">Font to be used in text-drawing operations; standard X font
 513              name.</TD>
 514 </TR>
 515 <TR><TD ALIGN="LEFT"><TT>text_align</TT></TD>
 516 <TD ALIGN="LEFT">How text is to be aligned in text boxes/tabs; one of
 517                    the strings left/right/center.</TD>
 518 </TR>
 519 </TABLE>
 520
 521 <P>
 522
 523 <H4><A NAME="SECTION00522400000000000000">
 524 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">4</SPAN> Miscellaneous</A>
 525 </H4>
 526
 527 <P>
 528 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 529 <TR><TD ALIGN="LEFT">Field</TD>
 530 <TD ALIGN="LEFT">Description</TD>
 531 </TR>
 532 <TR><TD ALIGN="LEFT"><TT>transparent_background</TT></TD>
 533 <TD ALIGN="LEFT">Should windows' that use this style
 534         background be transparent? true/false.</TD>
 535 </TR>
 536 <TR><TD ALIGN="LEFT"><TT>based_on</TT></TD>
 537 <TD ALIGN="LEFT">The name of a previously defined style that this
 538         style should be based on.</TD>
 539 </TR>
 540 </TABLE>
 541
 542 <P>
 543
 544 <H4><A NAME="SECTION00522500000000000000">
 545 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">5</SPAN> Substyles</A>
 546 </H4>
 547
 548 <P>
 549 As discussed in previous sections, styles may have substyles to e.g.
 550 indicate different states of the object being drawn. The ''de'' engine
 551 limits what can be configured in substyles to the set of colours in the
 552 first table above, but also specifically interprets for the main style
 553 <TT>tab-frame</TT> the substyles <TT>*-*-tagged</TT> and <TT>*-*-*-dragged</TT>
 554 by, respectively, drawing a right angle shape at the top right corner
 555 of a tab and by shading the tab with a stipple pattern. Also for
 556 menus the substyles <TT>*-*-submenu</TT> are handled as a special case.
 557
 558 <P>
 559 Substyles are defined with the function <A HREF="node7.html#fn:de.substyle"><TT>de.substyle</TT></A> within the
 560 table defining the main style. The parameters to this function are
 561 similar to those of <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>.
 562
 563 <P>
 564 <PRE>
 565 de.defstyle("some-style", {
 566    ...
 567    de.substyle("some-substyle", {
 568       ...
 569    }),
 570    ...
 571 })
 572 </PRE>
 573
 574 <P>
 575
 576 <H3><A NAME="SECTION00523000000000000000">
 577 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> An example</A>
 578 </H3>
 579
 580 <P>
 581 The following shortened segment from <SPAN  CLASS="textit">look_cleanviolet.lua</SPAN>
 582 should help to clarify the matters discussed in the previous
 583 subsection.
 584
 585 <P>
 586 <PRE>
 587 de.defstyle("*", {
 588     -- Gray background
 589     highlight_colour = "#eeeeee",
 590     shadow_colour = "#eeeeee",
 591     background_colour = "#aaaaaa",
 592     foreground_colour = "#000000",
 593
 594     shadow_pixels = 1,
 595     highlight_pixels = 1,
 596     padding_pixels = 1,
 597     spacing = 0,
 598     border_style = "elevated",
 599
 600     font = "-*-helvetica-medium-r-normal-*-12-*-*-*-*-*-*-*",
 601     text_align = "center",
 602 })
 603
 604 de.defstyle("tab-frame", {
 605     based_on = "*",
 606
 607     de.substyle("active-selected", {
 608         -- Violet tab
 609         highlight_colour = "#aaaacc",
 610         shadow_colour = "#aaaacc",
 611         background_colour = "#666699",
 612         foreground_colour = "#eeeeee",
 613     }),
 614
 615     --  More substyles would follow ...
 616 })
 617 </PRE>
 618
 619 <P>
 620
 621 <H2><A NAME="SECTION00530000000000000000">
 622 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN> Miscellaneous settings</A>
 623 </H2>
 624
 625 <P>
 626 The following style fields are independent of the drawing engine used,
 627 but are related to objects' styles and therefore configured in the drawing
 628 engine configuration file.
 629
 630 <P>
 631
 632 <H3><A NAME="SECTION00531000000000000000">
 633 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">1</SPAN> Extra fields for style <TT>frame</TT></A>
 634 </H3>
 635
 636 <P>
 637 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 638 <TR><TD ALIGN="LEFT">Field</TD>
 639 <TD ALIGN="LEFT">Description</TD>
 640 </TR>
 641 <TR><TD ALIGN="LEFT"><TT>bar</TT></TD>
 642 <TD ALIGN="LEFT">Controls the style of the tab-bar. Possible values
 643         are the strings <TT>"none"</TT>, <TT>"inside"</TT>, <TT>"outside"</TT>
 644         and <TT>"shaped"</TT>, with the last providing the PWM-style
 645         tab-bars for floating frames.</TD>
 646 </TR>
 647 <TR><TD ALIGN="LEFT"><TT>floatframe_tab_min_w</TT></TD>
 648 <TD ALIGN="LEFT">Minimum tab width in pixels for
 649         the shaped style, given that this number times number of tabs
 650         doesn't exceed frame width.</TD>
 651 </TR>
 652 <TR><TD ALIGN="LEFT"><TT>floatframe_bar_max_w_q</TT></TD>
 653 <TD ALIGN="LEFT">Maximum tab-bar width quotient of
 654         frame width for the shaped styles. A number in the
 655         interval <SPAN CLASS="MATH"></SPAN>.</TD>
 656 </TR>
 657 </TABLE>
 658
 659 <P>
 660
 661 <H3><A NAME="SECTION00532000000000000000">
 662 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">2</SPAN> Extra fields for style <TT>dock</TT></A>
 663 </H3>
 664
 665 <P>
 666 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 667 <TR><TD ALIGN="LEFT">Field</TD>
 668 <TD ALIGN="LEFT">Description</TD>
 669 </TR>
 670 <TR><TD ALIGN="LEFT"><TT>outline_style</TT></TD>
 671 <TD ALIGN="LEFT">How borders are drawn:
 672                         <TT>"none"</TT> - no border,
 673                         <TT>"all"</TT> - border around whole dock,
 674                         <TT>"each"</TT> - border around each dockapp.</TD>
 675 </TR>
 676 <TR><TD ALIGN="LEFT"><TT>tile_size</TT></TD>
 677 <TD ALIGN="LEFT">A table with entries <TT>width</TT> and <TT>height</TT>,
 678         indicating the width and height of tiles in pixels.</TD>
 679 </TR>
 680 </TABLE>
 681
 682 <P>
 683 Hopefully that's enough to get you started in writing new style
 684 configuration files for Ion. When in doubt, study the existing
 685 style configuration files.
 686
 687 <P>
 688
 689 <DIV CLASS="navigation"><HR>
 690 <!--Navigation Panel-->
 691 <A NAME="tex2html297"
 692   HREF="node6.html">
 693 <IMG WIDTH="37" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="next" SRC="next.png"></A>
 694 <A NAME="tex2html291"
 695   HREF="ionconf.html">
 696 <IMG WIDTH="26" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="up" SRC="up.png"></A>
 697 <A NAME="tex2html285"
 698   HREF="node4.html">
 699 <IMG WIDTH="63" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="previous" SRC="prev.png"></A>
 700 <A NAME="tex2html293"
 701   HREF="node1.html">
 702 <IMG WIDTH="65" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="contents" SRC="contents.png"></A>
 703 <A NAME="tex2html295"
 704   HREF="node11.html">
 705 <IMG WIDTH="43" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="index" SRC="index.png"></A>
 706 <BR>
 707 <B> Next:</B> <A NAME="tex2html298"
 708   HREF="node6.html">5. Scripting</A>
 709 <B> Up:</B> <A NAME="tex2html292"
 710   HREF="ionconf.html">Configuring and extending Ion3</A>
 711 <B> Previous:</B> <A NAME="tex2html286"
 712   HREF="node4.html">3. Basic configuration</A>
 713  &nbsp; <B>  <A NAME="tex2html294"
 714   HREF="node1.html">Contents</A></B>
 715  &nbsp; <B>  <A NAME="tex2html296"
 716   HREF="node11.html">Index</A></B> </DIV>
 717 <!--End of Navigation Panel-->
 718
 719 </BODY>
 720 </HTML>