blob: 12ed6265fb53ab15dbfeeb5bfe80f45de0b0d31d [file]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Custom CSS :: Apache Isis</title>
<link rel="canonical" href="https://isis.apache.org/vw/2.0.0-M5/customisation/custom-css.html">
<meta name="generator" content="Antora 2.3.4">
<link rel="stylesheet" href="../../../_/css/site.css">
<link rel="stylesheet" href="../../../_/css/site-custom.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
<link rel="home" href="https://isis.apache.org" title="Apache Isis">
</head>
<body class="article">
<header class="header">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="https://isis.apache.org">
<span class="icon">
<img src="../../../_/img/isis-logo-48x48.png"></img>
</span>
<span>Apache Isis</span>
</a>
<button class="navbar-burger" data-target="topbar-nav">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div id="topbar-nav" class="navbar-menu">
<a class="navbar-end">
<div class="navbar-item hide-for-print">
<span>
<input id="algolia-search-input" placeholder="Search"></span>
</span>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Quick Start</a>
<div class="navbar-dropdown">
<span class="navbar-item navbar-heading">Starter Apps</span>
<a class="navbar-item" href="../../../docs/2.0.0-M5/starters/helloworld.html">Hello World</a>
<a class="navbar-item" href="../../../docs/2.0.0-M5/starters/simpleapp.html">Simple App</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Demos &amp; Tutorials</span>
<a class="navbar-item" href="../../../docs/2.0.0-M5/demo/about.html">Demo App</a>
<a class="navbar-item" href="https://danhaywood.gitlab.io/isis-petclinic-tutorial-docs/petclinic/1.16.2/intro.html">Petclinic (tutorial)</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Resources</span>
<a class="navbar-item" href="../../../docs/2.0.0-M5/resources/cheatsheet.html">Cheatsheet</a>
<a class="navbar-item" href="../../../docs/2.0.0-M5/resources/icons.html">Icons</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Guides</a>
<div class="navbar-dropdown">
<span class="navbar-item navbar-heading">Development</span>
<a class="navbar-item" href="../../../setupguide/2.0.0-M5/about.html">Setup Guide</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Core</span>
<a class="navbar-item" href="../../../userguide/2.0.0-M5/about.html">User Guide</a>
<a class="navbar-item" href="../../../refguide/2.0.0-M5/about.html">Reference Guide</a>
<a class="navbar-item" href="../../../testing/2.0.0-M5/about.html">Testing Guide</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Libraries</a>
<div class="navbar-dropdown">
<span class="navbar-item navbar-heading">For Use in Apps</span>
<a class="navbar-item" href="../../../subdomains/2.0.0-M5/about.html">Subdomain Libraries</a>
<a class="navbar-item" href="../../../valuetypes/2.0.0-M5/about.html">Value Types</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Integrate between Apps</span>
<a class="navbar-item" href="../../../mappings/2.0.0-M5/about.html">Bounded Context Mapping Libraries</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Other</span>
<a class="navbar-item" href="../../../incubator/2.0.0-M5/about.html">Incubator</a>
<a class="navbar-item" href="../../../legacy/2.0.0-M5/about.html">Legacy</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Components</a>
<div class="navbar-dropdown">
<span class="navbar-item navbar-heading">Viewers</span>
<a class="navbar-item" href="../../../vw/2.0.0-M5/about.html">Web UI (Wicket)</a>
<a class="navbar-item" href="../../../vro/2.0.0-M5/about.html">REST API (Restful Objects)</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Security</span>
<a class="navbar-item" href="../../../security/2.0.0-M5/about.html">Security Guide</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Persistence</span>
<a class="navbar-item" href="../../../pjpa/2.0.0-M5/about.html">JPA (EclipseLink)</a>
<a class="navbar-item" href="../../../pjdo/2.0.0-M5/about.html">JDO (DataNucleus)</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Extensions</span>
<a class="navbar-item" href="../../../extensions/2.0.0-M5/about.html">Extensions Catalog</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Support</a>
<div class="navbar-dropdown">
<span class="navbar-item navbar-heading">Contact</span>
<a class="navbar-item" href="../../../docs/2.0.0-M5/support/slack-channel.html">Slack</a>
<a class="navbar-item" href="../../../docs/2.0.0-M5/support/mailing-list.html">Mailing Lists</a>
<a class="navbar-item" href="https://issues.apache.org/jira/browse/ISIS">JIRA</a>
<a class="navbar-item" href="https://stackoverflow.com/questions/tagged/isis">Stack Overflow</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Releases</span>
<a class="navbar-item" href="../../../docs/2.0.0-M5/downloads/how-to.html">Downloads</a>
<a class="navbar-item" href="../../../relnotes/2.0.0-M5/about.html">Release Notes</a>
<a class="navbar-item" href="../../../docs/2.0.0-M5/archive/1-x.html">Archive (1.x)</a>
<hr class="navbar-divider"/>
<span class="navbar-item navbar-heading">Framework</span>
<a class="navbar-item" href="../../../conguide/2.0.0-M5/about.html">Contributors' Guide</a>
<a class="navbar-item" href="../../../comguide/2.0.0-M5/about.html">Committers' Guide</a>
<a class="navbar-item" href="../../../core/2.0.0-M5/about.html">Core Design</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">ASF</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="http://www.apache.org/">Apache Homepage</a>
<a class="navbar-item" href="https://www.apache.org/events/current-event">Events</a>
<a class="navbar-item" href="https://www.apache.org/licenses/">Licenses</a>
<a class="navbar-item" href="https://www.apache.org/security/">Security</a>
<a class="navbar-item" href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a>
<a class="navbar-item" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
<hr class="navbar-divider"/>
<a class="navbar-item" href="https://whimsy.apache.org/board/minutes/Isis.html">PMC board minutes</a>
</div>
</div>
<a class="navbar-item" href="../../../docs/2.0.0-M5/about.html">
<span class="icon">
<img src="../../../_/img/home.png"></img>
</span>
</a>
</div>
</div>
</nav>
</header>
<div class="body ">
<div class="nav-container" data-component="vw" data-version="2.0.0-M5">
<aside class="nav">
<div class="panels">
<div class="nav-panel-pagination">
<a class="page-previous disabled" rel="prev" href="" title=""><span></span></a>
<a class="page-next disabled" rel="next"
href="" title=""><span></span></a>
<!--
page.parent doesn't seem to be set...
<a class="page-parent disabled" rel="prev" href="" title=""><span></span></a>
-->
</div>
<div class="nav-panel-menu is-active" data-panel="menu">
<nav class="nav-menu">
<h3 class="title"><a href="../about.html">Web UI (Wicket Viewer)</a></h3>
<ul class="nav-list">
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../setup-and-configuration.html">Setup and Configuration</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../features.html">End-user Features</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../customisation.html">Customisation</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../extending.html">Extending</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../hints-and-tips.html">Hints-n-Tips</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../security.html">Security</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<span class="nav-text">Extensions</span>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../exceldownload/about.html">Excel Download</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../fullcalendar/about.html">fullcalendar</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../gmap3/about.html">GMap3</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../pdfjs/about.html">pdf.js</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
<div class="context">
<span class="title">Web UI (Wicket Viewer)</span>
<span class="version">2.0.0-M5</span>
</div>
<ul class="components">
<li class="component">
<span class="title"> </span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../docs/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">BC Mapping Libraries</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../mappings/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Committers' Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../comguide/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Contributors' Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../conguide/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Design Docs</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../core/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Extensions Catalog</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../extensions/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Incubator Catalog</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../incubator/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">JDO/DataNucleus</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../pjdo/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">JPA</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../pjpa/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Legacy Catalog</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../legacy/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Reference Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../refguide/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Release Notes</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../relnotes/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">REST API (Restful Objects Viewer)</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../vro/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Security Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../security/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Setup Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../setupguide/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Subdomains Catalog</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../subdomains/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Testing Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../testing/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Tooling</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../tooling/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">User Guide</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../userguide/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component">
<span class="title">Value Types Catalog</span>
<ul class="versions">
<li class="version is-latest">
<a href="../../../valuetypes/2.0.0-M5/about.html">2.0.0-M5</a>
</li>
</ul>
</li>
<li class="component is-current">
<span class="title">Web UI (Wicket Viewer)</span>
<ul class="versions">
<li class="version is-current is-latest">
<a href="../about.html">2.0.0-M5</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
</div>
<main role="main">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<a href="../../../docs/2.0.0-M5/about.html" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
<ul>
<li><a href="../about.html">Web UI (Wicket Viewer)</a></li>
<li><a href="custom-css.html">Custom CSS</a></li>
</ul>
</nav>
<div class="edit-this-page"><a href="https://github.com/apache/isis/edit/2.0.0-M5/viewers/wicket/adoc/modules/ROOT/pages/customisation/custom-css.adoc">Edit</a></div>
</div>
<article class="doc">
<a name="section-top"></a>
<h1 class="page">Custom CSS</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>The HTML generated by the Wicket viewer include plenty of CSS classes so that you can easily target the required elements as required.
For example, you could use CSS to suppress the entity&#8217;s icon alongside its title.
This would be done using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.entityIconAndTitlePanel a img {
display: none;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>These customizations should generally be added to <a href="../../../refguide/2.0.0-M5/config/application-specific/application-css.html" class="page"><code>application.css</a></code>; this file is included by default in every webpage served up by the Wicket viewer.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="individual-members"><a class="anchor" href="#individual-members"></a>Individual members</h2>
<div class="sectionbody">
<div class="paragraph">
<p>For example, the <code>ToDoItem</code> object of the example <a href="https://github.com/apache/isis-app-todoapp/">TodoApp</a> has a <code>notes</code> property.
The HTML for this will be something like:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;div&gt;
&lt;div class="property ToDoItem-notes"&gt;
&lt;div class="multiLineStringPanel scalarNameAndValueComponentType"&gt;
&lt;label for="id83" title=""&gt;
&lt;span class="scalarName"&gt;Notes&lt;/span&gt;
&lt;span class="scalarValue"&gt;
&lt;textarea
name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue"
disabled="disabled"
id="id83" rows="5" maxlength="400" size="125"
title=""&gt;
&lt;/textarea&gt;
&lt;span&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>The <a href="../../../refguide/2.0.0-M5/config/application-specific/application-css.html" class="page">application.css</a> file is the place to add application-specific styles.
By way of an example, if (for some reason) we wanted to completely hide the notes value, we could do so using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.ToDoItem-notes span.scalarValue {
display: none;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>You can use a similar approach for collections and actions.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="custom-css-styles"><a class="anchor" href="#custom-css-styles"></a>Custom CSS styles</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The above technique works well if you know the class member to target, but you might instead want to apply a custom style to a set of members.
For this, you can use the <code>@PropertyLayout(cssClass=&#8230;&#8203;)</code>.</p>
</div>
<div class="paragraph">
<p>For example, in the <code>ToDoItem</code> class the following annotation (indicating that this is a key, important, property) :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@PropertyLayout(cssClass="x-myapp-highlight")
public LocalDate getDueBy() {
return dueBy;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>would generate the HTML:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;div&gt;
&lt;div class="property ToDoItem-dueBy x-myapp-highlight"&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>This can then be targeted, for example using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.x-myapp-highlight span.scalarName {
color: red;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Note also that instead of using <code>@PropertyLayout(cssClass=&#8230;&#8203;)</code> annotation, you can also specify the CSS style using a <a href="../../../userguide/2.0.0-M5/fun/ui.html#object-layout" class="page">layout file</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="table-columns"><a class="anchor" href="#table-columns"></a>Table columns</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Sometimes you may want to apply styling to specific columns of tables.
For example, you might want to adjust width so that for certain properties have more (or less) room than they otherwise would; or you might want to hide the column completely.
This also applies to the initial icon/title column.</p>
</div>
<div class="paragraph">
<p>There is also the issue of scoping:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>You may wish the style to apply globally: that is, dependent on the type of entity being rendered in the table, irrespective of the page on which it is shown.</p>
</li>
<li>
<p>Alternativel, you may wish to target the CSS for a table as rendered either as a parented collection (owned by some other entity) or rendered as a standarlone collection (the result of invoking an action).</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>In each of these cases the Wicket viewer adds CSS classes either to containing <code>div</code>s or to the <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code>
elements of the table itself so that it can custom styles can be appropriately targetted.</p>
</div>
<div class="sect2">
<h3 id="applying-styles-globally"><a class="anchor" href="#applying-styles-globally"></a>Applying styles globally</h3>
<div class="paragraph">
<p>Every rendered collection containing a domain class will be wrapped in a <code>&lt;div&gt;</code> that lists that domain class (in CSS safe form).
For example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;div class="entityCollection com-mycompany-myapp-Customer"&gt;
...
&lt;table&gt;
&lt;tr&gt;
&lt;th class="title-column"&gt;...&lt;/th&gt;
&lt;th class="firstName"&gt;...&lt;/th&gt;
&lt;th class="lastName"&gt;...&lt;/th&gt;
...
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="title-column"&gt;...&lt;/td&gt;
&lt;td class="firstName"&gt;...&lt;/td&gt;
&lt;td class="lastName"&gt;...&lt;/td&gt;
...
&lt;/tr&gt;
...
&lt;/table&gt;
...
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Using this, the <code>lastName</code> property could be targeted using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer th.lastName {
width: 30%;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="parented-collections"><a class="anchor" href="#parented-collections"></a>Parented collections</h3>
<div class="paragraph">
<p>Parented collections will be wrapped in <code>&lt;div&gt;</code>s that identify both the entity type and also the collection Id.
For example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;div class="entityPage com-mycompany-myapp-Customer"&gt; <i class="conum" data-value="1"></i><b>(1)</b>
...
&lt;div class="orders"&gt; <i class="conum" data-value="2"></i><b>(2)</b>
&lt;table&gt;
&lt;tr&gt;
&lt;th class="title-column"&gt;...&lt;/th&gt;
&lt;th class="productRef"&gt;...&lt;/th&gt;
&lt;th class="quantity"&gt;...&lt;/th&gt;
...
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="title-column"&gt;...&lt;/td&gt;
&lt;td class="productRef"&gt;...&lt;/td&gt;
&lt;td class="quantity"&gt;...&lt;/td&gt;
...
&lt;/tr&gt;
...
&lt;/table&gt;
...
&lt;/div&gt;
...
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>the parent class identifier</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>the collection identifier.
This element&#8217;s class also has the entity type within the collection (as <a href="#columns-in-tables_globally">discussed above</a>).</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Using this, the <code>productRef</code> property could be targeted using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer orders td.productRef {
font-style: italic;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="standalone-collections"><a class="anchor" href="#standalone-collections"></a>Standalone collections</h3>
<div class="paragraph">
<p>Standalone collections will be wrapped in a <code>&lt;div&gt;</code> that identifies the action invoked.
For example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;div class="standaloneCollectionPage"&gt;
&lt;div class="com-mycompany-myapp-Customer_mostRecentOrders ..."&gt; <i class="conum" data-value="1"></i><b>(1)</b>
...
&lt;div class="orders"&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th class="title-column"&gt;...&lt;/th&gt;
&lt;th class="productRef"&gt;...&lt;/th&gt;
&lt;th class="quantity"&gt;...&lt;/th&gt;
...
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="title-column"&gt;...&lt;/td&gt;
&lt;td class="productRef"&gt;...&lt;/td&gt;
&lt;td class="quantity"&gt;...&lt;/td&gt;
...
&lt;/tr&gt;
...
&lt;/table&gt;
...
&lt;/div&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>action identifier.
This element&#8217;s class also identifies the entity type within the collection (as <a href="#columns-in-tables_globally">discussed above</a>).</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Using this, the <code>quantity</code> property could be targeted using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer_mostRecentOrders td.quantity {
font-weight: bold;
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</article>
<aside class="article-aside toc hide-for-print" role="navigation">
<p class="toc-title">On this page</p>
<div id="article-toc"></div>
</aside>
</main>
</div>
<footer class="footer">
<div class="content">
<div class="copyright">
<p>
Copyright © 2010~2021 The Apache Software Foundation, licensed under the Apache License, v2.0.
<br/>
Apache, the Apache feather logo, Apache Isis, and the Apache Isis project logo are all trademarks of The Apache Software Foundation.
</p>
</div>
<div class="revision">
<p>Revision: 2.0.0-M5.20210417-1912</p>
</div>
</div>
</footer>
<script src="../../../_/js/site.js"></script>
<script async src="../../../_/js/vendor/highlight.js"></script>
<script src="../../../_/js/vendor/jquery-3.4.1.min.js"></script>
<script src="../../../_/js/vendor/jquery-ui-1.12.1.custom.widget-only.min.js"></script>
<script src="../../../_/js/vendor/jquery.tocify.min.js"></script>
<script>
$(function() {
$("#article-toc").tocify( {
showEffect: "slideDown",
hashGenerator: "pretty",
hideEffect: "slideUp",
selectors: "h2, h3",
scrollTo: 120,
smoothScroll: true,
theme: "jqueryui",
highlightOnScroll: true
} );
});
</script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
function focusSearchInput () { document.querySelector('#algolia-search-input').focus() }
var search = docsearch({
appId: '5ISP5TFAEN',
apiKey: '0fc51c28b4ad46e7318e96d4e97fab7c',
indexName: 'isis-apache-org',
inputSelector: '#algolia-search-input',
autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
debug: false,
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
focusSearchInput()
window.addEventListener('load', focusSearchInput);
</script>
<!--
docsearch options:
https://docsearch.algolia.com/docs/behavior/
-->
<!--
https://www.algolia.com/doc/api-reference/api-parameters/
algoliaOptions: { hitsPerPage: 6 },
-->
</body>
</html>