Making a custom CSS skin for your Newsroom

Using CSS to update the look and feel of your Newsroom

On top of the default customization options, such as logo, newsroom colors, fonts – Prezly also lets you further customize parts of your newsroom using CSS.

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. 

Examples for how to customize newsrooms with CSS

Changing colors

The colors that you choose on the 'Look & feel' page are declared as !important. So you should declare the colors in your CSS code as !important as well. 

CSS body {    background: green !important; }

Importing custom fonts 

You can use custom web fonts from services like Google fonts, TypeKit, or fonts.com.

You're writing CSS within the <style> tag, so include the fonts with the @import method.

For example:

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

Changing the font type in your Newsroom

To overwrite all fonts and use a different one, use these selectors. Please remember that you first need to import the font you wish to use.

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.

💡 Pro tip: When importing custom fonts, you might want to select the "Use system fonts" option in the Typography settings. This way, your newsroom won't have to load the default font pair (Open Sans / PT Serif), which will make it that much faster:

White labelling newsrooms

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.

The newsroom privacy form 

By default the privacy form on your Prezly Newsroom uses your look and 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 {}