[[custom-css]]
= Custom CSS

:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR  CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.



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's icon alongside its title.
This would be done using:

[source,css]
----
.entityIconAndTitlePanel a img {
    display: none;
}
----

These customizations should generally be added to xref:refguide:config:application-specific/application-css.adoc[`application.css]`; this file is included by default in every webpage served up by the Wicket viewer.

== Individual members

For example, the `ToDoItem` object of the example https://github.com/apache/isis-app-todoapp/[TodoApp] has a `notes` property.
The HTML for this will be something like:

[source,html]
----
<div>
  <div class="property ToDoItem-notes">
    <div class="multiLineStringPanel scalarNameAndValueComponentType">
      <label for="id83" title="">
        <span class="scalarName">Notes</span>
        <span class="scalarValue">
           <textarea
              name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue"
              disabled="disabled"
              id="id83" rows="5" maxlength="400" size="125"
              title="">
           </textarea>
         <span>
      </label>
    </div>
  </div>
</div>
----

The xref:refguide:config:application-specific/application-css.adoc[application.css] 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:

[source,css]
----
div.ToDoItem-notes span.scalarValue {
    display: none;
}
----

You can use a similar approach for collections and actions.

== Custom CSS styles

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 `@PropertyLayout(cssClass=...)`.

For example, in the `ToDoItem` class the following annotation (indicating that this is a key, important, property) :

[source,java]
----
@PropertyLayout(cssClass="x-myapp-highlight")
public LocalDate getDueBy() {
    return dueBy;
}
----

would generate the HTML:

[source,html]
----
<div>
    <div class="property ToDoItem-dueBy x-myapp-highlight">
        ...
    </div>
</div>
----

This can then be targeted, for example using:

[source,css]
----
div.x-myapp-highlight span.scalarName {
    color: red;
}
----

Note also that instead of using `@PropertyLayout(cssClass=...)` annotation, you can also specify the CSS style using a xref:userguide:fun:ui.adoc#object-layout[layout file].

== Table columns

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.

There is also the issue of scoping:

* 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.

* 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).

In each of these cases the Wicket viewer adds CSS classes either to containing ``div``s or to the ``<th>`` and ``<td>``
elements of the table itself so that it can custom styles can be appropriately targetted.

=== Applying styles globally

Every rendered collection containing a domain class will be wrapped in a `<div>` that lists that domain class (in CSS safe form).
For example:

[source,xml]
----
<div class="entityCollection com-mycompany-myapp-Customer">
    ...
    <table>
        <tr>
            <th class="title-column">...</th>
            <th class="firstName">...</th>
            <th class="lastName">...</th>
            ...
        </tr>
        <tr>
            <td class="title-column">...</td>
            <td class="firstName">...</td>
            <td class="lastName">...</td>
            ...
        </tr>
        ...
    </table>
    ...
</div>
----

Using this, the `lastName` property could be targeted using:

[source,css]
----
.com-mycompany-myapp-Customer th.lastName {
    width: 30%;
}
----

=== Parented collections

Parented collections will be wrapped in ``<div>``s that identify both the entity type and also the collection Id.
For example:

[source,xml]
----
<div class="entityPage com-mycompany-myapp-Customer">       <!--.-->
    ...
    <div class="orders">                                    <!--.-->
        <table>
            <tr>
                <th class="title-column">...</th>
                <th class="productRef">...</th>
                <th class="quantity">...</th>
                ...
            </tr>
            <tr>
                <td class="title-column">...</td>
                <td class="productRef">...</td>
                <td class="quantity">...</td>
                ...
            </tr>
            ...
        </table>
        ...
    </div>
    ...
</div>
----
<.> the parent class identifier
<.> the collection identifier.
This element's class also has the entity type within the collection (as discussed above).

Using this, the `productRef` property could be targeted using:

[source,css]
----
.com-mycompany-myapp-Customer orders td.productRef {
    font-style: italic;
}
----

=== Standalone collections

Standalone collections will be wrapped in a ``<div>`` that identifies the action invoked.
For example:

[source,xml]
----
<div class="standaloneCollectionPage">
    <div class="com-mycompany-myapp-Customer_mostRecentOrders ...">     <!--.-->
        ...
        <div class="orders">
            <table>
                <tr>
                    <th class="title-column">...</th>
                    <th class="productRef">...</th>
                    <th class="quantity">...</th>
                    ...
                </tr>
                <tr>
                    <td class="title-column">...</td>
                    <td class="productRef">...</td>
                    <td class="quantity">...</td>
                    ...
                </tr>
                ...
            </table>
            ...
        </div>
        ...
    </div>
</div>
----
<.> action identifier.
This element's class also identifies the entity type within the collection (as discussed above).

Using this, the `quantity` property could be targeted using:

[source,css]
----
.com-mycompany-myapp-Customer_mostRecentOrders td.quantity {
    font-weight: bold;
}
----

