All the options mentioned previously are available to all Prezly users, if you are on an Expert or Enterprise plan, you can also further customize your newsrooms with CSS and Javascript (JS). Our CSS/JS feature allows you to change almost everything on your newsrooms. 

Ps: With great power comes great responsibilities, using CSS/JS so make sure you or someone in your team have that knowledge before implementing any changes in the newsroom.

Below you can find some examples of how CSS/JS can help you styling your newsroom even more.

Adding a custom font

Using the stylesheet editor, you can import custom fonts in your newsroom. This process is also described in the article Making a custom skin with CSS. Below you can see briefly how that process works.

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,700&display=swap');

* {
    font-family: 'Open Sans', sans-serif !important;
}

h1,h2,h3,h4,h5,h6,strong {
   font-family: 'Playfair Display', 'Georgia', serif !important;
}


//Changing the font size of the header:
h1{
font-size: 20px;
}

Changing the size of your header

Through CSS you can also change specific newsroom parts. It's is possible to set  different dimensions and sizes to the Header, Contacts, and Footer for example. 

To demonstrate that, when adding the following code in the Stylesheet editor, the height of the header is set to a specific value. This is used in the newsroom customers.prezly.io to make the header the same height as in our website.

.header{
   max-height: 73px;
}

Adding a shadow effect 

It's possible to add different style effects to certain parts of your newsroom using CSS. In the example below, by adding the code to a specific part such as the header, or like in the example the story block, you can add a nice shadow effect to that section.

div.main.story{
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.04), 0 2px 40px 0 rgba(0,0,0,.06);
}

Did this answer your question?