Badger offers a high degree of customisation. For example, all colour pickers support RGBa transparency, dimensions can be specified in whatever units of measurement you prefer working with, and aspects like rotation and positioning of container or screen badges can be precisely controlled using number boxes. Gone are the days of tediously editing graphics in Photoshop, the complexities of editing code or the monotony of having to constantly flip between edit and preview modes each time a point-decimal change is made in the settings! This new Badger stack is all about speeding things up and making the creation of badges and ribbons as easy as possible.

In June 2022, RapidWeaver Classic (RapidWeaver 8.10) introduced support for badges. These settings can be located in the General settings, of the RapidWeaver interface. Currently only the basic labels, icons, links and positioning of this new badge can be changed in RapidWeaver. Therefore the Badger stack has been extended to include several dozen powerful style options. Again these can be applied quickly, without needing to edit themes or use custom code. The Badger stack may make these badges in RapidWeaver all the more useful and attractive to build into your websites.

Badger works with nearly all themes and frameworks in RapidWeaver 8 and RapidWeaver Classic. It's also able to integrate with many other stacks, like using embedded web fonts and triggering links to open inside lightboxes. Version 2 adds a couple of user-requested features, like the ability to hide or show container or screen badges between dates. Plus the option to hide badges after they have been clicked.

Example

An example of Badger, with its default settings applied, can be seen at the top right of this page. Its link was set to https://example.com/. A second example is shown below, with a ribbon applied to a content container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec euismod nunc, id iaculis purus. Quisque faucibus vehicula lacus, nec porttitor libero mattis ac. Aliquam ut ex tellus. Aliquam molestie magna mollis, feugiat mauris vitae, tristique libero. Fusce fringilla blandit eros, id condimentum diam pellentesque ac. Vestibulum vel lectus eleifend, rutrum metus eu, sollicitudin ipsum. Cras cursus, nulla id tempus aliquam, ligula dolor aliquam nunc, vel vehicula libero nibh ut sem. Nulla ipsum nibh, pharetra vitae facilisis sit amet, suscipit ac mi. Nunc varius lacus cursus quam sagittis aliquet. Nam blandit condimentum lacus, non dignissim sapien tristique id. Suspendisse potenti. Integer rhoncus ipsum nec consequat facilisis.

Donec semper nulla ac magna lacinia accumsan. Pellentesque sit amet porttitor dui, quis tincidunt odio. Quisque sit amet purus nibh. Praesent vitae mauris nulla. Nam ornare posuere dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut scelerisque diam risus, non egestas urna interdum non. Nullam porttitor sapien a gravida accumsan. Etiam consequat lobortis nibh at euismod. Donec fringilla porttitor orci, quis bibendum lacus consectetur at.

Pellentesque ac gravida ante. Ut eu mauris efficitur, rutrum leo in, mollis sem. Vivamus gravida faucibus libero, et porta tortor varius et. Fusce porttitor tempus nunc non pretium. Duis mollis lacus id metus fermentum, ac porttitor augue viverra. Suspendisse condimentum diam enim, quis luctus diam tincidunt non. Etiam vitae nunc libero. Ut pellentesque consectetur felis sit amet gravida. Maecenas iaculis lacus at felis vulputate malesuada quis ac metus. Aenean a metus mi. Fusce dictum ligula vel tellus fringilla blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Coming Soon!

Setup

Install Badger in the normal way. Open your Stacks Library and search for 'Badger 2'. Drag and drop a copy of the stack into your page. All Badger settings have informational tooltips, explaining what they do.

Within the Badger Configuration Settings, you'll see a menu containing the four available configuration methods, listed in alphabetical order...

1. Appended Badge
This generates a badge that will be appended to another stack. For reliable results, place the Badger stack below the target stack (the target is the stack you want to append the badge onto). Use the web inspector in RapidWeaver to obtain the class or ID selector name of the target. Enter this selector name into the Append To box. Next you can switch the page into Preview mode, and start to customise the label text, rotation angle, positioning and other styling. Use the X and Y positing settings to precisely place the badge into the desired corner (use both positive and negative positioning) and adjust these settings to show your label content.

A prime example of using appended badges would be to attach a badge onto a Shady stack. In this instance, one would use the web inspector to ascertain that a particular Shady stack on the page has an ID of #shady_stack_shadow_stacks_in_6. This is the ID to enter as the target. Some Javascript code is then used to append this instance of Badger onto our Shady stack. The same technique can often be used for many other stacks. Please note that the target class or ID will have its positioning set to 'relative' and an overflow of 'hidden', which on rare occasions may break some stacks.

2. Container Badge
For this configuration, Badger will create its own box container, into which you can drag and drop simple stacks (like text and images). This may prove to be an easier configuration, compared with using appended badges. However it may afford less options to target the underling content with styling like box shadows. In edit mode, you get a rough approximation of the badge positioning. However it is worth putting the page into preview mode, and then fine-tuning your X and Y positioning settings, to get the badge aligned perfectly.

3. Restyle A RapidWeaver Badge
RapidWeaver Classic (RapidWeaver 8.10) introduced support for its own basic screen badges, in June 2022. These are easily turned on and configured in your website general settings. RapidWeaver badges get shown on every page of the website. If you place a Badger stack on the page and set its configuration to Restyle A RapidWeaver Badge, then you instantly have a lot more colour and style options to customise the badge appearance. Of course, Badger can be configured as a Partial, meaning you can quickly implement these same colour and style modifications over multiple pages of a website. For convenience, there is a checkbox option to make Badger forcefully hide the RapidWeaver badge, on pages where you do not want it shown.

4. Screen Badge
As its name suggests, a screen badge gets appended to the outside corner of the screen. Absolute positioning will allow the badge to scroll up or down with the page content. Fixed positioning keeps the badge always 'stuck' to the screen and it will not scroll. Screen badges typically work best at the top left or top right of the screen. You will need to switch the page into preview mode and view your style changes live. As before, use the X and Y settings to precisely position the badge. Z-index may require increasing, if the badge is being layered behind other page elements of equal or higher z-index.

Hiding badges on small screens

By their nature, badges can be quite large and prominent. On small screens (like mobile) it may be desirable to hide them completely. Otherwise badges may consume too much screen space or overlay content to an extent that it cannot be read or interacted with. It's always important to test how things look on smaller screens. If you prefer to hide badges on smaller screens, the Breakpoint setting makes this very easy to do. On screen widths less than the breakpoint (example 568px), the badge will be hidden. It will continue to show on wider screens.

Time sensitive badges

A need sometimes arises to only display badges at a particular date and time. For example, badges that advertise a special promotion or event. Within the Badger Advanced settings, you can use the provided settings to hide or show a badge between date ranges. For badges you create using Badger, some PHP code is used to regulate if the badge is shown (so it is impossible for the end user to view a badge, when it is set to be hidden). For badges you create using RapidWeaver Classic, the badge will be shown or hidden using Javascript, meaning it may still be possible for a user to view the badge content in the page source code. Some users have asked for the option to disable the RapidWeaver Classic badge on particular pages; so to facilitate this you can go into the time controls and set the display mode to 'never'. Time sensitive badges require the page extension being changed to .php in the RapidWeaver Page Inspector.

Dismissible badges

The way this works is to listen for a user clicking on the badge, using Javascript. The badge will then get dismissed using CSS 'visibility:hidden'. You can configure this to use either localStorage() or sessionStorage(), depending on how long you want the badge kept hidden for. This is a good method of advertising something to the website user, like updated terms or a privacy policy. The name and value of the storage container can be set to almost anything you like, to help you identify which badge got clicked. Stacks like MiniCookie are able to create buttons that can read the key / value pairs and offer options for people to reset the badge to its normal visibility. MiniCookie is not included with Badger. To aid the testing of dismissible badges in RapidWeaver, local storage and session storage can be viewed and deleted from the web inspector 'storage' tab. Note; if the badge is set to fade-in or fade-out, this animation effect will override the desire to dismiss badges.