The ability to to add and edit CSS within Shorthand is available only on some plans. To discuss adding this feature, please get in touch.
While there are a number of options built into Shorthand to allow you to easily change colours and other attributes, there may be instances where you want to modify things that require some CSS tweaks. Below are some guidelines and examples that you may find helpful.
Targeting elements by section ID
If you want to limit the change to a specific section, each section includes a section ID that you can prefix to the CSS. The ID can be found at the bottom of the section settings on the left of the story editor (see here for an example of where to find it).
If you want to apply one of the CSS examples below to a specific section, but the first class in the CSS references the name of the section type (e.g. .Theme-BackgroundScrollmationSection) then you should replace that class with the section ID, otherwise when the example doesn't reference the section type then you will likely need to include a space between the section ID and the start of the CSS selectors.
Note: A section ID won't change if you move a section around within a story, but it will change if you make a copy of a story or if you add a section from a section template.
Story editor vs. Preview/Published story
We suggest that you attempt to ensure your CSS selectors are relaxed enough to work both in our editor and the preview and published versions of the story to ensure that your non-technical users are still able to edit the story in Shorthand while maintaining the editing style that Shorthand is so proud of. If you add CSS with too much specificity it could mean that changing settings in the editor won't work.
If you find that styles you have added are interfering with the Shorthand editor, you can add body:not(.body-editor) before the CSS rule to only apply it to the preview and published story, e.g.:
body:not(.body-editor) a { color: black;}
Note that elements in the story editor are sometimes structured slightly different than in the preview and published versions of the story, and a CSS rule that works as expected in the editor might not work the same outside of it, so when adding CSS you should generally focus on reviewing and testing how it looks in the story preview rather than in the editor.
Custom CSS Examples
Below are some simple examples for commonly requested customisations.
IMPORTANT:
This code assumes you have a basic working knowledge of how CSS works! If you require our help to debug or fix your code, a charge may be required.
If you already have a custom theme, some CSS may not be specific enough to override the theme CSS.
Do not include <style></style> tags when adding CSS to the CSS panel.
TIP: We recommend writing and editing your code in a dedicated code editor (such as Visual Studio Code) and pasting into Shorthand. This will be much more efficient and provide better formatting and debugging options.
Add custom fonts to a story
Hide "Visit Link" and link icon for linked images
.CardCanvasItem > a:after,.Theme-Layer-ResponsiveMedia-image > a:after,.Theme-Layer-BodyText .InlineMedia--image__inner a:after,.Theme-Layer-BodyText .InlineMedia--image > a:after,.CardCanvasItem > a:hover:after,.Theme-Layer-ResponsiveMedia-image > a:hover:after,.Theme-Layer-BodyText .InlineMedia--image__inner a:hover:after,.Theme-Layer-BodyText .InlineMedia--image > a:hover:after { content: none !important;}
Reduce top and bottom padding from Text or Scrollmation sections
Note: We have a section padding feature that allows you to choose between a few different preset sizes, so you should only use CSS if those pre-defined options don't work for your use case. The built-in section padding feature works with most section types, however the CSS below typically only works for Text sections and Scrollmation sections.
/* Replace #section-id with the ID of the section you want to target */
#section-id .Theme-Layer-BodyText { padding-top: 10px; padding-bottom: 10px;}
/* The CSS above applies it to all screen widths, but if you only want to reduce the padding on smaller screens you can use this: */
@media (max-width: 899px) { #section-id .Theme-Layer-BodyText { padding-top: 10px; padding-bottom: 10px; }}
Reduce margin at top and bottom of mobile (screen less than 900px) Background Scrollmation sections
@media (max-width: 899px) { .Theme-BackgroundScrollmationSection .Theme-Layer-BodyText { margin-top: 30px; margin-bottom: 30px; }}
Remove padding on Media section images to make them fill the whole section
.Theme-MediaSection .Theme-Layer-ResponsiveMedia-image { padding: 0 !important;}
Customise caption font size and alignment
.Theme-Caption p:not(:empty) { font-size: 12px; text-align: left;}
Customise hamburger menu color
.Theme-Hamburger span { background: white;}
Customise background colour of 'breakout' element text
.Theme-Layer-BodyText-Breakout { background: #000000 !important; opacity: .85;}
Customise indent element color and width
.Theme-Layer-BodyText-Indent { border-color: red; border-width: 10px;}
Customise unordered list bullet style type
.Theme-Layer-BodyText-List-Unordered { list-style-type: disc;}
Customise ordered list bullet style type
.Theme-Layer-BodyText-List-Ordered { list-style-type: upper-roman;}
Customise list bullet color
li::marker { color: red;}
Customise divider line height and top and bottom spacing
.Theme-Layer-BodyText-Divider { height: 10px !important; margin-top: 5px !important; margin-bottom: 5px !important;}
Customise corner rounding of text boxes in Reveal, Scrollpoints, and Charts sections
.Theme-RevealSection .Theme-Layer-BodyText .Theme-Overlay { border-radius: 0;}
.Theme-ScrollpointsSection .Theme-Layer-BodyText .Theme-Overlay { border-radius: 0;}
.Theme-ChartSection .Theme-Layer-BodyText .Theme-Overlay { border-radius: 0;}
Force the overlay on Background Scrollmation sections to be full-section height (by default it may be shorter if there's not enough content in the text columns)
@media (min-width: 900px) {
.Theme-BackgroundScrollmationSection .Theme-Layer-BodyText {
height: 100%;
/* uncomment lines below if you also want to vertically center the content */
/* display: flex;
align-items: center; */
}
}
Add overlay behind the text box in Title or Text Over Media sections (e.g. to offset the font box from the media behind it without using an overlay over the whole section)
Note: this overlay won't show in the story editor and won't be applied to the byline text box in Title sections
.Theme-Layer-TextBlock > .Theme-Layer-TextBlock-Container:first-of-type .Theme-Layer-TextBlock-Inner {
background: rgba(255, 255, 255, .7);
padding: 50px;
/* adds rounded corners */
border-radius: 16px;
}
@media (max-width: 620px) {
.Theme-Layer-TextBlock > .Theme-Layer-TextBlock-Container:first-of-type .Theme-Layer-TextBlock-Inner {
max-width: 90% !important;
margin: 0 auto;
}
}
Customize active/hovered navigation text
Note: does not work with Project navigation
.Theme-ActiveNavigationBarItem .Theme-NavigationLink,
.Theme-NavigationLink:hover{
color: red !important;
}
Hide a section
Note: This will merely hide the section, but any viewers that inspect the source code of the page in the browser will still be able to view it.
Hide it in preview/published story but leave it fully shown in the story editor:
body:not(.body-editor) #section-id { display: none; }
Hide it in the editor as well, although it will still show up in the section sidepane on the left side of the editor:
#section-id { display: none; }