> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.noticeable.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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).**

# Injecting Code in a Newspage

1. Open a project from the Noticeable [dashboard](https://dashboard.noticeable.io).
2. Select _Newspage_ in the left menu.
3. Click on the _Code Injection_ settings group.
4. 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_:

![](https://storage.crisp.chat/users/helpdesk/website/55d6234c11240c00/screenshot-from-2021-02-03-21-_1xftjek.png)


## 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>
```