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.

AMP’s CSS limit

AMP limits the amount of CSS each page can load to 75kb, and will remove any CSS files that exceed that amount.

AMP uses a process called “tree-shaking” to remove unneeded CSS — on AMP’s site, it’s described as “a set of checks and heuristics to eliminate as many CSS rules not used in a given generated AMP page as possible”. In other words, the CSS loaded on any given page reflects what is actually on that page, rather than the site’s total CSS.

This limit has nothing to do with the total CSS loaded by the site — it’s tied to the CSS needed for anything that’s shown on a given page. The more varied content there is, the more CSS that is required.

Adding different blocks with different settings, or content from plugins, can increase the amount of CSS loaded on a page. AMP will also load all of the styles for an element — for different screensizes and print styles, too — so hiding elements at certain breakpoints will not reduce how much CSS a page has.

You can see how much CSS a page is loading when you’re logged in to your Newspack site by hovering over the AMP menu in the Admin Toolbar:

Homepages tend to be the most complex pages on Newspack sites, so they act as good temperature check for whether your design is loading too much CSS. We recommend keeping the homepage’s CSS Usage in the low 90s% and under, and checking the total after content or CSS changes.


Adding custom fonts

AMP allows custom fonts to be added to your site in one of two ways — using <link> to load font styles by a number of white-listed font providers, or using @font-face — there’s some more information about this here, including allowed font sources. If you use @import in the Additional CSS field to load fonts, it will be stripped out.

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


Avoiding !important

Often !important is used in CSS as a short cut to override more complex CSS selectors. However, due to the way AMP transform that selector, you often end up with more characters in the tree-shaken CSS.

For example, if you used the following styles:

.nav1 {
    font-size: 20px !important;
}

It would be transformed into this as part of the CSS rewriting process AMP does:

:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .nav1 {
    font-size: 20px;
}

We recommend against using !important in the Custom CSS because it can often add more bulk to your CSS (and more complexity) than repeating the selectors used in the theme.


You can learn more about AMP and CSS here.