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="tex2html304"
  32   HREF="node6.html">
  33 <IMG WIDTH="37" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="next" SRC="next.png"></A>
  34 <A NAME="tex2html298"
  35   HREF="ionconf.html">
  36 <IMG WIDTH="26" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="up" SRC="up.png"></A>
  37 <A NAME="tex2html292"
  38   HREF="node4.html">
  39 <IMG WIDTH="63" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="previous" SRC="prev.png"></A>
  40 <A NAME="tex2html300"
  41   HREF="node1.html">
  42 <IMG WIDTH="65" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="contents" SRC="contents.png"></A>
  43 <A NAME="tex2html302"
  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="tex2html305"
  48   HREF="node6.html">5. Scripting</A>
  49 <B> Up:</B> <A NAME="tex2html299"
  50   HREF="ionconf.html">Configuring and extending Ion3</A>
  51 <B> Previous:</B> <A NAME="tex2html293"
  52   HREF="node4.html">3. Basic configuration</A>
  53  &nbsp; <B>  <A NAME="tex2html301"
  54   HREF="node1.html">Contents</A></B>
  55  &nbsp; <B>  <A NAME="tex2html303"
  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="tex2html306"
  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="tex2html307"
  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="tex2html308"
  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="tex2html309"
  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="tex2html310"
  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="tex2html311"
  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="tex2html312"
  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="tex2html313"
  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="tex2html314"
  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="tex2html315"
  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="tex2html316"
  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="tex2html317"
  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="tex2html318"
  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="tex2html319"
  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="tex2html320"
 103   HREF="node5.html#SECTION00530000000000000000"><SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN> Miscellaneous settings</A>
 104 <UL>
 105 <LI><A NAME="tex2html321"
 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="tex2html322"
 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="1708"></A><A NAME="1709"></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="1720"></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="1817"></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>border_sides</TT></TD>
 492 <TD ALIGN="LEFT">A string indicating which sides of the border
 493                      to draw: all/tb/lr for all, top and bottom, and
 494                      left and right. To control between left/right
 495                      and top/bottom, use the pixel options below.</TD>
 496 </TR>
 497 <TR><TD ALIGN="LEFT"><TT>highlight_pixels</TT></TD>
 498 <TD ALIGN="LEFT">Width of the highlight part of the border in pixels.</TD>
 499 </TR>
 500 <TR><TD ALIGN="LEFT"><TT>shadow_pixels</TT></TD>
 501 <TD ALIGN="LEFT">Width of the shadow part of the border in pixels.</TD>
 502 </TR>
 503 <TR><TD ALIGN="LEFT"><TT>padding_pixels</TT></TD>
 504 <TD ALIGN="LEFT">Width of the padding part of the border in pixels.</TD>
 505 </TR>
 506 <TR><TD ALIGN="LEFT"><TT>spacing</TT></TD>
 507 <TD ALIGN="LEFT">Space to be left between all kinds of boxes.</TD>
 508 </TR>
 509 </TABLE>
 510
 511 <P>
 512
 513 <H4><A NAME="SECTION00522300000000000000">
 514 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> Text</A>
 515 </H4>
 516
 517 <P>
 518 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 519 <TR><TD ALIGN="LEFT">Field</TD>
 520 <TD ALIGN="LEFT">Description</TD>
 521 </TR>
 522 <TR><TD ALIGN="LEFT"><TT>font</TT></TD>
 523 <TD ALIGN="LEFT">Font to be used in text-drawing operations; standard X font
 524              name.</TD>
 525 </TR>
 526 <TR><TD ALIGN="LEFT"><TT>text_align</TT></TD>
 527 <TD ALIGN="LEFT">How text is to be aligned in text boxes/tabs; one of
 528                    the strings left/right/center.</TD>
 529 </TR>
 530 </TABLE>
 531
 532 <P>
 533
 534 <H4><A NAME="SECTION00522400000000000000">
 535 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">4</SPAN> Miscellaneous</A>
 536 </H4>
 537
 538 <P>
 539 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 540 <TR><TD ALIGN="LEFT">Field</TD>
 541 <TD ALIGN="LEFT">Description</TD>
 542 </TR>
 543 <TR><TD ALIGN="LEFT"><TT>transparent_background</TT></TD>
 544 <TD ALIGN="LEFT">Should windows' that use this style
 545         background be transparent? true/false.</TD>
 546 </TR>
 547 <TR><TD ALIGN="LEFT"><TT>based_on</TT></TD>
 548 <TD ALIGN="LEFT">The name of a previously defined style that this
 549         style should be based on.</TD>
 550 </TR>
 551 </TABLE>
 552
 553 <P>
 554
 555 <H4><A NAME="SECTION00522500000000000000">
 556 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">5</SPAN> Substyles</A>
 557 </H4>
 558
 559 <P>
 560 As discussed in previous sections, styles may have substyles to e.g.
 561 indicate different states of the object being drawn. The ''de'' engine
 562 limits what can be configured in substyles to the set of colours in the
 563 first table above, but also specifically interprets for the main style
 564 <TT>tab-frame</TT> the substyles <TT>*-*-tagged</TT> and <TT>*-*-*-dragged</TT>
 565 by, respectively, drawing a right angle shape at the top right corner
 566 of a tab and by shading the tab with a stipple pattern. Also for
 567 menus the substyles <TT>*-*-submenu</TT> are handled as a special case.
 568
 569 <P>
 570 Substyles are defined with the function <A HREF="node7.html#fn:de.substyle"><TT>de.substyle</TT></A> within the
 571 table defining the main style. The parameters to this function are
 572 similar to those of <A HREF="node7.html#fn:de.defstyle"><TT>de.defstyle</TT></A>.
 573
 574 <P>
 575 <PRE>
 576 de.defstyle("some-style", {
 577    ...
 578    de.substyle("some-substyle", {
 579       ...
 580    }),
 581    ...
 582 })
 583 </PRE>
 584
 585 <P>
 586
 587 <H3><A NAME="SECTION00523000000000000000">
 588 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">2</SPAN>.<SPAN CLASS="arabic">3</SPAN> An example</A>
 589 </H3>
 590
 591 <P>
 592 The following shortened segment from <SPAN  CLASS="textit">look_cleanviolet.lua</SPAN>
 593 should help to clarify the matters discussed in the previous
 594 subsection.
 595
 596 <P>
 597 <PRE>
 598 de.defstyle("*", {
 599     -- Gray background
 600     highlight_colour = "#eeeeee",
 601     shadow_colour = "#eeeeee",
 602     background_colour = "#aaaaaa",
 603     foreground_colour = "#000000",
 604
 605     shadow_pixels = 1,
 606     highlight_pixels = 1,
 607     padding_pixels = 1,
 608     spacing = 0,
 609     border_style = "elevated",
 610
 611     font = "-*-helvetica-medium-r-normal-*-12-*-*-*-*-*-*-*",
 612     text_align = "center",
 613 })
 614
 615 de.defstyle("tab-frame", {
 616     based_on = "*",
 617
 618     de.substyle("active-selected", {
 619         -- Violet tab
 620         highlight_colour = "#aaaacc",
 621         shadow_colour = "#aaaacc",
 622         background_colour = "#666699",
 623         foreground_colour = "#eeeeee",
 624     }),
 625
 626     --  More substyles would follow ...
 627 })
 628 </PRE>
 629
 630 <P>
 631
 632 <H2><A NAME="SECTION00530000000000000000">
 633 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN> Miscellaneous settings</A>
 634 </H2>
 635
 636 <P>
 637 The following style fields are independent of the drawing engine used,
 638 but are related to objects' styles and therefore configured in the drawing
 639 engine configuration file.
 640
 641 <P>
 642
 643 <H3><A NAME="SECTION00531000000000000000">
 644 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">1</SPAN> Extra fields for style <TT>frame</TT></A>
 645 </H3>
 646
 647 <P>
 648 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 649 <TR><TD ALIGN="LEFT">Field</TD>
 650 <TD ALIGN="LEFT">Description</TD>
 651 </TR>
 652 <TR><TD ALIGN="LEFT"><TT>bar</TT></TD>
 653 <TD ALIGN="LEFT">Controls the style of the tab-bar. Possible values
 654         are the strings <TT>"none"</TT>, <TT>"inside"</TT>, <TT>"outside"</TT>
 655         and <TT>"shaped"</TT>, with the last providing the PWM-style
 656         tab-bars for floating frames.</TD>
 657 </TR>
 658 <TR><TD ALIGN="LEFT"><TT>floatframe_tab_min_w</TT></TD>
 659 <TD ALIGN="LEFT">Minimum tab width in pixels for
 660         the shaped style, given that this number times number of tabs
 661         doesn't exceed frame width.</TD>
 662 </TR>
 663 <TR><TD ALIGN="LEFT"><TT>floatframe_bar_max_w_q</TT></TD>
 664 <TD ALIGN="LEFT">Maximum tab-bar width quotient of
 665         frame width for the shaped styles. A number in the
 666         interval <SPAN CLASS="MATH"></SPAN>.</TD>
 667 </TR>
 668 </TABLE>
 669
 670 <P>
 671
 672 <H3><A NAME="SECTION00532000000000000000">
 673 <SPAN CLASS="arabic">4</SPAN>.<SPAN CLASS="arabic">3</SPAN>.<SPAN CLASS="arabic">2</SPAN> Extra fields for style <TT>dock</TT></A>
 674 </H3>
 675
 676 <P>
 677 <TABLE CELLPADDING=3 BORDER="1" WIDTH="100%">
 678 <TR><TD ALIGN="LEFT">Field</TD>
 679 <TD ALIGN="LEFT">Description</TD>
 680 </TR>
 681 <TR><TD ALIGN="LEFT"><TT>outline_style</TT></TD>
 682 <TD ALIGN="LEFT">How borders are drawn:
 683                         <TT>"none"</TT> - no border,
 684                         <TT>"all"</TT> - border around whole dock,
 685                         <TT>"each"</TT> - border around each dockapp.</TD>
 686 </TR>
 687 <TR><TD ALIGN="LEFT"><TT>tile_size</TT></TD>
 688 <TD ALIGN="LEFT">A table with entries <TT>width</TT> and <TT>height</TT>,
 689         indicating the width and height of tiles in pixels.</TD>
 690 </TR>
 691 </TABLE>
 692
 693 <P>
 694 Hopefully that's enough to get you started in writing new style
 695 configuration files for Ion. When in doubt, study the existing
 696 style configuration files.
 697
 698 <P>
 699
 700 <DIV CLASS="navigation"><HR>
 701 <!--Navigation Panel-->
 702 <A NAME="tex2html304"
 703   HREF="node6.html">
 704 <IMG WIDTH="37" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="next" SRC="next.png"></A>
 705 <A NAME="tex2html298"
 706   HREF="ionconf.html">
 707 <IMG WIDTH="26" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="up" SRC="up.png"></A>
 708 <A NAME="tex2html292"
 709   HREF="node4.html">
 710 <IMG WIDTH="63" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="previous" SRC="prev.png"></A>
 711 <A NAME="tex2html300"
 712   HREF="node1.html">
 713 <IMG WIDTH="65" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="contents" SRC="contents.png"></A>
 714 <A NAME="tex2html302"
 715   HREF="node11.html">
 716 <IMG WIDTH="43" HEIGHT="24" ALIGN="BOTTOM" BORDER="0" ALT="index" SRC="index.png"></A>
 717 <BR>
 718 <B> Next:</B> <A NAME="tex2html305"
 719   HREF="node6.html">5. Scripting</A>
 720 <B> Up:</B> <A NAME="tex2html299"
 721   HREF="ionconf.html">Configuring and extending Ion3</A>
 722 <B> Previous:</B> <A NAME="tex2html293"
 723   HREF="node4.html">3. Basic configuration</A>
 724  &nbsp; <B>  <A NAME="tex2html301"
 725   HREF="node1.html">Contents</A></B>
 726  &nbsp; <B>  <A NAME="tex2html303"
 727   HREF="node11.html">Index</A></B> </DIV>
 728 <!--End of Navigation Panel-->
 729
 730 </BODY>
 731 </HTML>