#2124777 Added Custom Skin report.

repos/reports/custom_forena_styling.css

+@CHARSET "UTF-8";
+
+/* Apply some custom styling for some Forena items (eg: enlarge the tiny icons) */
+ 
+div.forena-editor-links {
+  width: 5em;
+}
+
+/* Enlarge the (tiny) edit icons a bit + align them right + surround them with a (black) border */
+
+div.forena-editor-links img,
+div.forena-edit-links img,
+div.content a img {
+  height: 1.5em; 
+  width: 1.5em;
+  margin: 0.25em 0.25em;
+  border: thin solid #000000;
+  float: right;
+}
+
+/* Align data block related edit icons to the right + surround them with a (red) border */
+ 
+div.forena-edit-links {
+  border: thin solid #CC0000;
+  float: right;
+  height: 2.0em;
+}
+
+/* Style output rendered via frx:renderer=FrxMyReports */
+
+div.FrxMyReports {
+  font-weight: bold;
+  font-size: 1.0em;
+  white-space: nowrap;
+  overflow: auto;
+  padding: 0em 0.5em;
+  margin: 0.75em;
+  line-height: 100%;
+  background-color: #ccffee;
+  background: linear-gradient(
+    to bottom,
+    #ffffff,
+    #eeffcc 50%,
+    #ffffff 50%,
+    #bbcc99
+  );
+  background-size: 100% 2.0em;
+  border: medium dashed #ffaa33;
+}
+ 
+/* Temporary (?) fixes below */
+
+/* Align textual edit links (without a corresponding edit icon) at the top */
+
+div.forena-edit-links a {
+  vertical-align: top;
+}
+
+/* Try to show all edit links/icons above (not in between) an UL-list (i.e. in frx:block ULs) */
+ 
+div.content ul.frx-block {
+  padding: 2.0em 0.5em 0em 2.5em;
+}
\ No newline at end of file

repos/reports/custom_skin.skinfo

+;
+;  skinfo file used for my reports.
+;  
+name = Custom Skin
+description = Skin used in customized reports. 
+;
+; -----------------------------------------------------------
+;
+; JavaScript libraries to be added.
+;
+; Make the dataTables plugin available:
+;
+scripts[] = dataTables/media/js/jquery.dataTables.min.js
+;
+; Use (enable) some dataTables features (by specifying so in a custom JS file):
+; 
+scripts[] = datatables_features.js
+;
+; -----------------------------------------------------------
+;
+; Stylesheet inclusions:
+; 
+stylesheets[all][] = datatables_styling.css
+stylesheets[all][] = custom_forena_styling.css
+;
+; -----------------------------------------------------------
+;
+; Settings for Forena Classes to further control how Forena renders reports:
+; 
+; Disable helper classes such as even and odd:
+; FrxReport[noHelperClasses] = true
+; 
+; Control the root element tag name using the following:
+; FrxXMLDoc[rootElementName] = node 
+;
+; ---------------------------------------------------------
+;
+; Add arbitrary values to reference them in the report using the skin data context: 
+; 
+; company_name = My Cool Company
+; 
+; (doing so allows for referencing {skin.company_name} anywhere in a report).
\ No newline at end of file

repos/reports/datatables_features.js

+/**
+ * @file
+ * Set behaviors related to dataTables Features.
+ */
+
+(function ($) {
+  Drupal.behaviors.SetDatatablesFeatures = {
+    attach: function (context, settings) {
+      $('table').dataTable({
+        "sPaginationType": "full_numbers",
+        "stateSave": true
+      });
+    }
+  };
+  
+})(jQuery);
+
+
+/**
+ * More dataTables features to pick from (use a comma to separate them, except for the last one):
+        "dom": '<"top"i>rt<"bottom"flp><"clear">',
+	"sPaginationType": "two_button"
+      }); 
+ */
\ No newline at end of file

repos/reports/datatables_styling.css

+@CHARSET "UTF-8";
+
+/*Styling of dataTables displays*/
+ 
+div.dataTables_length,
+div.dataTables_filter,
+div.dataTables_paginate,
+div.dataTables_info {
+  padding: 0.35em 0.25em; 
+  font-size: 1.0em;
+  margin: 1.0em 0.5em;
+  line-height: 100%;
+}
+
+div.dataTables_length {
+  float: right;
+  width: 31%;
+}
+ 
+div.dataTables_filter {
+  float: left;
+  width: 62%;
+}
+
+div.dataTables_info {
+  float: left;
+  width: 31%;
+}
+ 
+div.dataTables_paginate {
+  float: right;
+  width: 62%;
+}
+
+table.dataTable {
+    float: left;
+}
\ No newline at end of file

repos/reports/sample/states_custom.frx

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE root [
+<!ENTITY nbsp "&#160;">
+]>
+<html xmlns:frx="urn:FrxReports">
+<head>
+<title>7. Customized Simple Table of States</title>
+<frx:category>Sample</frx:category>
+<frx:options hidden="0" skin="custom_skin"></frx:options>
+<frx:parameters>
+</frx:parameters>
+<frx:docgen>
+</frx:docgen>
+<frx:fields>
+  <frx:field id="{sample_states}" link="reports/sample.states"/>  
+</frx:fields>
+<frx:menu />
+<frx:cache />
+</head>
+<body>
+	<div>
+		<p>
+			This report is a variation of the <a href="./sample.states"
+				target="_self">Simple Table of States</a> report that uses a <strong>custom skin</strong> for the 
+			  following customizations:
+	  </p>
+				<ul>
+					<li>The table is displayed using the dataTables plugin by
+						adding the JavaScript <strong>datatables_features.js</strong> in
+						the custom skin. which adds various widgets to operate on the
+						data contained in the table, such as (above the table) the search
+						box and the number of entries to be shown, and (below the table)
+						the pagination and the number of rows. Type a few
+						letters in the search box to get the idea.  See the dataTables documentation 
+						for more information on this JQuery plugin.
+					</li>
+					<li>The presentation of the dataTables controls are themed by adding the stylesheet <strong>datatables_styling.css</strong>
+						in the custom skin.
+					</li>
+					<li>Some of Forena's default styling is refined (e.g. the size
+						of the edit icons), by adding the stylesheet <strong>forena_styling.css</strong>
+						in the custom skin.
+					</li>
+				</ul>
+	</div>
+	<div frx:block="sampledb/states" id="state-block" class="FrxTable">
+		<table>
+			<thead>
+				<tr>
+					<th>code</th>
+					<th>name</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr frx:foreach="*" id="state" class="test {code}">
+					<td>{code}</td>
+					<td>{name}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</body>
+</html>
\ No newline at end of file