> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/classic-manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/classic-manual/user-manual/features/site-badge.md).

# Site Badge

Adding a site badge is a new feature in RapidWeaver Classic, it allows you to display a badge in the corner of your website. This feature is great to show your support for a cause or draw attention to a sale or product. While the feature may seem limited at first, the scope of things you can use it for is huge.

By Default, RapidWeaver will show a "Built with RapidWeaver" badge on all new projects. If your copy of RapidWeaver is registered you can turn it off or change the way it looks in the "Settings" area under "General".

Some of the basic settings are built into RapidWeaver, making it easy to customise:

* Icon (e.g. rapidweaver-icon.png)
* Title (e.g. Made With RapidWeaver)
* URL (e.g. <https://www.realmacsoftware.com/rapidweaver>)
* Position (i.e. you can pick a corner)
* Animation (i.e. how the badge appears)
* Delay (i.e. when the badge appears, either time or scroll distance-based)

The badge support light and dark mode and will switch background and text colour depending on the system settings.

However, you can go further by customising the way it looks with a little bit of CSS.

### Badge CSS Options

The Badge supports the following CSS properties. They are listed out below along with some examples of customization.

```
--rw-badge-dark-background
--rw-badge-dark-color

--rw-badge-background
--rw-badge-color

--rw-badge-position-offset
--rw-badge-transition-duration
--rw-badge-font-family
--rw-badge-padding
--rw-badge-font-size
--rw-badge-border-radius
--rw-badge-box-shadow
--rw-badge-display
--rw-badge-align-items
--rw-badge-text-transform
--rw-badge-text-dectoration
--rw-badge-gap
--rw-badge-font-weight
--rw-badge-image-width
--rw-badge-image-height
```

### How to customize the badge with CSS

You can customise the look of the badge with CSS, either per page or site-wide by writing code in the CSS Code areas. &#x20;

Use the *rapidweaver-badge* CSS selector to make changes.

```
rapidweaver-badge {

}
```

### Example CSS

To hide the badge on a certain page you can use the following CSS in the page "CSS" area.

```
rapidweaver-badge {
 visibility: hidden;
}
```

The following example, makes the background of the badge red, and the text semi transparent.

```
rapidweaver-badge {
  --rw-badge-background: red;
  --rw-badge-color: rgba(0,0,0,0.5);
}
```

This example displays a larger icon, and puts a linear gradient in the background.

```
rapidweaver-badge {
      --rw-badge-color: white;
      --rw-badge-background: linear-gradient(to right, red, purple);
      --rw-badge-dark-background: linear-gradient(to right, orange, green);
      --rw-badge-padding: 1rem 3rem;
      --rw-badge-font-size: 2rem;
      --rw-badge-image-width: 64px;
      --rw-badge-image-height: 64px;
      --rw-badge-position-offset: 50px;
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/classic-manual/user-manual/features/site-badge.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.