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.
/* 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.
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
theme-override.css
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.