Custom Classes


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:

  1. In Design Studio, go to Custom Classes
    Go to Custom Classes in Design Studio
  2. Click "Add Custom Class"
    Click on Add a Custom Class
  3. Enter in the Title - this is what would display in the Style pulldown
  4. Enter in the HTML class attribute - this is what you'd reference in screen.css
  5. Select what elements the custom class will be applied to (more info below)
  6. 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

Alternate gallery layout on Honolulu Family homepageDifferent gallery layout on Honolulu Family homepage

Custom class for container

  • Have one part of a section page with a different background color

dark container on STL homepageDark 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 lonform sectionSpecial 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
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.


Have more questions? Submit a request


  • Avatar
    NOW IT

    It's been over a year..

Powered by Zendesk