Customize Design using the Re-styler
Unplugged Controls 3.0 has been rebuilt so that the appearance of the user interface can be easily customized according to a company's branding or preferences.
This customization is done using the online Unplugged Re-styler App, which allows you to set key CSS values to adapt the design. We'll cover a few of the main customization options here, using the built-in themes as examples of how to achieve different appearances. This should give you an idea of what's possible, and how to start customizing the Controls for yourself.
The Restyler site is designed for Designers or Developers have a good knowledge of CSS settings. If this isn't you then a good resource for CSS properties can be found at http://www.w3schools.com/cssref/
Fonts
The Re-styler allows you to choose from a range of fonts, based on what's available in iOS 7. However, the font that will display may depend on the device:
- On iOS devices, the chosen font will display correctly
- On Android devices, the range of system fonts is more limited. The font displayed on these devices is likely to be their default font, Roboto.
- In a desktop browser – e.g. when using the Re-styler app - the chosen font will not display if you don't have it installed on your system. In these cases, Unplugged will fallback to your browser's default sans-serif font.
Colors
Colors and backgrounds are defined as they are in CSS (with the exception of background images), which allows a good degree of flexibility. You can set colors and backgrounds with:
- Hex values, e.g. #464646
- RGBa values, e.g. rgba(255,255,255,0.9)
- CSS Color Names, e.g. white
- Webkit Background Gradients, e.g. -webkit-linear-gradient(#343434, #121212)
- Transparent, i.e. transparent
Body Background
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Body Background | #464646 | #ECECED | #f0eff4 |
| Dark, high-contrast background | Lighter, grey background | Light, bluish grey background |
Navbar Colors
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Navbar Background | -webkit-linear-gradient(#343434, #121212) | white | rgba(255,255,255,0.9) |
| Navbar Title Color | white | #333 | black |
| White text on dark, glossy background | Black text on white background | Black text on slightly transparent white background |
Content Colors
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Table Header Background | #CCC | white | transparent |
| Table Heading Color | #333 | #657893 | #4f4f4f |
| Table Row Title Color | black | black | black |
| Table Row Detail Color | #999 | #999 | #999 |
| Black headings on grey background | Bluish headings on white background | Grey headings on transparent background |
You can also edit the Table Row background color, but we'd recommend you leave it white for the sake of contrast and readability.
Footer/Tab Colors
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Footer Background | -webkit-linear-gradient(#343434, #121212) | white | rgba(255,255,255,0.9) |
| Footer Tab Color | #AAA | #b1bac8 | #999 |
| Selected Footer Tab Color | white | #657893 | #157efb |
| Grey icons & text (white when selected) on dark, glossy background | Blue icons & text (darker blue when selected) on white background | Grey icons & text (bright blue when selected) on slightly transparent white background |
Buttons
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Button Background | #636363 | #959eb2 | transparent |
| Button Box Shadow | inset 0 1px rgba(255, 255, 255, 0.3) | inset 0 1px rgba(255,255,255,0.2) | none |
| Button Border Radius | 6px | 6px | none |
| Button Label Color | white | white | #2087fc |
| Button Label Font Weight | bold | bold | normal |
| Button Label Shadow | 0 1px rgba(0,0,0,0.4) | 0 1px rgba(0,0,0,0.2) | none |
| Chunky, rounded, glossy buttons with high contrast against background | Lighter, less saturated buttons with subtle gloss & shadow | Minimalist buttons with transparent backgrounds and simple, bright labels/icons |
Custom colors can also be set for Positive/Success buttons (e.g. the green Sync button in the bottom left) and Negative/Warning buttons (i.e. the red Close button).
Content Layout
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Content Padding | 10px | 10px | 36px 0 |
| Content Border Radius | 10px | 10px | none |
| Equal padding around content; rounded corners | Equal padding around content; rounded corners | More padding at top; zero padding on the left/right so content sits flush against sides of container |
Menu
Settings
| Dark Theme | Light Theme | iOS 7 Theme | |
|---|---|---|---|
| Menu Padding | 10px | 10px | 36px 0 |
| Menu Border Radius | 10px | 10px | none |
| Menu Item Background | #222 | #657893 | white |
| Menu Item Label Color | white | white | black |
| Menu Item Box Shadow | inset 0 1px rgba(255,255,255,0.1) | inset 0 1px rgba(255,255,255,0.1) | none |
| Menu Item Border Outer | #111 | transparent | transparent |
| Menu Item Border Divider | #111 | #55657b | #d8d8d8 |
| Selected Item Background | #0078F4 | #B9C1D4 | #4ca1fe |
| Selected Item Label Color | white | white | white |
| Dark, rounded menu with clear borders and high contrast icons/text | Lighter menu with softer colors and less contrast | Minimalist menu with monochrome text/icons, obvious seelcted state, and no highlights or shadows |
In each case, the padding & border radius is the same as the content area, which helps them line up, but you could set them differently if you prefer.
Save and Exit
When you save your theme, you will have two options.
1) If you sync your Unplugged device to restyler.teamstudio.com (using the same username and password as you created for the website) you will be able to see our Sampler application using your new custom theme.
In the list of themes you can see which theme is active with the green tick.
2) You can choose to download the custom theme from your list of saved themes.