WIDGET AND PAGE STYLES

OVERVIEW

Widget styles and page styles are reusable, centrally managed sets of style properties. Style properties available for inclusion in widget styles include fill color and shadowing; border line color, pattern, and thickness; and text attributes like font, color, alignment, line spacing, and padding. (Certain other properties of widgets, like shape position and rotation for example, are not available as part of widget styles.) Page style properties in Axure RP comprise page alignment, background color and image, and sketch effects.

THE DEFAULT STYLE

All pages start in the Default page style. This means that you can edit the Default style to make file-wide changes—to center-align your entire file, for example. If you need several style sets for different kinds of pages in your file, create additional page styles. A page style you create will inherit styling from the Default style except for properties explicitly set in your new page style.

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

WIDGET STYLES IN THE DEFAULT WIDGET LIBRARY

Widgets also have a Default style from which other widget styles inherit, but new widgets do not start in the Default style. Instead, each widget in the Default library starts out using a widget style unique to that widget type. For example, all Box 1 widgets are in the "Box 1" style. Changes to the "Box 1" style will affect all widgets that have that widget style applied, including subsequent Box 1 widgets that you add from the library.


Styles applied to a widget in a widget library are added to your RP file the first time you drag that widget onto the canvas. (There are a few styles that you'll see in all new RP files: "Heading 1"-"Heading 6" and "Paragraph". These styles are useful when pasting text onto the canvas.)

APPLYING STYLES

To apply a widget or page style, use the Widget Style or Page Style dropdown in the Inspector's Style tab. (To see the page Inspector when a widget is selected on the canvas, you can either click an empty spot on the canvas to deselect the widget or your can click the page icon at the far right of the Inspector's title bar.)

UPDATING AND CREATING STYLES

QUICK UPDATE

To quickly update a style, edit the styling of a widget or page currently using the style. In the Inspector's Style tab, click "Update" to the right of the style name to update the style. The update will apply to all widgets or pages in the project currently in that style which have not already overridden the same style property. It will also apply to any future widgets or pages in that style.

QUICK CREATE

To quickly create a new style, first edit the styling of a widget or page in the file. In the Style tab of the Inspector, Click "Create" to the right of the style name. The Widget Style Manager or Page Style Manager dialog will open with your restyled widget's or page's styling changes already added to a new style. In the left column of the Style Manager, rename the new style. In the right column, you can optionally make additional changes to the new style. Click the OK button to close the dialog and save the new style.

THE STYLE MANAGER

Click the "Manage Styles" icon, to the right of the Style dropdown in the Style tab, to open the Widget or Page Style Manager dialog.


Click the green "+" icon at the top of the left column to add a new style. Name the style in the left column. Alternatively, you can use the "duplicate" icon at the top of the left column to make a new style from an existing style.


You can also use the red "x" to delete a style and the blue "up" and "down" arrows to reorganize styles.


To edit the style properties of a style, select a style in the left column. In the right column, check the checkbox next to a style property to have that property override the default style. Customize the property if applicable with the dropdown, button, field, or color picker.


You can edit multiple styles at once. Hold [CTRL] / [CMD] while selecting styles in the Style Editor and then make changes in the right column.

STYLES IN TEAM PROJECTS

Styles in a team project can be edited without checking out the project styles. To update style changes for all users of the project, send changes via the "Team > Send Changes to Team Directory" menu command.

INTERACTION STYLES (WIDGETS)

Widget styles can be applied as interaction styles. To do this from the Interaction Styles dialog, check the first checkbox in the list, labeled "Widget Style", and then choose one of your widget styles from the dropdown.

THE FORMAT PAINTER (WIDGETS)

The Format Painter is used to copy styling from one widget and selectively apply the copied style settings, including interaction styles, to other widgets. It acts like a clipboard for style properties.

 

To copy styling from a widget, select the widget and click on the Painter tool icon in the tools section of the Main Toolbar. This click opens the Format Painter dialog with the widget's styling already copied. If the dialog is already open, select a widget and click Copy in the dialog. You can choose which of the properties you want to apply by checking the checkbox next to each style property.


To apply the copied styling to other widgets, select the target widgets and click Apply.


The Format Painter window is "modeless" as opposed to "modal", which means you can keep it open while you’re simultaneously working on your diagram on the canvas.

SKETCH EFFECTS (PAGES)

Sketch effects are special style properties that give the widgets on the page a hand-drawn, less polished look. Increasing the sketchy appearance can be useful to help indicate the incomplete nature of the page. It can also help to reduce feedback on visual style—if that's not what you're looking for at the moment—and refocus onto architecture, interactions, and functionality. Sketch effects can be especially useful at the beginning of a project.


Sketch effects controls are as follows:

SKETCHINESS

This slider and numerical field are used to move the sketchiness setting from 0 (normal style) to 100. As sketchiness increases, straight lines become increasingly wavy.

COLOR

The image icons toggle color in images and other widgets. Use the color icon on the left for full color and the greyscale icon on the right to switch to greyscale mode.

APPLIED FONT

When a font selection is made in this dropdown, all fonts are overridden with the selected font. This is typically used to switch to a hand drawn-style font like Axure Handwriting. Switch back to the "Applied Font" option to revert to the fonts designated in widget styles.

LINE THICKNESS

These buttons can increase the thickness of lines and borders. The "+0" button keeps lines at their applied thickness, while the "+1" and "+2" buttons increase the thickness of lines by one and two pixels respectively.

PAGE DEFAULT STYLE