Do even more with CSS & Javascript

How you can further customize your Newsrooms

If you are on a Premium 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. 

Just remember – with great power comes great responsibility. Using CSS/JS so make sure you or someone in your team have that knowledge before implementing any changes in your newsroom.

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

⚠️Note: Check out Open Newsroom Themes, which will let you do even more with your Prezly Newsrooms.

Announcing Open Newsroom Themes
Announcing Open Newsroom Themes

Soon you'll be able to transform the layout of your Newsrooms


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=Rubik:400,700'); * {     font-family: 'Rubik’, sans-serif !important; } h2,h3,h4,h5,h6,strong { font-family: 'Rubik', 'Open Sans', serif !important; font-style: strong !important } h1{ font-family: 'Rubik', 'Open Sans', serif !important; font-size: 48px !important; font-weight:bold !important; }

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); }