Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Shell Theme Tweaks

Vote:
 

We recently upgraded to CMS-12 and made some adjustments to the shell theme as we did in the past.
I thought I'd share these as they are tweaks that I would recommend for everyone.
All you need is to add theme-override.css and a module.config client resources entry.

module.config

...
<clientResources>
   <add name="epi.shell.ui" path="Static/css/theme-override.css" resourceType="Style"/>
</clientResources>
...

theme-override.css

/* Fix longer properties with [UIHint(UIHint.PreviewableText)] */
.Sleek .dijitTabPaneWrapper .epi-form-container__section__row .epi-previewableTextBox-text {
    max-width: 360px;
}

/* Fix stretch of media thumbnails that are not 1:1 */
.Sleek .epi-thumbnail {
    object-fit: contain;
}

/* Fix personalized groups in content areas before expanding */
.Sleek .epi-content-area-editor .epi-tree-mngr--group .epi-tree-mngr--group-header {
    padding: 8px 12px;
}

.Sleek .epi-content-area-editor .epi-tree-mngr--group .epi-tree-mngr--group-header .dijitTreeLabel {
    padding: 4px 3px;
}

.Sleek .epi-content-area-editor .epi-tree-mngr--group .epi-tree-mngr--group-header .dijitTreeContent {
    display: block;
}

.Sleek .epi-content-area-editor .epi-tree-mngr--group .epi-tree-mngr--group-header .epi-extraIconsContainer .epi-extraIcon {
    margin: 5px 5px 0 0;
}

.Sleek .epi-content-area-editor .epi-tree-mngr--group .epi-tree-mngr--group-header .dijitTreeIcon {
    margin: 6px 2px 0 0;
}

PreviewableText are the style used in on the Settings tab that are visable with a "change" link. They are nice to use for a property that you want the be visable, but discourage editing. We use them for a GUID that links to an external API, but the value was being cut off by the default CSS.

Thumbails are often 1:1 aspect ratio by generation on uploaded media files, but we have them pulled from YouTube thumbnails for our implementation of those video media via an implemation of IModelTransform. This CSS rule fixes display for that.

Personalized groups seem to be a rarely used feature, and look broken before expanding in the editor. These tweaks give nicer defaults to the display of them before and after expanding them.

#293564
Edited, Dec 22, 2022 19:15
Chris Sharp - Dec 23, 2022 19:45
Might be useful to explain what these tweaks do, or provide some screenshots.
Matthew Jimenez - Dec 27, 2022 14:46
That's fair - I've added comments to the CSS and some extra notes on previewable text
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.