Custom Timeline Styles

Noticeable allows customizing Timeline styles by injecting your own Cascading Style Sheets (CSS). You can even override Noticeable’s predefined styles:

Open a project from your dashboard.
Select "Timeline" in the project menu bar.
Click on the "Custom CSS" option from the sidebar:

Enter your custom CSS and save.

Usage Examples

Increasing the font size

body {
font-size: 120%;

Adding a colorful banner on top of your Timeline

body {
border-top: 5px solid $project-accent-color;

You can use the special keyword $project-accent-color to get the hexadecimal color corresponding to the project accent color. It is automatically replaced by the right value when your CSS is injected on your Timeline page.

Making labels monochrome

.label {
background-color: #777 !important;
Was this article helpful?
Thank you!