Custom Styles: Use CSS to style Elements in UXPin

UXPin elements are getting a lot more customizable. If you know CSS, you can make it happen.

Custom Styles allow you to quickly style elements in UXPin using CSS. Whether you want to use your existing CSS or if you want to add new effects like text-transform properties, shadows, or blur effects, we’ve got you covered.

From box fills to navigation links, many UXPin elements have their own custom features in the Editor’s “properties” panel. But we wanted to give code-savvy designers more control over the look and feel of many visual properties. Here’s how it works:

Select an element.
Click to the aptly-named “custom styles” section of the Editor’s property panel.
Add your CSS properties, such as font, color, border, and padding.

Properties at your fingertips

What can you change? Turns out, quite a bit. The editable properties include:

background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width




color
opacity
height
width
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
padding
padding-bottom
padding-left
padding-right
padding-top
direction
tab-size
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
line-height
vertical-align
letter-spacing
word-spacing
white-space
word-break
word-wrap
box-shadow
filter

Whew. That’s a lot of possibilities.

Going forward

Designers need more power to customize the look of design elements in UXPin while matching what’s possible in web browsers. CSS is the obvious choice. Now they have it with Custom Styles: tailor any UXPin element with CSS.

Join the world's best designers who use UXPin.Sign up for a free trial.Your e-mailTry it for free!

The post Custom Styles: Use CSS to style Elements in UXPin appeared first on Studio by UXPin.