Template skin in axure

#1

Is it possible to create skins using axure? So, if I create an icon to trigger applying 2,3 different themes, can I do that? For example if I select blue it will apply a predefined blue theme across the application and if i select purple it would chagne the blue skin to a predenined purple theme, something that can be achieved using CSS.

Thanks,
Kenath

#2

The short answer, unfortunately, is, “No.”

The HTML structure Axure generates isn’t very CSS friendly. There’s not really a way to assign your own classes to specific things and it uses a lot of nested elements and inline styling to represent a single widget. (Heck, the text on a basic “Button” widget is nested 5 levels deep!)

The “easiest” way I can think of to simulate changing themes in your prototype is to use multiple projects:

  1. Create a project and build the prototype using the “Widget Style Editor” to assign styles to everything you want the theme to affect.
  2. Make a copy of that project and then go into it and change the global styles you used to match the new theme you want.
  3. Publish both projects and make note of their URLs.
  4. Go back into each prototype and add a button. Set the behavior to “Open link to external URL”
  5. Paste in the URL of the generated project.
  6. Publish both projects again to the same locations as before.

Clicking the button should take you back and forth from the two different websites and it would look like you were changing themes.

If you’re a JavaScript guru, you can try using a script to inject the changes but finding the correct elements to change would be very difficult.