Summary
Set customization of theme components at Runtime. Dedicate an extra Subpage in the marketplace Portal for that.
One possible page is a sub-page in the Profile page called "Advanced Customization", accessible via the click of the button "Advanced Customizing" or similar, and which expands the Profile page with the "Components Customization" section.
Some general categories of what components can be customized at Runtime:
Global settings:
Typography, such as: font-family, general font-size.
Headings: font-size, style.
As a start the properties of the following components can be customized at Runtime (with the use of custom CSS vars):
Buttons: customize color and style of all buttons. Besides the background and text color, other things can be customized such as: font-size, border-radius, shadows.
Dropdowns: The same as buttons. For a start, customize also besides the colors: font-size, border-radius, and shadows.
Breadcrumbs: background-color, text-color, style (for now only font-size of text and border radius). For later, space between breadcrumbs-items, style of divider, etc.
list-group-items: As a start: background-color, text-color. Colors of active (selected) and non-active list-group-items can be defined as well.
navbar-items: background-color and text-color already to be defined in task "Set Theme Colors at runtime".
However, the hamburger icon can also be customized here (which icon we use, its background-color and its text-color).
Tables: Customize the table-background-color, the table-text-color, and later the colors of row and even table rows and table hover color.
Pagination items: harder for now to customize, as we use the Richfaces pagination.
Details
More details to follow about which components and how can be customized.
Acceptance criteria
[ ] Manual tests for update of components upon "Save".
[ ] UI Tests
[ ] Document set of variables which are customizable.
Summary Set customization of theme components at Runtime. Dedicate an extra Subpage in the marketplace Portal for that. One possible page is a sub-page in the Profile page called "Advanced Customization", accessible via the click of the button "Advanced Customizing" or similar, and which expands the Profile page with the "Components Customization" section.
Some general categories of what components can be customized at Runtime:
Global settings:
As a start the properties of the following components can be customized at Runtime (with the use of custom CSS vars):
Buttons: customize color and style of all buttons. Besides the background and text color, other things can be customized such as: font-size, border-radius, shadows.
Dropdowns: The same as buttons. For a start, customize also besides the colors: font-size, border-radius, and shadows.
Breadcrumbs: background-color, text-color, style (for now only font-size of text and border radius). For later, space between breadcrumbs-items, style of divider, etc.
list-group-items: As a start: background-color, text-color. Colors of active (selected) and non-active list-group-items can be defined as well.
navbar-items: background-color and text-color already to be defined in task "Set Theme Colors at runtime". However, the hamburger icon can also be customized here (which icon we use, its background-color and its text-color).
Tables: Customize the table-background-color, the table-text-color, and later the colors of row and even table rows and table hover color.
Pagination items: harder for now to customize, as we use the Richfaces pagination.
Details More details to follow about which components and how can be customized.
Acceptance criteria
Additional context N/A.