With the PRO version of Metro Publisher you can do provide alternative styles to standard elements using custom classes. Here's how you add a custom class and begin using it in your CSS:
- In Design Studio, go to Custom Classes
- Click "Add Custom Class"
- Enter in the Title - this is what would display in the Style pulldown
- Enter in the HTML class attribute - this is what you'd reference in screen.css
- Select what elements the custom class will be applied to (more info below)
- Save
Applying the custom class
If you selected Section, Container, or any of the sprockets, go to their corresponding edit page you'll see a "Style" pulldown that will allow you to select the new class you've made. If you just created the custom class and have CSS work in progress (in draft) that has not been published yet, then you'll see the draft status next to the custom class.
If you selected Tag, the process of applying the custom class to the intended element is a little different. First, you go to edit the tag on the corresponding tag edit page, select your new class in the "Style" pulldown, and make sure the tag is published. Then, add the tag as you wish to the content, event, or location. If you don't want readers to see the tag, you can mark it as an internal tag.
Here are the details on where the custom class will appear depending on the use:
- Section
- in <body> of the section
- in sprockets on individual content from given section and its subsections
- in search results on individual content from given section
- in <body> of all content in section - Container - on section layout container
- Tag
- in sprockets on individual content bearing tag
- in search results on individual content bearing tag
- in <body> of all content, events, or locations bearing tag - Sprockets - in the same div where sprocket class is defined
Common use cases for using custom classes
There are many ways that you can use custom classes, below are some typical design challenges where the custom classes can be used as a solution.
Custom class for sprocket
- Alternative styling for a sprocket
- Change thumb image proportions in a sprocket (using --ls-ratio CSS variable)
Different gallery layout on Honolulu Family homepage
Custom class for container
- Have one part of a section page with a different background color
Dark area on St. Louis Magazine homepage
Custom class for section
- Special styling based on a section
- Highlight content from one section in sprockets, search results, or topics
Special layout for articles in Longform section on Memphis magazine
Custom class applied via tag
- Label/moniker for sponsored content
- Special styling individual content on a sprocket, search results, or topics
- Alternate layout for individual content
Highlight and add moniker to sponsored pieces on Alexandria Living Magazine
As you may already noticed, depending on how you apply the custom class it could "follow" a piece of content around. This is true when you apply the custom class via section or tag. Keep this in mind when deciding how you want the custom class to be applied.
It's been over a year..