The Styles Editor panel, initially docked to the right of the screen, is where you set the values for styles you want to change, or where you create new styles. Whenever you set a style value, a new style will automatically be created if there is not one already there.

The Styles Editor panel.

This panel is common to all 3 options (Add / Edit Styles, Add Keyframe Animation and Add Transition). The panel shows all the styles that you can edit, and will be populated with the values that are already applied to the selected page element. This can vary a little from browser to browser, some browsers fill out more style information than others. Initially, all the styles are greyed-out, indicating that you have not set any. Once you set a style, its title will be highlighted.

Each style has a ‘down arrow’ on the left of the title. Click this (or anywhere on the style name) to expand the style and show all the available values that can be set.

Setting style values.

Each style has a set of values, like color or size. To set any value, just click the value’s box and enter or select the new value. Once a value is set, the style will be visible. If values have multiple boxes, you will need to set all of them, so the Border style must have the border width, line-style and color set before the style will be visible.

Deleting style values

Once you set a value, you will then see a trash can icon on the left of the value – click this to clear that value from the styles editor and re-set it to whatever it was to start with.

Sub-styles

Some styles have properties for each side, like left, top, right and bottom. These are initially set to the same value, but you can set each one individually. Where a style has sub-styles, you will see a ‘+’ symbol underneath the style, and if you click that you will expand the sub-styles panel.

Units

Some styles have units, and all units are ‘px’, or pixels, initially. This is because browsers return units in pixels, so any styles that are already set will have ‘px’ as the unit regardless of what units are actually used. Pixel units are the same regardless of browser, but some units can be set by the browser depending on screen size, resolution etc., and may be more suitable, especially for font sizes. Available units are:

• px – pixels. The ‘go to’ unit of styling. One px generally equals one screen pixel, although it is not actually a one-to-one relationship between px and physical device pixels (it is actually an angular measurement). So the actual number of physical device pixels per px unit can vary across devices. Not a good choice for fonts, as they need to be scaled by the device to ensure they are always readable.

Relative units, where the device will decide what the final size will be:

• em – if used for fonts they then the device can set the text size to be readable. Em’s are inherited so nested elements will inherit their parent’s scale, i.e. the next em value will be applied relative to that of it’s parent.

• rem – while em is relative to the font size of it’s parent element, rem is relative to the HTML (root) font size, if that is set. So this is still a relative unit, but it is more controllable for nested elements. However, if necessary you will need to set the root font size externally.

• {8a0c66e64cdaa47c5c0f68f56d92d92242cd5d8b830a95f98752efb2ad526aa1} – percentage of the parent element’s size.

• vw, vx – relative to 1{8a0c66e64cdaa47c5c0f68f56d92d92242cd5d8b830a95f98752efb2ad526aa1} of the browser window width and height respectively.

• vmin, vmax – relative to 1{8a0c66e64cdaa47c5c0f68f56d92d92242cd5d8b830a95f98752efb2ad526aa1} of the browser window’s smaller and larger dimension respectively

Absolute units, which are more useful for printed media:

• pt – points (1 pt = 1/96 of an inch) (absolute unit)

• pc – picas (1 pc = 12 pt) (absolute unit)

• in, cm, mm – inches, centimeters, millimeters

Older units which are not often used:

• ex – relative to the height of the lower case ‘x’ of the current font

• ch – relative to the width of the ‘0’.

Colors

When you click a color box, you will open the color picker.

To set a color, first click in the Color palette area. You can also start with a preset. Then adjust Brightness, but most important – make sure the Opacity is not zero, or you won’t see the color at all!

You can also enter a numerical value as a hex number, rgb or rgba. If the opacity is 100, the numerical value will appear as a hex number, otherwise it will be rgba. See later for an explanation of color values.

Gradients

These merit an extra explanation, as they have position and color values. You need to set both the position (left and top) and color values before the gradient will be visible. If it is a repeating gradient, when both colors are set, you then have the option to add more colors, up to a maximum of 10.

3D transforms

3D transforms have a Z-axis, i.e. they go off into the distance. How this is displayed depends on both the type of the page element, and the type of it’s parent element. You may not have much control over this, so don’t be surprised if the perspective appears different to what you might expect. Some elements (inline ones) will only take an orthogonal appearance, so will always appear 2-dimensional in the final representation. Some browsers don’t handle 3D properly, or at all, so always test the live site on different browsers when using 3D transforms.

The Styles Editor panel menu

Click the menu button on the Style Editor panel to open the styles menu. The menu offers the following options:

Show / hide unused styles

Any styles that you do not set are normally shown greyed-out. To hide them in the Styles Editor, click this option. To show them again, click it again.

Show / hide markers

Toggles the visibility of the markers, which is useful especially if you have a lot of markers on a single page.

Dock Panel

This returns the Style Editor panel to its default position and docks it to the right edge of the screen.

Close editor

Self-explanatory, really.

Live / Development mode

This opens a dialog to toggle between Live and Development mode. In Live mode, all the changes you make are immediately visible to anyone browsing the site. In Development mode, only you can see the changes. It is advisable to turn Development mode on before you make changes, and remember to turn Live mode on before you exit. If you want to edit the site live, open a second browser and view or refresh the page in that to see the live changes.

View CSS

Opens the CSS dialog, which shows the CSS for the styles (or animations) you have created, on the currently selected page element. You can copy and paste this into your own style sheets if required. If you look at the styles which the plugin creates in it’s own style sheet (uploads/style-and-animate/css/generated-styles.css) you will see that most of the styles are marked as !important to ensure that, where possible, they override any existing styles. This additional rule is not included in the CSS dialog.

Show extents

Briefly shows the outline of the selected page element

This page only / across site

This opens a dialog with 3 options:

• Apply to this element on this page only: this sets the styles / animation on the currently selected page element only

• Apply to identical elements on all pages: where there are matching elements on other pages, i.e. elements with the same class, ID, or exactly the same position in the DOM, the styles / animation will be applied to those elements as well. This implies a maximum of one styled / animated element per page. You might use this to change a banner style, so it will show up on all pages.

• Apply to all similar elements everywhere: any similar page element will get styled or animated, so you can, for example, change all the <p> styles across the entire site.

Rename

Sets the name for the style or animation, which you can see in the admin page

Show admin page

Duh…

Delete these styles

This will clear the styles / animation from the selected page element, and remove the marker. You can also do this from the admin page.

And that’s all you need to know to create or edit styles. A complete description of what each style does can be found here.

Exiting the editor

When you are done editing, click the close button on the editor panel, or click the marker. Any style changes are automatically saved out as you make them. If the panel is not in a convenient position, click anywhere in the title bar to drag it.

Using classes and ID’s in the page

Elements are primarily identified by an ID or class, if it is set. ID’s should be unique to each page, never duplicated (HTML 4.01 spec, although HTML 5 is open to other interpretation – unique in home subtree only – ) and this is best practice. Duplicate ID’s won’t affect anything but to get the cleanest CSS, set a unique ID (or class) on each element to be styled. If a unique ID or class cannot be found, the DOM hierarchy for the element is used, which is not as tidy. Lots of ‘DIV:nth-child(2)’ and such like. Browser plugins can cause additional elements to be added to the top of the document, so the top level element’s nth-child position in the hierarchy is ignored when getting an element identifier (it might be nth-child(2) on one browser and nth-child(4) on another). This situation would otherwise invalidate the saved element hierarchy and the element won’t get it’s animations or styles applied. If a unique element hierarchy cannot be found, the element cannot have styles applied.