Stylebox

Forgot your password? Reset Password

Documentation

Getting Started

The information on this page pertains to the early access (alpha) release of the Stylebox Chrome extension. These documents will be updated as new features are added and as the extension is developed. If you have any questions please feel free to contact support from the profile page (when signed in).

Pin Extension to the Browser Toolbar

The Stylebox extension icon can be pinned to the Chrome address toolbar for easy access. This icon can be clicked to launch and close the Stylebox editor.

After installing the extension, click the puzzle (extension) icon in the top right corner of the browser toolbar. This will open a dropdown list of all currently installed extensions.

Locate the Stylebox extension and click the pin icon to the right of the title. In the top right corner of the Chrome address toolbar the Stylebox icon will now always be visible.

Opening & Closing the Stylebox Editor

To open the editor simply click the Stylebox icon in the top right corner of the browser toolbar. If the editor is already open, clicking the icon will instead close the editor.

If the icon is not pinned to the toolbar, click the puzzle (extension) icon to open a dropdown list and then click on the Stylebox extension.

Stylebox Editor Overview

Here we will go over the 3 major components to the Stylebox editor. Some of these descriptions include words commonly used to describe CSS syntax, but don't worry if none of it makes sense to you, you do not need to understand CSS syntax to use Stylebox. Stylebox will generate all of the syntax for you as you select elements to edit and use the style panel. We provide this info and useful links in case you ever do want to dive deeper into CSS and use some of the more advanced features of the Stylebox extension.

Rule List

The Rule List is automatically populated as you make edits. Read this description if you would like to know more about how it works.

If you would like to learn about CSS Syntax, check out this tutorial by W3Schools: CSS Syntax

In CSS syntax, a rule consists of a selector and a declaration block. A selector is a path that points to the HTML element to be styled. A declaration block is where all of the style changes to that element are defined.

In the Stylebox editor the rule list will contain a list of selectors. These selectors will be created automatically depending on what elements have been selected and edited/styled. The declaration block contents will also be automatically generated but are not visible in the editor's rule list, they are instead loaded into the Stylebox editor Style Panel. Clicking on an item in the rule list will open the style panel with all of the selected element's style changes allowing further editing. Rule list items can be sorted and deleted.

Lorem Ipsum

Selector Field

The Selector Field is automatically populated as you make edits. Read this description if you would like to know more about how it works.

If you would like to learn about CSS Selectors, check out this tutorial by W3Schools: CSS Selectors

The selector field is provided for advanced control over the selector path. It supports custom typed selector paths to any HTML element. This field is automatically populated when an element is selected from the page. Clicking on a Rule List item will also populate this field with the selected rule's selector path, that path can then be edited/modified to point to another element, multiple elements, or to an element that is in a certain state (hovered, active, or focused).

Style Panel

The style panel is where modifications to the style of any selected element are made. Just about any CSS property can be edited through the provided settings. Each field includes a popup control panel that helps with the adjustment of each property. Every modification made will immediately be applied to the selected element.

Styling Elements

Selecting an Element to Edit

Selecting an element to edit is quite intuitive. As you hover over elements with the mouse cursor they will highlight. The element type is shown above the highlighted border. Clicking on an element will bring up the Style Panel where you can make style changes.

Using the Style Panel

All style edits are made through the Style Panel. The style panel is only visible when an element is selected. It populates with the selected element's property values. For a definition of each of the adjustable properties please refer to the link blow.

CSS Property Reference: W3Schools CSS Properties

All properties with default/inherited values will be shown in grey text.

If a style property is edited by CSS syntax (outside of the Stylebox Editor) its value will be shown in white text. This signifies that the property has been edited from its default value, but not by the Stylebox Editor.

If a style property has been edited through Stylebox, its value will be shown in white text with the property subtitle shown in blue text. This is done to help keep track of all the changes that have been made to the selected element.

The Style Panel includes a few types of inputs to edit the element style properties. Each input type has an additional popup control panel for making easy and intuitive adjustments.

Number Inputs

Number input fields include a slider, increment/decrement buttons, and a button group of commonly used values. You may also type directly into the field to apply a custom value.

Text Inputs

Text input fields are used for any style property that needs a custom string value.

Select Fields

Select fields display a dropdown menu with possible options. Each option has a visual representation and a short description of its applied effect.

Color Pickers

Properties that require a color value will open a color picker popup. The color picker has a few useful tools to help you select and apply colors. As you pick a color the page will update with your selected color. If you decide not to use the selected color you may click the cancel button for the color to revert to its previous color. Clicking apply will save the selected color. Clicking away from the color picker popup will also automatically save and apply the selected color.

Color Comparison

At the top of the Color Picker is a Color Comparison section. Here you can see the currently applied color as compared to any color you have picked. The new selected color will appear on the right of the currently applied color.

Color Picker

In the center of the popup is a color picker. It contains a color spectrum along with a slider to adjust the main color of the spectrum.

Opacity Slider

Below the color picker is an opacity slider. This adjusts the transparency of the color.

Saved Colors

Colors can be saved for use by clicking the "New Selected Color" in the Color Comparison section. Onced clicked the color will appear in the Saved Colors section. These colors can be deleted by selecting them and then clicking the delete icon that appears when hovering the color.

Manual Color Input Field

If you know the HEX or RGB/RGBA color value of a color you would like to use, you may enter it into this field. For HEX values select the "HEXA" color input type and for RGB/RGBA values use the "RGBA" color input type.

If you would like to learn about color values, check out these tutorials by W3Schools: HEX Colors & RGB/RGBA Colors

Reseting Styles

CSS properties that have been adjusted by Stylebox can be reset to their default value (or the value applied by another CSS source) by clicking the reset icon to the right of the fields.

Advanced CSS Properties

This field is intended for more advanced users familiar with CSS syntax.

If you would like to learn about CSS Syntax, check out this tutorial by W3Schools: CSS Syntax

The Style Panel includes an advanced custom CSS field where you can add any CSS property that is not yet included in the panel. This field accepts standard CSS format with each declaration separated by a semicolon.

Example:


color: #FF0000;
text-decoration: none;
line-height: 22px;

Using the Navigator

Some elements may be hard to select if they are nested tightly together. Clicking on any element will open the Navigator which can be used to select these hard to reach elements. If you would like to understand how the Navigator works we need to look at HTML element relationships.

In this example diagram (found at w3schools), you can see that HTML elements have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe these relationships. Every element will have a parent and may or may not have any number of children. Siblings are elements with the same parent.

The Navigator has four clickable arrows with the currently selected element listed at the center. Use the down arrow to navigate to a nested child element and the up arrow to navigate to a parent element. The Left and Right arrows navigate between sibling elements.

Selecting Multiple Elements

In some cases you may want to edit multiple elements together. The Navigator includes a useful "Suggested Paths" tool that examines the currently selected element and automatically generates selector paths that apply to similar matching elements. Each suggestion has a number representing the number of elements the selector path applies to. You can click through each item in the list to see what elements are included in each suggestion.

Editing the Rule List

Creating New Rules

New rules are added to the rule list automatically. This happens anytime changes to an element are made through the style panel. The currently selected element's path will be used as the rule's title.

Clicking on a rule in this list will open the style panel for that element allowing further edits to the styles.

There is also an option to delete the rule to remove any style edits made to that element through Stylebox.

Sorting Rules

The ability to sort the rules is provided for advanced users who have an understanding CSS Specificity Hierarchy.

If you would like to learn about CSS Specificity, check out this tutorial by W3Schools: CSS Specificity

The rules can be sorted by clicking and dragging the rule titles. The CSS generated by the Stylebox editor will be ordered exactly as shown in the rule list.

Adding Breakpoints

To support responsive conditions Stylebox includes a breakpoint feature. Breakpoints can be added to the rule list by clicking the "+ Breakpoint" button in the bottom left of the Stylebox editor. This will open a menu were you can define conditions based on the window/browser width for the styles to apply. When a rule is added to a breakpoint, the rule's styles will only apply if the defined conditions are met.

There are two definable conditions when adding a new breakpoint. To enable one or both of the conditions click the "Define" button under the corresponding condition title. This will show an input field were you can add a pixel width value.

When using the Max Width condition, any rules added to the Breakpoint will only apply if the browser/window width is less than the supplied value. When using the Min Width condition, any rules added to the Breakpoint will only apply if the browser/window width is greater than the supplied value.

After creating a Breakpoint, click and drag in any rules to which you want the conditions to apply.

Condition Examples:

Max Width 700px = Rules added to this Breakpoint will only apply to windows and devices more narrow than a tablet in portrait mode (Mobile phones).

Min Width 700px = Rules added to this Breakpoint will only apply to windows and devices wider than a tablet in portrait mode.

Min Width 700px and Max Width 1100px = Rules added to this Breakpoint will only apply to windows and devices in the range of a tablet in portrait or landscape mode (Roughly).

Editing Backgrounds

Inside of the Style Panel Background section is a special Background Editor button. Clicking this button will launch a full screen background image editor.

When the background editor is opened, it will automatically create a canvas equal in size to the dimensions of the element you were editing with the Stylebox editor. All of the element content will be generated as a layer that sits on top of the canvas to help you design around them.

Note that in this video example the added star shape does not overlap the content of the element. This is because we are only editing the background of the element and not its contents.

The element contents can be hidden from the canvas by opening the View menu and deselecting "Show Content".

Background Editor Overview

Shape Tools

There are currently four tools available for adding shapes to the background editor canvas. They can be found on the left side of the top toolbar. Clicking on any of the tools will add a new shape to the canvas with the exception of the first "Shape" tool. The shape tool will present a dropdown of currently selectable predefined shapes.

Style Settings

When a shape has been added or selected from the canvas the style settings will populate. They can be used to adjust the style of the selected shape.

Bounding Box

When a shape has been added or selected from the canvas a bounding box will appear around it. The bounding box can be used to adjust the size of the shape. There are two layer adjustment buttons above the bounding box to adjust the stacking order or overlap of the added shapes. To the left of the bouncing box is a rotate button that can be used to rotate the shape.

Shape Properties

When a shape has been added or selected from the canvas its properties will be populated in the bottom toolbar. These fields supplemental to the bounding box and are provided for making fine tune or exact adjustments.

Editor Commands

A few action buttons are added to the bottom toolbar. They can be used to undo or redo changes you have made or to delete any selected shape or shapes.

Adding & Editing Shapes

The Background Editor currently supports adding predefined shapes to create background designs with. After adding a shape to the canvas it can be styled and positioned with the settings defined below.

Shape Fill

The fill color defines the color of the shape background. Clicking the on this setting will open the same color picker found in the Stylebox Editor.

The color picker for the background editor includes an eyedrop color picker tool that can be used to select a color from the canvas.

Shape Background Image

There is also a setting for adding an image as the background of the shape. The image will automatically scale to cover the entire shape without causing distortion.

Shape Stroke

The stoke color defines the color of the shape border. Clicking the on this setting will open the same color picker found in the Stylebox Editor.

The thickness of the border can be adjusted with the "Width" setting.

Some shapes support rounding. The rounding slider will adjust the radius of the shape's sharp angles by a percentage.

Shape Shadow

The shadow color defines the color of the shape's drop shadow. Clicking the on this setting will open the same color picker found in the Stylebox Editor.

The "x" input field adjust the horizontal position of the shadow, negative values are supported. The "y" input field adjusts the vertical position of the shadow, negative values are supported. The third shadow input field adjust the overall blur of the shadow.

Shape Effects

Currently there is only one shape effect setting. The blur setting will apply a gaussian blur to the entire shape. Increase this value to increase the amount of blur.

Positioning

To position a shape, simply click and drag it. Multiple shapes can be moved together by clicking on the canvas and drag the mouse to create a selection box. Any shape inside of the selection box will be highlighted.

Shapes can also be positioned using the "x" and "y" input fields in the bottom toolbar.

Resizing

When a shape has been selected a bounding box will appear around the shape. Around the bounding box are square handles. Click and drag the handles to resize the shape. The handles at the corners of the bounding box will adjust both the width and height of the shape proportionally.

Shapes can also be resized using the dimension input fields in the bottom toolbar.

Rotating

When a shape has been selected a bounding box will appear around the shape. To the left of the bounding box is a rotate handle. Click and drag the handle to rotate the shape.

Shapes can also be rotated using the rotate input field in the bottom toolbar.

Adjusting Layer Order

When a shape has been selected a bounding box will appear around the shape. Above the bounding box are two layer buttons. Click the left button to move the selected shape down a layer and the right button to move the selected shape up a layer.

The shape's layer can also be adjusted with the layer input field in the bottom toolbar.

Using the Polygon Tool

Polygon shapes have one additional style setting. Use the sides input field to adjust how may sides the polygon has.

Using the Star Tool

Star shapes have two additional style settings. Use the points input field to adjust how may points the star has. The inner radius slider adjusts the depth of the star's points.

Using the Blob Tool

Blobs are randomly generated shapes. You can click the dice icon button to regenerate the random shape. A complexity slider is provided to adjust how complex the generated blob is.

Saving & Applying Designs

After you have finished designing the background of an element, click the File > Save & Exit menu option to save and close the editor.

A data URL will be automatically generated for your design and will be applied as the element's background image. This means you do not need to upload the image manually as it will instead be rendered directly from the CSS syntax.

If you would like to learn about data URLs, check out this article by CSS Tricks: Data URLs

Exporting Images

In some cases you may not want to apply your background design through a data URL. Data URLs can be long and if your CSS field wraps text it can take up quite a lot of visual space. Other times you may want to optimize the image yourself and upload it to a server. In these cases you will want to use the File > Export as Image menu option. This will download your design as a png image.

After downloading the image, click the File > Save & Exit menu option to save and close the editor.

The downloaded image can now be externally edited/optimized and then uploaded to a server. After uploading the image, add the image path to the Image URL field in the Style Panel. This will remove the data URL applied by the editor.

Keyboard Shortcuts

ESC

Deselects the currently selected shape or shapes

DELETE / BACKSPACE

Deletes the currently selected shape or shapes

ARROW KEYS

When any shape is selected, the arrow keys will navigate to the closest in a given direction

CMD/CTRL + C

Copies the currently selected shape or shapes

CMD/CTRL + V

Pastes a copy of any copied shape or shapes

CMD/CTRL + Z

Undo

CMD/CTRL + SHIFT + Z

Redo

Using the Selector Field

The Selector Field is automatically populated as you select elements. The documentation in this section is intended for more advanced users familiar with CSS syntax.

If you would like to learn about CSS Selectors, check out this tutorial by W3Schools: CSS Selectors

Anytime you click on an element, Stylebox will generate a specific as possible selector path to that element. This way your style edits do not accidentally edit more than one element and so that the styles have more hierarchy over any styles that have been applied elsewhere. The downside to this is the selector path may include unnecessary elements that may only exist on the current page, which will be a problem if you are applying the CSS across multiple pages.

To help with this the Selector Field is supplied. This field allows you to create your own specific selector paths or edit any automatically generated paths to fit your needs.

Creating a Custom Selector Path

To create and select a custom element or elements, simply add the path to the Selector Field. As you type the path the page will be searched for matching elements with the total elements found displayed on the right side of the field.

When you have finished typing the path press the return/enter key to confirm the path and select the matching element or elements.

Editing a Selector Path

Select a path from the rule list that you would like to edit. The Selector Field will populate with a visual representation of the path. Click the edit icon on the left of the field to begin editing the path.

When you have finished editing the path press the return/enter key to confirm the path and select the matching element or elements.

Using Selector Pseudo Classes

When a rule has been added to the rule list, you may select it to get access to a few quick pseudo class buttons. First, select a path from the rule list that you would like to edit.

The Selector Field will populate with a visual representation of the path, with the last element in the path highlighted in blue.

On the right of the field are 3 pseudo class buttons. Clicking any of the buttons will add that pseudo class to the path highlighted in blue. To instead add a pseudo class to inner path element, simply click on that element to highlight it. Now when clicking on the pseudo class buttons the classes will instead be added to that inner path element.

Custom pseudo classes can also be added manually when editing the selector path through the edit button found on the left of the Selector field.

Exporting CSS

Exporting and applying the changes made through the Stylebox editor is quite simple. Just click the Show CSS button in the bottom left corner of the Stylebox editor. The CSS syntax will then be displayed along with a Copy CSS button. Click the button to automatically copy the generated CSS syntax.

Now navigate to or open your web design software of choice. In the provided custom CSS area paste the copied CSS syntax.

Exporting to RapidWeaver

Paste the copied CSS syntax into the Page Inspector > HTML Code > CSS tab if you are applying it to an individual page.

Paste the copied CSS syntax into the Settings > Code > CSS Tab if you are applying it to every page in a project.

About Us

We are web designers & developers who want to create the tools we wish we had. Our goal is to provide useful, intuitive, & convenient software that can help you save time & make better websites. We are dedicated to constantly refining our work so that we can all improve together.

Links

Documentation

Join the newsletter to get notified about important updates & releases.

Join Newsletter