How To Change Branding With Reify Skin Editor

Reify Skin Editor

It’s easy to build and design sophisticated applications in Reify.
Branding them just got a whole lot easier with the online Skin Editor!

With the online Skin Editor, you can leverage the ability to cascade your changes to colors, font and borders to make wholesale adjustments with a simple click of a button.

You can see these changes instantly in both the editor and in Reify so you can quickly know how different settings will look together.

Reify skin editor

In this blog post, we take a deeper look at how our Skin Editor works and how you can leverage it to rapidly produce eye-catching skins in a fraction of the time it used to take.

Let’s get started!!

In Reify, access the online Skin Editor directly by selecting
Project-> Skin-> Open Skin Editor

reifyskineditor
Click to enlarge

NOTE: You can go to skin editor directly by visiting https://create.reify.com/themes (you will still have to have to log in to an enabled Reify account to access the online editor, even if you navigate there directly).

Create a New Theme

Pick an existing theme that is as close to the desired look and feel that you need, choose a name, and click Create. The theme will now be created for you automatically, ready for edit and the Skin Editor screen will be presented.

createskin
Click to enlarge

The Skin Editor management screen is split into 2 main areas:

skineditorscreen1 1200x588 1
Click to enlarge
  • Component Tree: A cascading list of color schemes, fonts, border and padding settings that affect every component in the skin. This includes interactive behavior colors such as rollover, button up, down, focus and many more.
  • Preview Panel: A current and immediately updated view of how your changes to values in the Component Tree have affected the color schemes, borders, padding or fonts in the widgets and components on display.

Using the Component Tree

Open up the individual nodes to see all of the different elements that you can control.

component tree

Filter the list so you can see just the elements you are interested in.

Filter the list

Use the built-in color picker to select a new color.

colorpicker
Click to enlarge

If you already know the color you want, simply click on the relevant component element, set your color ID and press enter to see your change immediately take effect.

Change color

If you don’t like the color, just revert the change – simple!!

cancelchange 1

Change border width or radius to get the desired look and feel you need. Borders and padding can be set at every component level for highly specific fine-tuning.

Change border
  • Change the font you use or it’s size. Header and body text can be manipulated in this way for all components.
Change border

Change the font you use or it’s size. Header and body text can be manipulated in this way for all components.

Change font

Remember, all changes cascade down to any child elements associated with this component level, making development of your new skin fast, slick and easy.

Preview Panel

Change view

The Preview Panel is where your changes come to life. Change the selection of widgets you want to see so that you can individually model and control their color schemes, borders and fonts.

Save your changes as you go so you can return to your skin at any time to continue your work, without losing anything you’ve already done.

saveskin 2

Once you’ve finished designing your new skin, or even if you just want to see “how it looks” in your Reify application, simply select it as a custom skin and see the changes instantly get applied.

Change skin

Get a demo of Reify platform

Experience a live demonstration of Reify platform customized to your specific needs!

Similar Posts