blog-tutorial-post-template

Tutorials

Setup

Add the stack to the stacks page editor.

Switch to preview mode to begin editing the page colors.

The color eyedropper tool is only available in the Chrome browser. To get access to it you must right click (CTRL + click) the page in the RapidWeaver window and select Preview Page With… > Google Chrome.

The color panel can be found in the bottom right corner of the previewed page. It contains color swatches for each of the colors used on the page. There are also text color swatches that separately control the color of the text. Hovering any of the color swatches will highlight the corresponding elements on the page.

To change one the colors, click on a color swatch to open a color setting panel. The slider at the top of the settings panel adjusts the hue. The next two sliders adjust the saturation and lightness of the color. You can also add your own color value into the color input field found below the sliders. The color input field accepts hex color values.

As you edit the saturation and lightness, a reset button will appear next to the color input field. Clicking this button will reset the saturation and lightness back to their original values.

If you are previewing the page in Chrome, there will also be a color eyedropper tool that you can use to quickly select a color from anything on your screen.

At the bottom of the color panel are two buttons. The first “Light/Dark” button will instantly invert all of the color lightness values, essentially allowing you to convert the entire page into a light or dark mode. After using this button, colors can then be fined tuned by using the color setting panels.

Use the second “Copy CSS” button to automatically copy the generated CSS to your clipboard. This CSS can then be pasted into the Page Inspector > HTML Code > CSS section of the stacks page to apply all of the color edits to the page. You can alternatively copy the hex color values from the color input fields if you would like to apply the colors manually through the stacks editor.

The Recolor stack does not appear on live published pages and will not save any edits you have made. If you do not copy the CSS to the Page Inspector, the color edits you have made will be undone when the preview page is closed or refreshed.

General Settings

CSS Output

By default, using the “Copy CSS” button will generate CSS code that will apply under any condition. You can optionally select a condition for the CSS code. “Dark mode browsers only” will output CSS that only applies to page visitors who have dark mode enabled through their device or browser. “Light mode browsers only” will output CSS that only applies to page visitors who do not have a dark mode enabled through their device or browser. “Specific browser widths only” will output CSS that only applies to a defined responsive width range.

Group text & background colors

By default, color swatches and text color swatches are added to the color panel separately. If you do not need to edit text colors separate from other colors, enable this setting to group them together.

Group grays

By default, gray colors will appear as separate color swatches. You can enable this setting to group all of the gray colors into one color swatch with one hue slider. This is useful if you intend to add saturation and change the hue collectively.

Group hues

By default, each color found on the page will be added as a color swatch to the color panel. If there are slight inconsistencies in the colors used on the page it can result in a color panel with too many color swatches which can make it hard to edit. Enable this setting to allow the Recolor stack to automatically determine which colors are related. It will group similar colors under a single color swatch.

Hue Sensitivity

With the Group hues setting enabled, you can change how sensitive the color grouping is by degrees. Higher values will result in fewer color swatches. Color swatches can contain multiple shades of the same hue each with their own saturation and lightness sliders. The hue slider at the top of the color setting panel will apply to all the shades in a group.

Shade Sensitivity

If there are slight inconsistencies among shades it can result in color swatch groups containing too many shades. Use this setting to allow the Recolor stack to automatically determine with shades are actually supposed to be the same color. Change how sensitive the shade merging is by percent with higher values resulting in few shades per hue group.

Advanced Settings

Define custom target element

If you are only trying to edit a specific stack on the page and not the colors of the entire page, you can enable this setting to define a custom class name that can be applied to that specific stack you wish to edit.

Alternatively, you can add the predefined class “recolor-ignore” to any stack for that stack (and its children) to be ignored by the Recolor stack.

Target Class

Define a custom class that can be added to a stack. Any stack or element with this class will be detected by the Recolor stack for color editing.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software