2023:CSS Data Viewer Styling - Revision history

Dgreenwood: /* Using the Included Style Sheets property */

2025-12-12T22:24:35Z

Using the Included Style Sheets property

← Older revision		Revision as of 17:24, 12 December 2025
Line 3,123:		Line 3,123:
	To configure "Included Style Sheets":		To configure "Included Style Sheets":
	# Drag a CSS file from your computer to the Project (or a folder in the Project).		# Drag a CSS file from your computer to the Project (or a folder in the Project).
	#* [~~[Media~~:~~Example Data Grid Style Sheet~~.css~~\|You~~ can download ~~and use this example file]~~]		#* [https://bisok.com/resources/downloads/Example_Data_Grid_Style_Sheet.css This is an example style sheet you can download]
	# This creates a "Resource File" Grooper can reference.		# This creates a "Resource File" Grooper can reference.
	# Navigate to the Data Model (or Data Section or Data Table) you wish to style.		# Navigate to the Data Model (or Data Section or Data Table) you wish to style.

Dgreenwood: /* Using the Included Style Sheets property */

2025-11-11T16:54:33Z

Using the Included Style Sheets property

← Older revision		Revision as of 11:54, 11 November 2025
Line 3,119:		Line 3,119:
	* Store and manage bulk style rules outside of Data Model/Data Section/Data Table nodes.		* Store and manage bulk style rules outside of Data Model/Data Section/Data Table nodes.
	* Share CSS with other Grooper designers.		* Share CSS with other Grooper designers.


	To configure "Included Style Sheets":		To configure "Included Style Sheets":
Line 3,125:		Line 3,126:
	# This creates a "Resource File" Grooper can reference.		# This creates a "Resource File" Grooper can reference.
	# Navigate to the Data Model (or Data Section or Data Table) you wish to style.		# Navigate to the Data Model (or Data Section or Data Table) you wish to style.
	# Open the "Included Style Sheets"		# Open the "Included Style Sheets" editor.
			# This opens a reference editor. Find the Resource File and check the box next to it to reference it.
			# Press "OK" when finished to close the editor.
			# Save changes to the Data Model (or Data Section or Data Table).

Dgreenwood: /* Example CSS classes */

2025-11-11T16:43:10Z

Example CSS classes

← Older revision		Revision as of 11:43, 11 November 2025
Line 3,109:		Line 3,109:
	}		}
	</pre>		</pre>

			== Using the Included Style Sheets property ==

			Data Element containers (Data Models, Data Sections and Data Tables) all have an "'''Included Style Sheets'''" property. This allows users to reference CSS files brought into a Project as a [[Resource File]].

			Use "Included Style Sheets" to:
			* Reference a single style sheet across multiple Data Models.
			* Standardize Data Grid styling across multiple Grooper Repositories.
			* Store and manage bulk style rules outside of Data Model/Data Section/Data Table nodes.
			* Share CSS with other Grooper designers.

			To configure "Included Style Sheets":
			# Drag a CSS file from your computer to the Project (or a folder in the Project).
			#* [[Media:Example Data Grid Style Sheet.css\|You can download and use this example file]]
			# This creates a "Resource File" Grooper can reference.
			# Navigate to the Data Model (or Data Section or Data Table) you wish to style.
			# Open the "Included Style Sheets"

Dgreenwood: Dgreenwood moved page 2023:CSS Data Viewer Styling (Concept) to 2023:CSS Data Viewer Styling without leaving a redirect

2025-09-09T19:36:13Z

Dgreenwood moved page 2023:CSS Data Viewer Styling (Concept) to 2023:CSS Data Viewer Styling without leaving a redirect

← Older revision	Revision as of 14:36, 9 September 2025
(No difference)

Dgreenwood: /* Selecting Multiple Elements */

2025-08-22T13:05:00Z

Selecting Multiple Elements

← Older revision		Revision as of 08:05, 22 August 2025
Line 272:		Line 272:
	.Job_Title label {		.Job_Title label {
	color: rgb(248,148,32);		color: rgb(248,148,32);
	}
	}		}
	</pre>		</pre>

Dgreenwood: /* Selector Quick Reference */

2025-08-08T16:04:34Z

Selector Quick Reference

← Older revision		Revision as of 11:04, 8 August 2025
Line 660:		Line 660:

	{\|class="wikitable"		{\|class="wikitable"
			\|-
			\|colspan=3\|
			<h4>Data Elements</h4>
			\|-
	\|style="width:25%"\|		\|style="width:25%"\|
	'''Selector'''		'''Selector'''
	\|style="width:25%"\|		\|style="width:25%"\|
	'''~~Data Element~~ it selects'''		'''What it selects'''
	\|		\|
	'''More information		'''More information
	\|-
	~~\|colspan=3\|~~
	~~'''''<h3>Data Elements</h3>'''''~~
	\|-valign=top		\|-valign=top
	\|		\|
Line 727:		Line 728:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''''~~Labels and captions~~'''''		<h4>Labels and captions</h4>
			\|-
			\|style="width:25%"\|
			'''Selector'''
			\|style="width:25%"\|
			'''What it selects'''
			\|
			'''More information
	\|-valign=top		\|-valign=top
	\|		\|
Line 757:		Line 765:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''''~~Editable textbox elements~~'''''		<h4>Editable textbox elements</h4>
			\|-
			\|style="width:25%"\|
			'''Selector'''
			\|style="width:25%"\|
			'''What it selects'''
			\|
			'''More information
	\|-valign=top		\|-valign=top
	\|		\|
Line 804:		Line 819:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''''~~Other elements~~'''''		<h4>Other elements</h4>
			\|-
			\|style="width:25%"\|
			'''Selector'''
			\|style="width:25%"\|
			'''What it selects'''
			\|
			'''More information
	\|-valign=top		\|-valign=top
	\|		\|

Dgreenwood: /* Selector Quick Reference */

2025-08-08T16:01:40Z

Selector Quick Reference

← Older revision		Revision as of 11:01, 8 August 2025
Line 668:		Line 668:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''''Data Elements'''''		'''''<h3>Data Elements</h3>'''''
	\|-valign=top		\|-valign=top
	\|		\|

Dgreenwood: /* Selector Quick Reference */

2025-08-08T16:00:58Z

Selector Quick Reference

← Older revision		Revision as of 11:00, 8 August 2025
Line 668:		Line 668:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''Data Elements'''		'''''Data Elements'''''
	\|-valign=top		\|-valign=top
	\|		\|
Line 727:		Line 727:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''Labels and captions'''		'''''Labels and captions'''''
	\|-valign=top		\|-valign=top
	\|		\|
Line 757:		Line 757:
	\|-		\|-
	\|colspan=3\|		\|colspan=3\|
	'''Editable textbox elements'''		'''''Editable textbox elements'''''
	\|-valign=top		\|-valign=top
	\|		\|
Line 802:		Line 802:
	*This is a handy class when you want to style cells of any type in a '''Data Table'''.		*This is a handy class when you want to style cells of any type in a '''Data Table'''.
	*Because '''Data Table''' results are rendered with so many HTML elements, this is often the simplest, most efficient and easiest to remember selector to use.		*Because '''Data Table''' results are rendered with so many HTML elements, this is often the simplest, most efficient and easiest to remember selector to use.
			\|-
			\|colspan=3\|
			'''''Other elements'''''
	\|-valign=top		\|-valign=top
	\|		\|

Dgreenwood: /* Selector Quick Reference */

2025-08-08T15:59:47Z

Selector Quick Reference

← Older revision		Revision as of 10:59, 8 August 2025
Line 809:		Line 809:
	\|		\|
	* Only used when a '''Data Field''' or '''Data Column's''' "Auto Complete" property is enabled.		* Only used when a '''Data Field''' or '''Data Column's''' "Auto Complete" property is enabled.
	* The <code>datalist<code> element is used to render the autocomplete list.		* The <code>datalist</code> element is used to render the autocomplete list.
	* Not commonly used or styled		* Not commonly used or styled
	\|-valign=top		\|-valign=top
Line 818:		Line 818:
	\|		\|
	* Only used when a '''Data Field''' or '''Data Column's''' "Auto Complete" property is enabled.		* Only used when a '''Data Field''' or '''Data Column's''' "Auto Complete" property is enabled.
	* The <code>option<code> element is used to render items in the autocomplete list.		* The <code>option</code> element is used to render items in the autocomplete list.
	* Not commonly used or styled		* Not commonly used or styled
	\|}		\|}
	~~<!-- These selectors should work in theory but I cannot produce meaningful examples. Possible something is overriding my styling that I'm unaware off.~~

	\|-
	\|
	~~<code>.header</code>~~
	\|
	~~The <code>header</code> class represents the parent header row, containing all '''Data Column''' labels.~~

	~~-->~~

	== Types of Styling Available ==		== Types of Styling Available ==

Dgreenwood: /* Selector Quick Reference */

2025-08-08T15:58:37Z

Selector Quick Reference

← Older revision		Revision as of 10:58, 8 August 2025
Line 683:		Line 683:
	\|		\|
	* Selects the parent <code>div</code> that makes up a Data Field.		* Selects the parent <code>div</code> that makes up a Data Field.
	* This <code>div</code> contains a <code>label</code> element and editable textbox element (See the "Editable ~~input~~ elements" section of this table for more).		* This <code>div</code> contains a <code>label</code> element and editable textbox element (See the "Editable textbox elements" section of this table for more).
	\|-valign=top		\|-valign=top
	\|		\|