I got a question for you and maybe you can help me. I got a project for websites which can have different color layouts. So i created the site using the widget style manager to influence multiple backgrounds, typos, buttons and so on by changing the settings in the widget style manager. However… since the websites have around 20 different color sets I want to change them with one button click to rotate through all colorthemes while presenting the website to the customer.
Is there a way to get over the ‘Click or Tap’ event and change values in the Widget Style Manager?
The styles defined in the style manager are intended for applying manually during page editing. Unfortunately, they cannot be applied dynamically (by user action or programmatically in the browser.) So, no magic trick (I know of, or have seen in many years on this forum) to simply change the style of a widget from StyleA to StyleB to StyleC, etc. in the protype (with the exception of using Interaction Styles, but that is limited to 2 or 3 styles only (Normal, Selected, Disabled; and in RP10, Error.) With 20 themes, you’re in for a fair bit of work in Axure, but it is doable. Depending on your needs, it will be either a lot of work or a LOT of work. Either way, you’re going to need to style all your widgets beforehand. I’ve had to do things like this in the past and can share some tips and tricks to suit your needs. It would be best if you could post a sample .rp file or some sketches even, to demonstrate or describe your setup and what details you need.
Not quite sure what you mean by this… but–in the editor–you can change styles in the Style Manager, or Style pane directly, by referring to the named style. Typing the first few chars in the Search bar helps find styles easier.
This just isn’t one of Axure’s strong points, though. Other prototype tools, like Figma, have plugins that support swapping color and style themes much easier. Using HTML+CSS is better suited for this, too. If you can make or get CSS sheets for your style themes, you can apply these as a plugin to an Axure prototype published on Axure Cloud. More on this below…
There are some ways to make switching styles/themes easier in Axure. This post describes some approaches. For your need of 20 different styles, look at the second method that uses dynamic panel states…
If your prototype is for something like a style guide or spec, and just need to show all website elements on a page, then you’re probably just as well off to create one page that looks and works correctly, then duplicate it 20 times and apply your different styles on each page. If you want to show your theme change more immediately (instead of after a page load where everything goes blank then loads) you can have one page with all your content in a dynamic panel, and one panel state per style. You can use a button, a droplist, and/or keyboard shortcut to change panel states and see the different style immediately or after a nice animated transition (using the options in the Set Panel State action.
If you have multiple instances of widgets, like several buttons on a page, or across different pages, you can save some time and effort by creating Master widget(s) with your built-in styles, one per state, so 20 states per widget/dynamic panel. Then you can change style by setting the dynamic panel to that style’s state, or cycle through them by setting it to “Next, wrap”.
Here are some potential resources if you can use Axure Cloud and know CSS or can get help from a developer on this. If you can’t use Axure Cloud, it is also possible to inject the CSS and/or Javascript code directly into a prototype. It works, but it is not supported by Axure, so you’re on your own with that (although forum users can help.) Search the forum for “injection” to see some ways to do this.
Here is the RP9 reference for using CSS and Javascript plugins on Axure Cloud:
Here is the RP9 reference for extracting CSS properties, which can help you get the CSS needed for the styles you’ve already defined in the Style Manager:
I haven’t tried this out yet, but this could be a way to use CSS styles easier in Axure.
Thank you for your awesome reply. Indeed i will try to solve it as good as possible with dynamic panels i guess. I unfortunately can´t use the selected, disabled, error-states because I need all states.
Maybe I just need to do one final version and just create the landing page in the adequate design to save time.
@Axure Team: Would be awesome to create Widget Style Groups in the Widget Style Manager which can be triggered by an action. So you can maybe play with alternative styles or you can make your customer choose which fits him best since the UI design is more a subjective problem.
On top it would be awesome if you can export a styleguide with the Widget Style Manager!
