When the Newspack theme options fall short, WordPress’s Additional CSS field in the Customizer can be used to fine-tune your site’s appearance.

When working with custom CSS on Newspack sites, there are a few things we’d like Newspack customers to keep in mind:

Before you start

Starting with an existing theme, there is a limit to what you can do with CSS alone, and doing more ‘hacky’ things to force certain layouts can increase the chances that a future update to the Newspack theme or plugins will cause something to break.

Before making changes with CSS, explore what’s already available in the theme and for the blocks — it may be that what you want to do is already possible with the theme options or block settings.

We strongly recommend reaching out to your TAM before trying to use CSS to make major changes to layouts or placement of elements.

We also ask that you contact your TAM if you’re not fully confident making CSS changes yourself.

Body classes

The Newspack theme adds classes to the <body> tag for a number of the Customization settings. While these classes can help you have finer control over your CSS, they can also cause issues in the custom styles — for example, if a style uses a class that’s only applied to one of the theme’s templates, those styles won’t be applied when a different template is used. Because of this, it’s important to test the different theme options with any custom CSS, to make sure there aren’t issues.

Some of the common CSS body classes include:

Header Settings:

  • Solid background: if the header has a solid background, the body will have the class .h-sb (for “header solid background”); otherwise, it will have the class .h-db (for “header default background”).
  • Centered logo: if the header has a centered logo, the body will have the class .h-cl (for “header centered logo”); otherwise it will have the class .h-ll (for “header left logo”).
  • Short header: if the header is set to use the ‘short’ layout, it will have the body class, .h-sh (for “header short height”); otherwise it will have the class .h-dh (for “header default height”).
  • Simplified Subpage header: if the header has the simplified subpage header set, and you’re not on the front page, the class .h-sub (for “header subpage”) will be applied; otherwise, the class .h-nsub (for “header not subpage” )will be applied.
  • Mobile Call-to-action: If the Mobile CTA is enabled, the body will have the the class .h-cta applied.

Templates:

  • Default template: Posts with this template will have the body class .post-template-default; pages with this template will have the body class .page-template-default.
  • One Column: Posts with this template will have the body class .post-template-single-feature; pages with this template will have the body class .page-template-single-feature.
  • One Column Wide: Posts with this template will have the body class .post-template-single-wide; pages with this template will have the body class .page-template-single-wide.

Featured Image placements:

  • Featured Image Behind: with this featured image placement, the body will have the class .single-featured-image-behind.
  • Featured Image Beside: with this featured image placement, the body will have the class .single-featured-image-beside.
  • Featured Image Above: with this featured image placement, the body will have the class .single-featured-image-above.

Adding custom fonts

You can use the Typography options in the Newspack theme to include third-party hosted fonts, instead of using @import in the Additional CSS field.

Support Home

Working with Custom CSS

Theme Table of Contents