Noticeable allows customizing styles and content for Newspages. You can edit styles with Cascading Style Sheets (CSS) or inject HTML and JavaScript (JS).
Injecting Code in a Newspage
Open a project from the Noticeable dashboard.
Select Newspage in the left menu.
Click on the Code Injection settings group.
Type the code you want to inject, select where to inject it (after <body>, after <head>, before </body> or before </head>) and click Save & View:
Usage Examples
Increasing the font size
<style>
body {
font-size: 120%;
}
</style>
<style>
body {
border-top: 5px solid $project_accent_color;
}
</style>
You can use the special keyword $project_accent_color to get the accent color (hexadecimal color code) corresponding to the current project. It is automatically replaced by the right value when your CSS is injected into your Newspage.
Making labels monochrome
<style>
.label {
background-color: #777 !important;
}
</style>
Injecting Code in a Newspage
Open a project from the Noticeable dashboard.
Select Newspage in the left menu.
Click on the Code Injection settings group.
Type the code you want to inject, select where to inject it (after <body>, after <head>, before </body> or before </head>) and click Save & View:
Usage Examples
Increasing the font size
<style>
body {
font-size: 120%;
}
</style>
<style>
body {
border-top: 5px solid $project_accent_color;
}
</style>
You can use the special keyword $project_accent_color to get the accent color (hexadecimal color code) corresponding to the current project. It is automatically replaced by the right value when your CSS is injected into your Newspage.
Making labels monochrome
<style>
.label {
background-color: #777 !important;
}
</style>
Updated on: 02 / 06 / 2021