SetOpacity Stack

SetOpacity Stack

set opacity to solid color backgrounds of theme items

Although RapidWeaver 7 was a great upgrade, I was really disappointed that it is still not possible to use semi-transparent colors in the theme settings. Opacity is not only a nice touch to the design of your site, it is also imperative when you use page-wide backgrounds (like with my BackgroundImageRotator Stack, Simple Background Image 2 Stack, Simple Background Gradient Stack and Simple Background Repeat Stack).

This stack is an attempt to make this possible. Although it is not perfect, it’s easy to use and works most of the time.

Demo
Please visit the demo pages to see this stack in action.

Usage

There are two ways to select an item and change its color:
  • by using its background color as set by the theme (fig. 1)
  • by using the selector(s) – although I guess that when you know the selectors, you might as well write all the CSS involved :) (fig. 2)

When using the background color as the selector, just set the color as used in the theme settings, and the desired semi-transparent color. The stack will change every element on the page with that background color. If that is not what you want, set a unique background color for the target element in the theme.

Optionally, you can use a note (e.g. which element is targeted with the stack) that only shows in Edit mode. This is especially handy when you have several instances of the stack on your page. Next to the note, an indication of the color is shown (fig. 3).

Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
  • With Javascript turned off, this stack will not work.
  • This stack only works on background colors only; not on borders, images, etc.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
SetOpacity Stack with note
fig. 3: a note and an indication of the color in Edit mode
SetOpacity Stack HUD 1
fig. 1: select an item by using its background color as set by the theme


SetOpacity Stack HUD 2
fig. 2: select an item by using its selector
© 2012-2017 Marathia Web Design | Contact