Site Badge

Add a customisable badge to the corner of your website

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.

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;
}