Newspage Code Injection (CSS, HTML, JS) 🖌️
Noticeable allows customizing styles and content for Newspages. You can edit styles with Cascading Style Sheets (CSS) or inject HTML and JavaScript (JS).
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:
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.
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>Adding a colorful banner on top of your Newspage
<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
Thank you!