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

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

The question should be specific, self-contained, and written in natural language.
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.