Here’s a useful educational demo showing how to recreate a fully flexible version of the new feature “Badge” that is used in RapidWeaver Classic. Below is a screenshot of the Badge built with RW7 and Stacks.
Although the badge is really just several lines of code, it may not be obvious how to build this layout using just stacks without using any code. Source provides all the options you need and there are several ways of creating a much more configurable version of this badge.
E.g. the badge can be hidden below any width on small screen, resized on small screens, made transparent, be positioned anywhere, be adjusted to work with modal windows, using animated attention grabbing background, etc…
In brief the badge layout is constructed by positioning an image alongside some text in a padded and rounded area. That area is then set to be a fixed to the bottom left of the screen.
The layout is created using a Source Coder set to contain stacks, containing an image and a paragraph stack, with the following Classes:
bg-1 m-2 position-fixed pos-bl shad-2 d-inline-flex align-items-center rounded
bg-1
selects the BG colour set in the Utility Stacks bg-1
m-2
selects the a margin of 20px set in the Utility Stacks m-2
position-fixed pos-bl
fixes the badge to the bottom left of the screen
shad-2
Adds selects the shadow 1 set in the Utility Stacks shad-1
d-inline-flex align-items-center
Aligns the contents of the Coder stack to be inline and entered vertically in the badge
rounded
selects the rounded corners set in the Utility Stacks border radius
In addition the Source Utility stacks is added to the top of the page with padding setup for margin 2 to be 10px, bg-1 set to the badge BG colour and Flex enabled.
Both the image and the paragraph have padding added to adjust the look of the badge. I have also adjusted the paragraph text to be 1.3rem and remove the bottom margin.