--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
+<html>\r
+<head>\r
+<title>Rico Grid Styles</title>\r
+<link href="ricoDocs.css" rel="Stylesheet" type="text/css">
+</head>\r
+\r
+<body>\r
+<h1>Grid Styles</h1>\r
+\r
+<p><a href='GridStyles_ja.html'><img src='images/japanese.gif' alt='View this page in Japanese'></a>\r
+<a href='GridStyles_ja.html'>View this page in Japanese</a></p>\r
+\r
+<p>It is very easy to customize the style of Rico LiveGrids and SimpleGrids.\r
+In fact, LiveGrids and SimpleGrids share many of the same class names\r
+and DOM structures, so styles that apply to one can be applied to the other.\r
+\r
+<h2>Pre-configured Styles</h2>\r
+\r
+<p>Rico comes with a variety of stylesheets for LiveGrid.\r
+You can see how each of them looks by selecting the\r
+first LiveGrid example in the PHP, ASP, .net, or Perl section.\r
+At the top of the example page, try each of the "style" selections\r
+to find one you like. The actual stylesheets are located\r
+in the src/css directory.\r
+\r
+<p>Here are screen shots of each style, taken with "highlight" set to "Cursor Row".\r
+\r
+<p><strong>greenHdg.css</strong>\r
+<br><img src='images/gridsamples/greenHdg.png'>\r
+\r
+<p><strong>tanChisel.css</strong>\r
+<br><img src='images/gridsamples/tanChisel.png'>\r
+\r
+<p><strong>grayedout.css</strong>\r
+<br><img src='images/gridsamples/grayedout.png'>\r
+\r
+<p><strong>coffee-with-milk.css</strong>\r
+<br><img src='images/gridsamples/coffee-with-milk.png'>\r
+\r
+<p><strong>warmfall.css</strong>\r
+<br><img src='images/gridsamples/warmfall.png'>\r
+\r
+<p><strong>iegradient.css</strong> <em>(only works in Internet Explorer)</em>\r
+<br><img src='images/gridsamples/iegradient.png'>\r
+\r
+<p>Several of these styles are adapted from the\r
+<a href="http://icant.co.uk/csstablegallery/index.php">CSS Table Gallery</a>.\r
+The gallery can serve as an inspiration for styling LiveGrids, however,\r
+the CSS used in the gallery examples cannot be applied directly to a LiveGrid.\r
+\r
+<h2>Customizing a Style</h2>\r
+\r
+<p>Even with the variety of pre-configured styles available,\r
+inevitably some style declarations will need to be overridden\r
+to display your data the way you want it. What follows are some\r
+common situations that require a style to be overridden and \r
+the suggested CSS styling to solve the issue.\r
+\r
+<h3>Row height of column headings</h3>\r
+\r
+<p>When column headings get too long, you typically want to allow\r
+the words to wrap and to display the heading as 2 or 3 lines of text.\r
+\r
+<p>Shows headings with 2 lines of text:\r
+<pre>\r
+.ricoLG_top div.ricoLG_cell {\r
+ height:2.5em;\r
+}\r
+</pre>\r
+\r
+<p>Shows headings with 3 lines of text:\r
+<pre>\r
+.ricoLG_top div.ricoLG_cell {\r
+ height:3.5em;\r
+}\r
+</pre>\r
+\r
+<h3>Row height in grid body</h3>\r
+\r
+<p>Similarly you might need each row in the grid body\r
+to be taller in order to display long content.\r
+\r
+<p>Show body rows with 2 lines of text:\r
+<pre>\r
+.ricoLG_bottom div.ricoLG_cell {\r
+ height:2.5em;\r
+}\r
+</pre>\r
+\r
+<h3>Word Wrap</h3>\r
+\r
+<p>By default, word-wrapping is enabled in each grid cell.\r
+But sometimes it makes sense to turn word wrapping off.\r
+\r
+<p>Turn word-wrap off in headings and body:\r
+<pre>\r
+div.ricoLG_cell {\r
+ white-space:nowrap;\r
+}\r
+</pre>\r
+\r
+<p>Turn word-wrap off in body only:\r
+<pre>\r
+.ricoLG_bottom div.ricoLG_cell {\r
+ white-space:nowrap;\r
+}\r
+</pre>\r
+\r
+<h3>Referencing an entire grid</h3>\r
+\r
+<p>Sometimes you want to apply a style to an entire grid.\r
+Each grid is enclosed in a <div> with a class of\r
+"ricoLG_outerDiv" and an id equal to the id you passed\r
+to the LiveGrid constructor appended with "_outerDiv"\r
+(i.e. the id of the grid in the first example is "ex1_outerDiv").\r
+Thus, you can use ".ricoLG_outerDiv" as a selector when applying\r
+a style to all grids on a page, or "#ex1_outerDiv" when applying\r
+a style to only the ex1 grid.\r
+\r
+<p>Set the grid's background color:\r
+<pre>\r
+div.ricoLG_outerDiv {\r
+ background-color:aqua;\r
+}\r
+</pre>\r
+\r
+</body>\r
+</html>\r
projects / infodrom / rico3 / blobdiff