doc/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="1710"></A><A NAME="1711"></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 </PRE>
 173
 174 <P>
 175 Some of the drawing primitives allow extra attributes to be
 176 specified, also in the form
 177 <PRE>
 178 attr1-attr2-...-attrn
 179 </PRE>
 180 These extra attributes are called <SPAN  CLASS="textit">substyles</SPAN><A NAME="1722"></A>
 181 and allow, for example, the state of the object to be indicated
 182 by  different colour sets while keeping the interface at an
 183 abstract level and the drawing engine completely ignorant
 184 of the semantics - only the writer of the drawing engine
 185 configuration file has to know them. However the drawing
 186 engine can again interpret known substyles as special cases
 187 and the default engine indeed does so with frame tab
 188 tag and drag states.)
 189
 190 <P>
 191
 192 <H3><A NAME="SECTION00511000000000000000"></A>
 193 <A NAME="sec:styles"></A>
 194 <BR>
 195 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Known styles and substyles
 196 </H3>
 197
 198 <P>
 199
 200 <H4><A NAME="SECTION00511100000000000000">
 201 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN> Frames</A>
 202 </H4>
 203
 204 <P>
 205 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 206 <TR><TD ALIGN="LEFT">Style name</TD>
 207 <TD ALIGN="LEFT">Description</TD>
 208 </TR>
 209 <TR><TD ALIGN="LEFT"><TT>frame</TT></TD>
 210 <TD ALIGN="LEFT">Style for frames.
 211         Substyle attributes: <TT>active</TT>/<TT>inactive</TT>
 212         (mutually exclusive) and
 213         <TT>quasiactive</TT>/<TT>not_quasiactive</TT>.
 214         A frame is ``quasiactive'' when an active region
 215         has a backlink to it, such as a detached window.</TD>
 216 </TR>
 217 <TR><TD ALIGN="LEFT"><TT>frame-tiled</TT></TD>
 218 <TD ALIGN="LEFT">A more specific style for tiled frames.
 219         Substyle attributes as for <TT>frame</TT>.</TD>
 220 </TR>
 221 <TR><TD ALIGN="LEFT"><TT>frame-tiled-alt</TT></TD>
 222 <TD ALIGN="LEFT">An alternative style for tiled frames.
 223         Often used to disable the tab-bar.</TD>
 224 </TR>
 225 <TR><TD ALIGN="LEFT"><TT>frame-floating</TT></TD>
 226 <TD ALIGN="LEFT">A more specific style for floating
 227         frames.</TD>
 228 </TR>
 229 <TR><TD ALIGN="LEFT"><TT>frame-transient</TT></TD>
 230 <TD ALIGN="LEFT">A more specific style for frames
 231         containing transient windows.</TD>
 232 </TR>
 233 </TABLE>
 234
 235 <P>
 236
 237 <H4><A NAME="SECTION00511200000000000000">
 238 <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>
 239 </H4>
 240
 241 <P>
 242 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 243 <TR><TD ALIGN="LEFT">Style name</TD>
 244 <TD ALIGN="LEFT">Description</TD>
 245 </TR>
 246 <TR><TD ALIGN="LEFT"><TT>tab</TT></TD>
 247 <TD ALIGN="LEFT">Style for frames' tabs and menu entries.
 248         Substyle attributes:
 249         <TT>active</TT>/<TT>inactive</TT> and
 250         <TT>selected</TT>/<TT>unselected</TT></TD>
 251 </TR>
 252 <TR><TD ALIGN="LEFT"><TT>tab-frame</TT></TD>
 253 <TD ALIGN="LEFT">A more specific style for frames' tabs.
 254         Additional substyle attributes include:
 255         <TT>tagged</TT>/<TT>not_tagged</TT>,
 256         <TT>dragged</TT>/<TT>not_dragged</TT>,
 257         <TT>activity</TT>/<TT>no_activity</TT> and
 258         <TT>quasiactive</TT>/<TT>not_quasiactive</TT>.</TD>
 259 </TR>
 260 <TR><TD ALIGN="LEFT"><TT>tab-frame-tiled</TT>,</TD>
 261 <TD ALIGN="LEFT">&nbsp;</TD>
 262 </TR>
 263 <TR><TD ALIGN="LEFT"><TT>tab-frame-tiled-alt</TT>,</TD>
 264 <TD ALIGN="LEFT">&nbsp;</TD>
 265 </TR>
 266 <TR><TD ALIGN="LEFT"><TT>tab-frame-floating</TT>,</TD>
 267 <TD ALIGN="LEFT">&nbsp;</TD>
 268 </TR>
 269 <TR><TD ALIGN="LEFT"><TT>tab-frame-transient</TT></TD>
 270 <TD ALIGN="LEFT">More specific styles for frames in the
 271         different modes.</TD>
 272 </TR>
 273 <TR><TD ALIGN="LEFT"><TT>tab-menuentry</TT></TD>
 274 <TD ALIGN="LEFT">A more specific style for entries in WMenus.
 275         Additional substyle attributes include <TT>submenu</TT> and
 276         occasionally also <TT>activity</TT> is used.</TD>
 277 </TR>
 278 <TR><TD ALIGN="LEFT"><TT>tab-menuentry-bigmenu</TT></TD>
 279 <TD ALIGN="LEFT">An alternate style for entries in WMenus.</TD>
 280 </TR>
 281 </TABLE>
 282
 283 <P>
 284
 285 <H4><A NAME="SECTION00511300000000000000">
 286 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">1</SPAN>.<SPAN CLASS="arabic">3</SPAN> The rest</A>
 287 </H4>
 288
 289 <P>
 290 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 291 <TR><TD ALIGN="LEFT">Style name</TD>
 292 <TD ALIGN="LEFT">Description</TD>
 293 </TR>
 294 <TR><TD ALIGN="LEFT"><TT>input</TT></TD>
 295 <TD ALIGN="LEFT">A style for WInputs.</TD>
 296 </TR>
 297 <TR><TD ALIGN="LEFT"><TT>input-edln</TT></TD>
 298 <TD ALIGN="LEFT">A more specific style for WEdlns.
 299         Substyle attributes: <TT>selection</TT> for selected text and
 300         <TT>cursor</TT> for the cursor indicating current editing point.</TD>
 301 </TR>
 302 <TR><TD ALIGN="LEFT"><TT>input-message</TT></TD>
 303 <TD ALIGN="LEFT">A more specific style for WMessages.</TD>
 304 </TR>
 305 <TR><TD ALIGN="LEFT"><TT>input-menu</TT></TD>
 306 <TD ALIGN="LEFT">A more specific style for WMenus.</TD>
 307 </TR>
 308 <TR><TD ALIGN="LEFT"><TT>input-menu-bigmenu</TT></TD>
 309 <TD ALIGN="LEFT">An alternate style for WMenus.</TD>
 310 </TR>
 311 <TR><TD ALIGN="LEFT"><TT>moveres_display</TT></TD>
 312 <TD ALIGN="LEFT">The box displaying position/size when
 313         moving or resizing frames.</TD>
 314 </TR>
 315 <TR><TD ALIGN="LEFT"><TT>dock</TT></TD>
 316 <TD ALIGN="LEFT">The dock.</TD>
 317 </TR>
 318 </TABLE>
 319
 320 <P>
 321
 322 <H2><A NAME="SECTION00520000000000000000"></A>
 323 <A NAME="sec:defaultde"></A>
 324 <BR>
 325 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining styles for the default drawing engine
 326 </H2>
 327
 328 <P>
 329 Drawing engine style files are usually named
 330 <SPAN  CLASS="textit">look_foo.lua</SPAN> where <SPAN  CLASS="textit">foo</SPAN> is the name of the
 331 style. The file that Ion loads on startup or when
 332 <A HREF="node7.html#fn:gr.read_config"><TT>gr.read_config</TT></A> is called, however, is <SPAN  CLASS="textit">look.lua</SPAN>
 333 and should usually be symlinked to or a copy of of some
 334 <SPAN  CLASS="textit">look_foo.lua</SPAN>.
 335
 336 <P>
 337
 338 <H3><A NAME="SECTION00521000000000000000">
 339 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> The structure of the configuration files</A>
 340 </H3>
 341
 342 <P>
 343 The first thing to do in a style file is to choose the drawing
 344 engine, possibly loading the module as well. This is done
 345 with the following chunk of code.
 346
 347 <P>
 348 <PRE>
 349 if not gr.select_engine("de") then
 350     return
 351 end
 352 </PRE>
 353
 354 <P>
 355 The <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> function sees if the engine
 356 given as argument is registered (the default drawing engine is
 357 simply called ''de''). If the engine could not be found, it
 358 tries to load a module of the same name. If the engine still
 359 is not registered, <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> returns <TT>false</TT>
 360 and in this case we also exit the style setup script.
 361 If the engine was found, <A HREF="node7.html#fn:gr.select_engine"><TT>gr.select_engine</TT></A> sees that
 362 further requests for brushes are forwarded to that engine
 363 and returns <TT>true</TT>.
 364
 365 <P>
 366 Before defining new styles it may be a good idea to clear old
 367 styles from memory so if the old configuration defines more
 368 specific styles than the new, the old styles don't override
 369 those specified by the new configuration. That can be done by
 370 calling
 371
 372 <P>
 373 <PRE>
 374 de.reset()
 375 </PRE>
 376
 377 <P>
 378 After this the new styles can be defined with <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>
 379 as explained in the next subsection. Finally, after the styles have
 380 been defined we must ask objects on the screen to look up new brushes
 381 to reflect the changes in configuration. This is done with
 382
 383 <P>
 384 <PRE>
 385 gr.refresh()
 386 </PRE>
 387
 388 <P>
 389
 390 <H3><A NAME="SECTION00522000000000000000">
 391 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Defining the styles</A>
 392 </H3>
 393
 394 <P>
 395 Styles for the default drawing engine are defined with the
 396 function <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>. It has two arguments the first being
 397 a style specification as explained in previous sections and the second
 398 a table whose fields describe the style:
 399
 400 <P>
 401 <PRE>
 402 de.defstyle("some-style", {
 403     attribute = value,
 404     ...
 405 })
 406 </PRE>
 407
 408 <P>
 409 The supported attributes are described in tables below. The different
 410 border elements and styles referred to there are explained in Figure
 411 <A HREF="#fig:borders">4.1</A>.
 412
 413 <P>
 414
 415 <DIV ALIGN="CENTER"><A NAME="fig:borders"></A><A NAME="1819"></A>
 416 <TABLE>
 417 <CAPTION ALIGN="BOTTOM"><STRONG>Figure 4.1:</STRONG>
 418 Sketch of different border styles and elements</CAPTION>
 419 <TR><TD><PRE>
 420 Elevated:        Inlaid:         Ridge:            Groove:
 421   hhhhhhhhhhhs     ............    hhhhhhhhhhhs      sssssssssssh
 422   h..........s     .sssssssssh.    h..........s      s..........h
 423   h.        .s     .s        h.    h.sssssssh.s      s.hhhhhhhs.h
 424   h.        .s     .s        h.    h.s      h.s      s.h      s.h
 425   h.        .s     .s        h.    h.shhhhhhh.s      s.hsssssss.h
 426   h..........s     .shhhhhhhhh.    h..........s      s..........h
 427   hsssssssssss     ............    hsssssssssss      shhhhhhhhhhh
 428
 429 h = highlight, s = shadow, . = padding
 430 </PRE></TD></TR>
 431 </TABLE>
 432 </DIV>
 433
 434 <P>
 435
 436 <H4><A NAME="SECTION00522100000000000000">
 437 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">1</SPAN> Colours</A>
 438 </H4>
 439
 440 <P>
 441 Each of these fields a string of the form that can be
 442 passed to <TT>XAllocNamedColor</TT>. Valid strings are e.g.
 443 hexadecimal RGB specifications of the form
 444 <TT>#RRGGBB</TT> and colour names as specified
 445 in <SPAN  CLASS="textit">/usr/X11R6/lib/X11/rgb.txt</SPAN> (exact path varying).
 446
 447 <P>
 448 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 449 <TR><TD ALIGN="LEFT">Field</TD>
 450 <TD ALIGN="LEFT">Description</TD>
 451 </TR>
 452 <TR><TD ALIGN="LEFT"><TT>highlight_colour</TT></TD>
 453 <TD ALIGN="LEFT">Colour for the ''highlight'' part of a border.</TD>
 454 </TR>
 455 <TR><TD ALIGN="LEFT"><TT>shadow_colour</TT></TD>
 456 <TD ALIGN="LEFT">Colour for the ''highlight'' part of a border.</TD>
 457 </TR>
 458 <TR><TD ALIGN="LEFT"><TT>foreground_colour</TT></TD>
 459 <TD ALIGN="LEFT">Colour for the normal drawing operations, e.g. text.</TD>
 460 </TR>
 461 <TR><TD ALIGN="LEFT"><TT>background_colour</TT></TD>
 462 <TD ALIGN="LEFT">Window background colour (unless transparency is enabled) and
 463         background colour boxes.</TD>
 464 </TR>
 465 <TR><TD ALIGN="LEFT"><TT>padding_colour</TT></TD>
 466 <TD ALIGN="LEFT">Colour for the ''padding'' part of a border border. Set to
 467         <TT>background_colour</TT> if unset.</TD>
 468 </TR>
 469 </TABLE>
 470
 471 <P>
 472
 473 <H4><A NAME="SECTION00522200000000000000">
 474 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN> Borders and widths</A>
 475 </H4>
 476
 477 <P>
 478 All other fields below except <TT>border_style</TT> are non-negative integers
 479 indicating a number of pixels.
 480
 481 <P>
 482 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 483 <TR><TD ALIGN="LEFT">Field</TD>
 484 <TD ALIGN="LEFT">Description</TD>
 485 </TR>
 486 <TR><TD ALIGN="LEFT"><TT>border_style</TT></TD>
 487 <TD ALIGN="LEFT">A string indicating the style of border; one of
 488                      elevated/inlaid/ridge/groove as seen in the
 489                      above sketch.</TD>
 490 </TR>
 491 <TR><TD ALIGN="LEFT"><TT>highlight_pixels</TT></TD>
 492 <TD ALIGN="LEFT">Width of the highlight part of the border in pixels.</TD>
 493 </TR>
 494 <TR><TD ALIGN="LEFT"><TT>shadow_pixels</TT></TD>
 495 <TD ALIGN="LEFT">Width of the shadow part of the border in pixels.</TD>
 496 </TR>
 497 <TR><TD ALIGN="LEFT"><TT>padding_pixels</TT></TD>
 498 <TD ALIGN="LEFT">Width of the padding part of the border in pixels.</TD>
 499 </TR>
 500 <TR><TD ALIGN="LEFT"><TT>spacing</TT></TD>
 501 <TD ALIGN="LEFT">Space to be left between all kinds of boxes.</TD>
 502 </TR>
 503 </TABLE>
 504
 505 <P>
 506
 507 <H4><A NAME="SECTION00522300000000000000">
 508 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> Text</A>
 509 </H4>
 510
 511 <P>
 512 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 513 <TR><TD ALIGN="LEFT">Field</TD>
 514 <TD ALIGN="LEFT">Description</TD>
 515 </TR>
 516 <TR><TD ALIGN="LEFT"><TT>font</TT></TD>
 517 <TD ALIGN="LEFT">Font to be used in text-drawing operations; standard X font
 518              name.</TD>
 519 </TR>
 520 <TR><TD ALIGN="LEFT"><TT>text_align</TT></TD>
 521 <TD ALIGN="LEFT">How text is to be aligned in text boxes/tabs; one of
 522                    the strings left/right/center.</TD>
 523 </TR>
 524 </TABLE>
 525
 526 <P>
 527
 528 <H4><A NAME="SECTION00522400000000000000">
 529 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">4</SPAN> Miscellaneous</A>
 530 </H4>
 531
 532 <P>
 533 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 534 <TR><TD ALIGN="LEFT">Field</TD>
 535 <TD ALIGN="LEFT">Description</TD>
 536 </TR>
 537 <TR><TD ALIGN="LEFT"><TT>transparent_background</TT></TD>
 538 <TD ALIGN="LEFT">Should windows' that use this style
 539         background be transparent? true/false.</TD>
 540 </TR>
 541 <TR><TD ALIGN="LEFT"><TT>based_on</TT></TD>
 542 <TD ALIGN="LEFT">The name of a previously defined style that this
 543         style should be based on.</TD>
 544 </TR>
 545 </TABLE>
 546
 547 <P>
 548
 549 <H4><A NAME="SECTION00522500000000000000">
 550 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">5</SPAN> Substyles</A>
 551 </H4>
 552
 553 <P>
 554 As discussed in previous sections, styles may have substyles to e.g.
 555 indicate different states of the object being drawn. The ''de'' engine
 556 limits what can be configured in substyles to the set of colours in the
 557 first table above, but also specifically interprets for the main style
 558 <TT>tab-frame</TT> the substyles <TT>*-*-tagged</TT> and <TT>*-*-*-dragged</TT>
 559 by, respectively, drawing a right angle shape at the top right corner
 560 of a tab and by shading the tab with a stipple pattern. Also for
 561 menus the substyles <TT>*-*-submenu</TT> are handled as a special case.
 562
 563 <P>
 564 Substyles are defined with the function <A HREF="node7.html#fn:de.substyle"><TT>de.substyle</TT></A> within the
 565 table defining the main style. The parameters to this function are
 566 similar to those of <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>.
 567
 568 <P>
 569 <PRE>
 570 de.defstyle("some-style", {
 571    ...
 572    de.substyle("some-substyle", {
 573       ...
 574    }),
 575    ...
 576 })
 577 </PRE>
 578
 579 <P>
 580
 581 <H3><A NAME="SECTION00523000000000000000">
 582 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> An example</A>
 583 </H3>
 584
 585 <P>
 586 The following shortened segment from <SPAN  CLASS="textit">look_cleanviolet.lua</SPAN>
 587 should help to clarify the matters discussed in the previous
 588 subsection.
 589
 590 <P>
 591 <PRE>
 592 de.defstyle("*", {
 593     -- Gray background
 594     highlight_colour = "#eeeeee",
 595     shadow_colour = "#eeeeee",
 596     background_colour = "#aaaaaa",
 597     foreground_colour = "#000000",
 598
 599     shadow_pixels = 1,
 600     highlight_pixels = 1,
 601     padding_pixels = 1,
 602     spacing = 0,
 603     border_style = "elevated",
 604
 605     font = "-*-helvetica-medium-r-normal-*-12-*-*-*-*-*-*-*",
 606     text_align = "center",
 607 })
 608
 609 de.defstyle("tab-frame", {
 610     based_on = "*",
 611
 612     de.substyle("active-selected", {
 613         -- Violet tab
 614         highlight_colour = "#aaaacc",
 615         shadow_colour = "#aaaacc",
 616         background_colour = "#666699",
 617         foreground_colour = "#eeeeee",
 618     }),
 619
 620     --  More substyles would follow ...
 621 })
 622 </PRE>
 623
 624 <P>
 625
 626 <H2><A NAME="SECTION00530000000000000000">
 627 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN> Miscellaneous settings</A>
 628 </H2>
 629
 630 <P>
 631 The following style fields are independent of the drawing engine used,
 632 but are related to objects' styles and therefore configured in the drawing
 633 engine configuration file.
 634
 635 <P>
 636
 637 <H3><A NAME="SECTION00531000000000000000">
 638 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">1</SPAN> Extra fields for style <TT>frame</TT></A>
 639 </H3>
 640
 641 <P>
 642 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 643 <TR><TD ALIGN="LEFT">Field</TD>
 644 <TD ALIGN="LEFT">Description</TD>
 645 </TR>
 646 <TR><TD ALIGN="LEFT"><TT>bar</TT></TD>
 647 <TD ALIGN="LEFT">Controls the style of the tab-bar. Possible values
 648         are the strings <TT>"none"</TT>, <TT>"inside"</TT>, <TT>"outside"</TT>
 649         and <TT>"shaped"</TT>, with the last providing the PWM-style
 650         tab-bars for floating frames.</TD>
 651 </TR>
 652 <TR><TD ALIGN="LEFT"><TT>floatframe_tab_min_w</TT></TD>
 653 <TD ALIGN="LEFT">Minimum tab width in pixels for
 654         the shaped style, given that this number times number of tabs
 655         doesn't exceed frame width.</TD>
 656 </TR>
 657 <TR><TD ALIGN="LEFT"><TT>floatframe_bar_max_w_q</TT></TD>
 658 <TD ALIGN="LEFT">Maximum tab-bar width quotient of
 659         frame width for the shaped styles. A number in the
 660         interval <SPAN CLASS="MATH"></SPAN>.</TD>
 661 </TR>
 662 </TABLE>
 663
 664 <P>
 665
 666 <H3><A NAME="SECTION00532000000000000000">
 667 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">2</SPAN> Extra fields for style <TT>dock</TT></A>
 668 </H3>
 669
 670 <P>
 671 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 672 <TR><TD ALIGN="LEFT">Field</TD>
 673 <TD ALIGN="LEFT">Description</TD>
 674 </TR>
 675 <TR><TD ALIGN="LEFT"><TT>outline_style</TT></TD>
 676 <TD ALIGN="LEFT">How borders are drawn:
 677                         <TT>"none"</TT> - no border,
 678                         <TT>"all"</TT> - border around whole dock,
 679                         <TT>"each"</TT> - border around each dockapp.</TD>
 680 </TR>
 681 <TR><TD ALIGN="LEFT"><TT>tile_size</TT></TD>
 682 <TD ALIGN="LEFT">A table with entries <TT>width</TT> and <TT>height</TT>,
 683         indicating the width and height of tiles in pixels.</TD>
 684 </TR>
 685 </TABLE>
 686
 687 <P>
 688 Hopefully that's enough to get you started in writing new style
 689 configuration files for Ion. When in doubt, study the existing
 690 style configuration files.
 691
 692 <P>
 693
 694 <DIV CLASS="navigation"><HR>
 695 <!--Navigation Panel-->
 696 <A NAME="tex2html297"
 697   HREF="node6.html">
 698 <IMG WIDTH="37" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="next" SRC="next.png"></A>
 699 <A NAME="tex2html291"
 700   HREF="ionconf.html">
 701 <IMG WIDTH="26" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="up" SRC="up.png"></A>
 702 <A NAME="tex2html285"
 703   HREF="node4.html">
 704 <IMG WIDTH="63" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="previous" SRC="prev.png"></A>
 705 <A NAME="tex2html293"
 706   HREF="node1.html">
 707 <IMG WIDTH="65" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="contents" SRC="contents.png"></A>
 708 <A NAME="tex2html295"
 709   HREF="node11.html">
 710 <IMG WIDTH="43" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="index" SRC="index.png"></A>
 711 <BR>
 712 <B> Next:</B> <A NAME="tex2html298"
 713   HREF="node6.html">5. Scripting</A>
 714 <B> Up:</B> <A NAME="tex2html292"
 715   HREF="ionconf.html">Configuring and extending Ion3</A>
 716 <B> Previous:</B> <A NAME="tex2html286"
 717   HREF="node4.html">3. Basic configuration</A>
 718  &nbsp; <B>  <A NAME="tex2html294"
 719   HREF="node1.html">Contents</A></B>
 720  &nbsp; <B>  <A NAME="tex2html296"
 721   HREF="node11.html">Index</A></B> </DIV>
 722 <!--End of Navigation Panel-->
 723
 724 </BODY>
 725 </HTML>