39 lines
814 B
Plaintext
39 lines
814 B
Plaintext
[#dashboard-css]
|
|
= Change component style
|
|
|
|
You can change the style of any dashboard component by adding a `cssClass` property to the component. This is useful for styling actions, displays, fieldsets and folders. Here is an example of how to add a class to an action;
|
|
|
|
[source,yaml]
|
|
----
|
|
themeName: my-theme
|
|
|
|
actions:
|
|
- title: My Action
|
|
shell: echo "Hello"
|
|
|
|
dashboards:
|
|
- title: My Dashboard
|
|
contents:
|
|
- title: My Fieldset
|
|
type: fieldset
|
|
contents:
|
|
- title: My Action
|
|
cssClass: big-button
|
|
----
|
|
|
|
You can then create a theme, and add the following CSS to style the action;
|
|
|
|
[source,css]
|
|
.`custom-webui/themes/my-theme/theme.css`
|
|
----
|
|
.big-button {
|
|
background-color: red;
|
|
color: white;
|
|
font-size: 20px;
|
|
grid-column: span 2;
|
|
grid-row: span 2;
|
|
}
|
|
----
|
|
|
|
|