git.infodrom.org Git - infodrom/rico3/blob - documentation/GridStyles.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <title>Rico Grid Styles</title>\r
   5 <link href="ricoDocs.css" rel="Stylesheet" type="text/css">
   6 </head>\r
   7 \r
   8 <body>\r
   9 <h1>Grid Styles</h1>\r
  10 \r
  11 <p><a href='GridStyles_ja.html'><img src='images/japanese.gif' alt='View this page in Japanese'></a>\r
  12 <a href='GridStyles_ja.html'>View this page in Japanese</a></p>\r
  13 \r
  14 <p>It is very easy to customize the style of Rico LiveGrids and SimpleGrids.\r
  15 In fact, LiveGrids and SimpleGrids share many of the same class names\r
  16 and DOM structures, so styles that apply to one can be applied to the other.\r
  17 \r
  18 <h2>Pre-configured Styles</h2>\r
  19 \r
  20 <p>Rico comes with a variety of stylesheets for LiveGrid.\r
  21 You can see how each of them looks by selecting the\r
  22 first LiveGrid example in the PHP, ASP, .net, or Perl section.\r
  23 At the top of the example page, try each of the "style" selections\r
  24 to find one you like. The actual stylesheets are located\r
  25 in the src/css directory.\r
  26 \r
  27 <p>Here are screen shots of each style, taken with "highlight" set to "Cursor Row".\r
  28 \r
  29 <p><strong>greenHdg.css</strong>\r
  30 <br><img src='images/gridsamples/greenHdg.png'>\r
  31 \r
  32 <p><strong>tanChisel.css</strong>\r
  33 <br><img src='images/gridsamples/tanChisel.png'>\r
  34 \r
  35 <p><strong>grayedout.css</strong>\r
  36 <br><img src='images/gridsamples/grayedout.png'>\r
  37 \r
  38 <p><strong>coffee-with-milk.css</strong>\r
  39 <br><img src='images/gridsamples/coffee-with-milk.png'>\r
  40 \r
  41 <p><strong>warmfall.css</strong>\r
  42 <br><img src='images/gridsamples/warmfall.png'>\r
  43 \r
  44 <p><strong>iegradient.css</strong> <em>(only works in Internet Explorer)</em>\r
  45 <br><img src='images/gridsamples/iegradient.png'>\r
  46 \r
  47 <p>Several of these styles are adapted from the\r
  48 <a href="http://icant.co.uk/csstablegallery/index.php">CSS Table Gallery</a>.\r
  49 The gallery can serve as an inspiration for styling LiveGrids, however,\r
  50 the CSS used in the gallery examples cannot be applied directly to a LiveGrid.\r
  51 \r
  52 <h2>Customizing a Style</h2>\r
  53 \r
  54 <p>Even with the variety of pre-configured styles available,\r
  55 inevitably some style declarations will need to be overridden\r
  56 to display your data the way you want it. What follows are some\r
  57 common situations that require a style to be overridden and \r
  58 the suggested CSS styling to solve the issue.\r
  59 \r
  60 <h3>Row height of column headings</h3>\r
  61 \r
  62 <p>When column headings get too long, you typically want to allow\r
  63 the words to wrap and to display the heading as 2 or 3 lines of text.\r
  64 \r
  65 <p>Shows headings with 2 lines of text:\r
  66 <pre>\r
  67 .ricoLG_top div.ricoLG_cell {\r
  68   height:2.5em;\r
  69 }\r
  70 </pre>\r
  71 \r
  72 <p>Shows headings with 3 lines of text:\r
  73 <pre>\r
  74 .ricoLG_top div.ricoLG_cell {\r
  75   height:3.5em;\r
  76 }\r
  77 </pre>\r
  78 \r
  79 <h3>Row height in grid body</h3>\r
  80 \r
  81 <p>Similarly you might need each row in the grid body\r
  82 to be taller in order to display long content.\r
  83 \r
  84 <p>Show body rows with 2 lines of text:\r
  85 <pre>\r
  86 .ricoLG_bottom div.ricoLG_cell {\r
  87   height:2.5em;\r
  88 }\r
  89 </pre>\r
  90 \r
  91 <h3>Word Wrap</h3>\r
  92 \r
  93 <p>By default, word-wrapping is enabled in each grid cell.\r
  94 But sometimes it makes sense to turn word wrapping off.\r
  95 \r
  96 <p>Turn word-wrap off in headings and body:\r
  97 <pre>\r
  98 div.ricoLG_cell {\r
  99   white-space:nowrap;\r
 100 }\r
 101 </pre>\r
 102 \r
 103 <p>Turn word-wrap off in body only:\r
 104 <pre>\r
 105 .ricoLG_bottom div.ricoLG_cell {\r
 106   white-space:nowrap;\r
 107 }\r
 108 </pre>\r
 109 \r
 110 <h3>Referencing an entire grid</h3>\r
 111 \r
 112 <p>Sometimes you want to apply a style to an entire grid.\r
 113 Each grid is enclosed in a &lt;div&gt; with a class of\r
 114 "ricoLG_outerDiv" and an id equal to the id you passed\r
 115 to the LiveGrid constructor appended with "_outerDiv"\r
 116 (i.e. the id of the grid in the first example is "ex1_outerDiv").\r
 117 Thus, you can use ".ricoLG_outerDiv" as a selector when applying\r
 118 a style to all grids on a page, or "#ex1_outerDiv" when applying\r
 119 a style to only the ex1 grid.\r
 120 \r
 121 <p>Set the grid's background color:\r
 122 <pre>\r
 123 div.ricoLG_outerDiv {\r
 124   background-color:aqua;\r
 125 }\r
 126 </pre>\r
 127 \r
 128 </body>\r
 129 </html>\r