Quality stacks to empower your creativity
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.
This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.
You may not resell or make this stack available for download, remove copyright credits or license information.
The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.
All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).
You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.
If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Badges can be customised to match your existing RapidWeaver theme or corporate colour scheme. Once you've created a new badge design, you can copy-and-paste your Badger stack into other Stack pages or embed it into non-Stack pages using the PlusKit plugin (not included) @import function. Google-embedded font faces enhance badges even further. This stack merges in the functionality from a couple of other popular Stacks, like the Sticky stack and FontStack.
The Badger stack may look a bit daunting at first glance and the choice of customisable options may appear bewildering. This stack has over 80 settings! However the settings have been sorted and split-down into different categories to make things a bit easier. Some settings are only displayed when others have been enabled. Each setting is also tool-tipped, so you get information about particular settings when you roll your mouse over them. There are also some details below about what each group of settings does. If you don't change any settings and preview your page straight away, you'll see a nice basic blue badge displayed at the top right, using the default styles. So you can use this as the foundation to start customising the Badger stack, using the provided settings.
ExampleYou can see an example of the Badger stack shown in the top-right of this webpage. In this instance, the badge has also been set as a link with fixed positioning applied. Negative X positioning has been used to drag the badge off the corner of the page and hide its corners. Greater padding and 30 degree rotation was applied to create this ribbon effect. The colour scheme has also been changed to a red-orange radial gradient. A screenshot of the applied settings is shown on the right.
SetupBadger Basic Settings
A link can be applied to the stack, which will open a URL if the badge is clicked or tapped. Toggle consolidation and / or these instructions on and off in the basic settings. Because this stack uses cutting-edge CSS technologies, some of the effects like gradients, shadows, rounded corners and rotation do not work in IE7 or IE8; therefore the option is provided for you to completely hide the stack in these older web browsers. The 'Edit Padding' setting allows you to increase the amount of padding around the stack exclusively in Stacks edit mode, which can be useful for editing larger badges or badges that have steeper rotation applied.
Badger Placement Settings
Control where the Badger stack is located in your page using these settings. Make your choice from the placement menu. To append Badger stack onto a division, type
<div id='badgerStack'></div>somewhere in your page (like the site title, an ExtraContent container or a sidebar). The 'badgerStack' ID then becomes the anchor point, and you can move the badge around using the absolute positioning controls. The other options to append the Badger stack relate to placement on the screen. Use the number input boxes to apply spacing around the badge, or negative values to pull it off the edge of a container. A word of warning if you are trying to position a Badger stack within other stacks (like an ExtraContent stack); the Stacks plugin applies
overflow:hiddenon all stack elements, so this may give the illusion of your Badger stack getting cropped, rather than hanging off the edge of a container.
Badger Sizing Settings
This group of settings deals with the physical width and height of your Badger stack. Padding and margins can be applied if required. The breakpoint setting is used to hide the Badger stack on screen widths below the figure you enter in the box.
Badger Border Settings
As the name implies, these settings adjust the border radius (rounded corners) applied on your Badger stack. The badger stack can have up to 3 different solid borders rendered around it, and here you can customise the thickness and colour of each border. If no borders are required, simply set the thickness setting to 0px. Borders may not be required if you plan to use your own graphics as the badge background.
Badger Box Shadow
These settings apply a CSS3 / RGBa box shadow around the badge. RGBa box shadows are only supported in newer web browsers, and will be ignored in older browsers (like IE7 - IE9). If you are not sure what RGBa Box Shadows are or you want to see some examples, search online. If no shadow effect is required on your Badger stack, simply set all the values to 0 to nullify the box shadow.
Badger Special Effects
Badger provides the option to have the badge fade-into view when the page has finished loading. You can specify the delay before the transition starts and the the length of the transition itself. CSS transitions take effect on aspects like borders, text and backgrounds (except gradients) when you rollover a Badger stack with your mouse. Browser developers are still in the process of adding support for CSS transitional effects on CSS gradients, as of writing this.
Badger Font Style Settings
This stack uses embedded font faces from Google Web Fonts. Setup of embedded web fonts is identical to the free Font Stack (available to download from the Stacks4Stacks website). So if you're not sure how to use the embedded fonts, be sure to try the Font Stack first and read the instructions provided. In the Badger stack, you can customise several aspects of the font styling.
Badger Background Settings
The final group of settings allow you to customise that background of the Badger stack. Choose a solid (flat) colour or one of the gradient designs. Alternatively use an image stored on your computer or an image stored in an online warehouse. The colour settings are provided in pairs; covering both static and hovered buttons. CSS gradients are not supported in older web browsers, and degrade back to the first colour. When using image backgrounds (especially PNG images) it may be necessary to disable rounded corners and borders. Images are rendered as CSS backgrounds.
Practice makes perfectBadger is not an average stack where you just drop a stack into a page get an instant result. Badger is instead targeted more towards RapidWeaver users who need a feature-rich and highly customisable stack for building badges with. Basic knowledge of CSS would certainly be advantageous, because Badger shares much of the same terminology in the settings. You may have to spend some time customising the settings in Badger and keep previewing the result, before getting the required effect. It is very much a stack geared towards creative users with the patience to practice and really play around with the stack, to get the full potential.
Appending badges onto other page elementsBy default, Badger creates a badge that can is either fixed or absolutely positioned to the edge of a page. Placing the badge in other regions like a banner or header may also be feasible. To do this, switch the Placement option to Append to #badgerStack. Then where you want the badge shown type the following HTML code:
The code for your badge will then be inserted at this exact point of the page. Use the existing X and Y positioning settings, to rotate and reposition the badge around this point. It is vitally important that the point at which Badger is inserted does not have auto or hidden overflows applied, otherwise your badge will be cropped, scrolled or hidden from view. This means that you cannot use this method to embed a badge into another stack or a part of the page where overflowing content is regulated.
Browser and theme compatibilityBadger works pretty much flawlessly with all modern web browsers, including newer iOS and Android devices. A breakpoint setting allows you to easily remove Badger from the page on smaller screens, where screen space is at a premium (the default breakpoint is set to 580px). As you would expect, CSS2 / CSS3 cosmetic embellishments like rounded corners, gradient fills, animations and rotations are not supported in older web browsers like IE7 or IE8. Badger can be set to hide on these older web browsers, using a tick option in the stack settings. We try to ensure any non-supported features will degrade gracefully. If you wanted to, you could use the free Conditionals stack to display a more simplified badge in older versions of Internet Explorer.
Compatibility is assured with most RapidWeaver themes. However there always will be some themes out there where Badger does not work or is less suited. Typically if you find that your created badges are layering under other elements in the page, you can try increasing the z-index value (layering index) in the stack settings.