Difference between revisions of "Theme Components"
From AgileApps Support Wiki
Wikidevuser (talk | contribs) () |
Wikidevuser (talk | contribs) () |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 58: | Line 58: | ||
|} | |} | ||
==<ace-object-views-list | ==<ace-object-views-list>== | ||
Following variables are available for customization: | Following variables are available for customization: | ||
| Line 100: | Line 100: | ||
</pre> | </pre> | ||
==<ace-record-attachment | ==<ace-record-attachment>== | ||
Following variables are available for customization: | Following variables are available for customization: | ||
| Line 140: | Line 140: | ||
</pre> | </pre> | ||
==<ace-record-table-view | ==<ace-record-table-view>== | ||
Following variables are available for customization: | Following variables are available for customization: | ||
| Line 160: | Line 160: | ||
$ace-record-table-view-loadmore-background-color: #00ff00; | $ace-record-table-view-loadmore-background-color: #00ff00; | ||
</pre> | |||
==<ace-record-task-view>== | |||
Following variables are available for customization: | |||
:{| border="1" cellpadding="5" cellspacing="1"| | |||
|- align="center" | |||
! Variable !! | Default value !! | Description | |||
|- | |||
| $ace-record-task-view-header-btn-border-radius || 50% || Sets the border radius of task header button. | |||
|- | |||
| $ace-record-task-view-header-font-size || 2rem || Sets the font size of task header. | |||
|- | |||
| $ace-record-task-view-subheader-font-size || 1.75rem || Sets the font size of task subheader. | |||
|} | |||
You can assign different values to each of the above variables as follows: | |||
<pre>html | |||
$ace-record-task-view-header-btn-border-radius : 20%; | |||
$ace-record-task-view-subheader-font-size: 1rem; | |||
</pre> | |||
==<ace-related-info>== | |||
Following variables are available for customization: | |||
:{| border="1" cellpadding="5" cellspacing="1"| | |||
|- align="center" | |||
! Variable !! | Default value !! | Description | |||
|- | |||
| $ace-related-info-header-background || transparent || Sets the header background of related info. | |||
|- | |||
| $ace-related-info-header-text-color || inherit || Sets the header color of related info. | |||
|} | |||
You can assign different values to each of the above variables as follows: | |||
<pre>html | |||
$ace-related-info-header-background : #fff; | |||
$ace-related-info-header-text-color: #00ffdd; | |||
</pre> | |||
==<ace-role-switcher>== | |||
Following variables are available for customization: | |||
:{| border="1" cellpadding="5" cellspacing="1"| | |||
|- align="center" | |||
! Variable !! | Default value !! | Description | |||
|- | |||
| $ace-role-switcher-list-background-color || #f8f9fa || Sets the background color. | |||
|- | |||
| $ace-role-switcher-list-background-color-focus || #f8f9fa || Sets the background color in focused state. | |||
|- | |||
| $ace-role-switcher-list-border-focus || 1px solid #6200ee || Sets the border property in focus mode. | |||
|- | |||
| $ace-role-switcher-list-active-item-background-color || #6200ee || Sets the background color of active item. | |||
|} | |||
You can assign different values to each of the above variables as follows: | |||
<pre>html | |||
$ace-role-switcher-list-background-color-focus : #fff; | |||
$ace-role-switcher-list-active-item-background-color: #00ffdd; | |||
</pre> | |||
<!-- role swither list bg-color missing --> | |||
<!-- role swither list border-color missing --> | |||
==<ace-user-profile>== | |||
Following variables are available for customization: | |||
:{| border="1" cellpadding="5" cellspacing="1"| | |||
|- align="center" | |||
! Variable !! | Default value !! | Description | |||
|- | |||
| $ace-user-profile-font-size || 1rem || Sets the font size property. | |||
|- | |||
| $ace-user-profile-font-weight || lighter || Sets the font weight property. | |||
|- | |||
| $user-profile-text-transform || uppercase || Sets the text-transform property. (For example, capitalize, lowercase, uppercase, and so on.) | |||
|} | |||
You can assign different values to each of the above variables as follows: | |||
<pre>html | |||
$ace-user-profile-font-size : 18px; | |||
$ace-user-profile-font-weight: bold; | |||
$user-profile-text-transform: capitalize; | |||
</pre> | |||
==<ace-view-config>== | |||
Following variables are available for customization: | |||
:{| border="1" cellpadding="5" cellspacing="1"| | |||
|- align="center" | |||
! Variable !! | Default value !! | Description | |||
|- | |||
| $ace-view-config-filter-section-background || #f8f9fa || Sets the filter section background color property. | |||
|- | |||
| $ace-view-config-add-new-filter-button-color || #6200ee || Sets the color of add new filter button. | |||
|- | |||
| $ace-view-config-remove-filter-button-color || #6200ee || Sets the color of remove filter button. | |||
|- | |||
| $ace-view-config-filter-toggle-button-background || #6200ee || Sets the toggle button color of view-config. | |||
|} | |||
You can assign different values to each of the above variables as follows: | |||
<pre>html | |||
$ace-view-config-filter-section-background : #fff; | |||
$ace-view-config-view-config-filter-line-color: skyblue; | |||
</pre> | </pre> | ||
Latest revision as of 09:17, 20 October 2023
<ace-activity-history>
Following variables are available for customization:
Variable Default value Description $ace-activity-history-date-color #6200ee Sets the color property of date in activity history. $ace-activity-history-timeline-divider-color #6200ee Sets the divider color in activity history. $ace-activity-history-icon-border-radius 50% Sets the icon button border radius property in activity history. $ace-activity-history-time-line-color #6200ee Sets the color property of timeline in activity history. $ace-activity-history-image-border-color #6200ee Sets the border color property of image in activity history. $ace-activity-history-image-box-shadow-color #6200ee Sets the box shadow color property of an image in activity history.
You can assign different values to each of the above variables as follows:
html $ace-activity-history-date-color : #00ff00; $ace-activity-history-icon-border-radius: 20%;
Following variables are available for customization:
Variable Default value Description $ace-app-nav-list-background-color #f8f9fa Sets the background color property. $ace-app-nav-list-background-color-focus #f8f9fa Sets the background color property in focus mode. $ace-app-nav-list-border-focus 1px solid #6200ee Sets the color in focus mode. $ace-app-nav-list-active-item-background-color #6200ee Sets the background color in active mode of the item.
You can assign different values to each of the above variables as follows:
html $ace-app-nav-list-border-focus : 1px solid #00ff00; $ace-app-nav-list-active-item-background-color: #fff;
Bookmark
Following variable is available for customization:
Variable Default value Description $ace-lib-bookmark-max-height 100% This reflects the inner height of the bookmark list. If the list increases beyond the mentioned height value, the scroll-bar appears for that list.
<ace-object-views-list>
Following variables are available for customization:
Variable Default value Description $ace-object-views-list-background-color #f8f9fa Sets the view list background color. $ace-object-views-list-border-focus 1px solid #6200ee Sets the border property in focus mode. $ace-object-views-list-background-color-focus #f8f9fa Sets the view list background color in focus mode.
You can assign different values to each of the above variables as follows:
html $ace-object-views-list-border-focus : 1px solid #00ff00; $ace-object-views-list-background-color-focus: #fff;
<ace-record-actions>
Following variables are available for customization:
Variable Default value Description $ace-record-action-list-background-color #f8f9fa Sets the record actions background color. $ace-record-action-list-border-focus 1px solid #6200ee Sets the border property in focus mode. $ace-record-action-list-background-color-focus #f8f9fa Sets the record actions background color in focus mode.
You can assign different values to each of the above variables as follows:
html $ace-record-action-list-border-focus : 1px solid #00ff00; $ace-record-action-list-background-color-focus: #fff;
<ace-record-attachment>
Following variables are available for customization:
Variable Default value Description $ace-record-attachment-header-font-size 2rem Sets the header font size property. $ace-record-attachment-item-background-color transparent Sets the background color of attachment item. $ace-record-attachment-item-hover-color #6200ee Sets the color property of attachment item in hover. $ace-record-attachment-item-hover-background-color #6200ee Sets the background color of attachment item in hover mode.
You can assign different values to each of the above variables as follows:
html $ace-record-attachment-header-font-size : 18px; $ace-record-attachment-item-background-color: #fff;
<ace-record-process>
Following variable is available for customization:
Variable Default value Description $ace-record-process-header-font-size 2rem Sets the font size property for the header.
You can assign different values to the above variable as follows:
html $ace-record-process-header-font-size: 20px;
<ace-record-table-view>
Following variables are available for customization:
Variable Default value Description $ace-record-table-view-profilePic-border-radius 50% Sets the border radius of profile picture. $ace-record-table-view-actionMenu-btn-border-radius 50% Sets the border radius of action menu button. $ace-record-table-view-loadmore-background-color #fff Sets the background color of loadmore button.
You can assign different values to each of the above variables as follows:
html $ace-record-table-view-profilePic-border-radius : 20%; $ace-record-table-view-loadmore-background-color: #00ff00;
<ace-record-task-view>
Following variables are available for customization:
Variable Default value Description $ace-record-task-view-header-btn-border-radius 50% Sets the border radius of task header button. $ace-record-task-view-header-font-size 2rem Sets the font size of task header. $ace-record-task-view-subheader-font-size 1.75rem Sets the font size of task subheader.
You can assign different values to each of the above variables as follows:
html $ace-record-task-view-header-btn-border-radius : 20%; $ace-record-task-view-subheader-font-size: 1rem;
Following variables are available for customization:
Variable Default value Description $ace-related-info-header-background transparent Sets the header background of related info. $ace-related-info-header-text-color inherit Sets the header color of related info.
You can assign different values to each of the above variables as follows:
html $ace-related-info-header-background : #fff; $ace-related-info-header-text-color: #00ffdd;
<ace-role-switcher>
Following variables are available for customization:
Variable Default value Description $ace-role-switcher-list-background-color #f8f9fa Sets the background color. $ace-role-switcher-list-background-color-focus #f8f9fa Sets the background color in focused state. $ace-role-switcher-list-border-focus 1px solid #6200ee Sets the border property in focus mode. $ace-role-switcher-list-active-item-background-color #6200ee Sets the background color of active item.
You can assign different values to each of the above variables as follows:
html $ace-role-switcher-list-background-color-focus : #fff; $ace-role-switcher-list-active-item-background-color: #00ffdd;
<ace-user-profile>
Following variables are available for customization:
Variable Default value Description $ace-user-profile-font-size 1rem Sets the font size property. $ace-user-profile-font-weight lighter Sets the font weight property. $user-profile-text-transform uppercase Sets the text-transform property. (For example, capitalize, lowercase, uppercase, and so on.)
You can assign different values to each of the above variables as follows:
html $ace-user-profile-font-size : 18px; $ace-user-profile-font-weight: bold; $user-profile-text-transform: capitalize;
<ace-view-config>
Following variables are available for customization:
Variable Default value Description $ace-view-config-filter-section-background #f8f9fa Sets the filter section background color property. $ace-view-config-add-new-filter-button-color #6200ee Sets the color of add new filter button. $ace-view-config-remove-filter-button-color #6200ee Sets the color of remove filter button. $ace-view-config-filter-toggle-button-background #6200ee Sets the toggle button color of view-config.
You can assign different values to each of the above variables as follows:
html $ace-view-config-filter-section-background : #fff; $ace-view-config-view-config-filter-line-color: skyblue;