Classic Manual
  • Welcome to RapidWeaver
  • Purchasing RapidWeaver
  • Licensing and Activation
  • Subscription FAQ
  • General FAQ
  • 📖User Manual
    • Installing and Activating RapidWeaver
    • Getting Started with RapidWeaver
    • Project Window
    • Preferences
    • Page Types
      • Blog
      • Contact Form
      • File Sharing
      • HTML
      • iFrame
      • Markdown
      • Offsite Page
      • Photo Album
      • Sitemap
      • Styled Text
    • Publishing
      • Publish to a Web Server
      • Publishing to Your Mac
      • Publishing to Chillidog
      • Multiple Publishing Destinations
      • How to fix Publishing Issues
        • Upload Logs
        • Upload Errors
    • Features
      • Health Check
      • Live Browser Preview
      • Privacy
      • Project Backup
      • Macros (Advanced)
      • Resource Browser
      • Simulator
      • Site Badge
      • Themes
    • Keyboard Shortcuts
    • How to
      • Update License Key in RWC
      • Share Your Project File
      • Upgrade Projects
      • Add Google Analytics
      • Improve Search with SEO
      • Embed a YouTube Video
      • Embed a Vimeo Video
      • Edit an .htaccess File
      • Build an Online Store
      • Edit Your Website Online (CMS)
      • Create a Members Area Using Sitelok
    • Troubleshooting
      • How to fix "Couldn't obtain plugin principle class"
      • How to Diagnose an Issue
      • How to Report a Bug
      • How to Locate Your Addons and Preferences
      • How to Send or Share Your Project (moved)
    • Resources
  • 🧩Addons
    • What are Addons?
    • Premium Themes
      • 🗻Aspen
        • Aspen FAQ
        • Social Icons
        • Aspen Version History
      • 🦸Marvel
        • Marvel FAQ
        • Social Icons
        • Marvel Version History
      • 👑Royale
        • Royale FAQ
        • Social Icons
        • Royale Version History
  • 👷Developers
    • Addon Overview
    • Themes
      • Theme Introduction
      • Theme Syntax Tags
      • Theme.plist Syntax
      • Theme Info.plist
    • Plugins
      • Plugin SDK
    • Marketplace Developer Guide
  • 📁Legal
    • Acknowledgements
    • Subscription Terms of Service
    • Privacy Policy
    • EULA
Powered by GitBook
On this page
  • Badge CSS Options
  • How to customize the badge with CSS
  • Example CSS

Was this helpful?

Export as PDF
  1. User Manual
  2. Features

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

Last updated 2 years ago

Was this helpful?

📖