Making a custom CSS skin for your newsroom

Using CSS to update the look and feel of your newsroom

On top of the default newsroom customization options, such as adding logos, and defining newsroom colors and fonts, Prezly lets you further customize parts of your newsroom using CSS.

You can use the below guidance to make basic changes to your newsroom style. It covers:

Where to find your CSS stylesheet

To add a CSS snippet to your newsrooms, hop in the Newsroom Settings and go to the Look & Feel page. 

At the bottom of that page, you'll see an Edit CSS button. Click on it to start adding custom stylesheets to your newsroom.

You don't need to add <style>  tags in the editor, just start writing the actual CSS and Prezly will automatically insert it in the newsroom.

💡Pro Tip: Changing the CSS can have a big impact on the layout of your newsroom. Leave it up to someone with special web design powers. CSS and Javascript customization is available on our Premium and Enterprise plans. 

How to customize newsrooms with CSS

Change newsroom colors

The colors that you choose in your Look & Feel settings are declared as !important. So you should declare the colors in your CSS code as !important as well. 

CSS body {    background: green !important; }

Use a custom font

To use a custom font within the newsroom, you first need to import the font and then tell your newsroom how you want that font used. You can do both via your CSS stylesheet.

1. Import custom fonts 

You can use custom web fonts from services like Google fonts, TypeKit or fonts.com by importing them into your newsrooms via CSS. To do this, you will need to have a URL for the online version of your chosen font.

Google makes this easy via its API, since its fonts are free to use. Other providers may require you to purchase your font first and then host it online yourself so that you can use it wherever you want. If you have trouble with hosting your purchased font, please speak with your IT team.

Read how to use Google's API to find your font URL

The CSS you enter within your newsroom falls within the <style> tag, so you can set your newsrooms to use your custom fonts using the @import method.

For example, this code will import the Google font, Lato:

CSS @import url('https://fonts.googleapis.com/css?family=Lato');

2. Define how your custom font is used

Once you have imported your font, you can use the following CSS to define how that font (or fonts) are used within your newsroom. In the below examples, we've used the font family Open Sans; replace this name with that of your chosen font family.

To overwrite all fonts and use a different one, use these selectors:

CSS * {     font-family: 'Open Sans' !important; }

To overwrite only the headers (titles) font, use these selectors:

CSS h1,h2,h3,h4,h5,h6 {    font-family: 'Open Sans' !important; }

If you wish to have a different font for headers and a different font for the rest of the text, first use the override for all fonts, then add the override for the headers.

Learn more about CSS fonts at W3Schools

3. Set your default newsroom font to "Use system fonts"

When importing custom fonts, you might want to select the "Use system fonts" option in the "Select your font" section of your newsroom typography settings. This way, your newsroom won't have to load the default font pair, which will make it that much faster:

Stylize your newsroom privacy form 

By default the privacy form on your Prezly Newsroom uses your Look & Feel settings. If you wish to style your Privacy Request form, you can use the below CSS selectors.

For example:

CSS // Inputs and textarea .privacy-form__input, .privacy-form__textarea {} // Form label style .privacy-form__text-label {} // Privacy form button .privacy-form__button {} // Privacy form label .privacy-form__required-label {}

White-label your newsroom

To keep a newsroom's look and feel aligned with a company or organization's branding, we understand that some Prezly users may request to remove the Newsroom published with Prezly: PR Software text found in the footer of your newsrooms. To do so, please contact our support team to submit a request for this.