{"id":15094,"date":"2016-11-28T08:52:35","date_gmt":"2016-11-28T16:52:35","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15094"},"modified":"2020-04-22T06:36:03","modified_gmt":"2020-04-22T13:36:03","slug":"custom-styles-use-css-to-style-elements-in-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/","title":{"rendered":"Custom Styles: Use CSS to style Elements in UXPin"},"content":{"rendered":"<p>UXPin elements are getting a lot more customizable. If you know CSS, you can make it happen.<\/p>\n<p>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\u2019ve got you covered.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/Screenshot1-700x.jpg\" alt=\"Applying custom styles with CSS\" width=\"700\" height=\"374\" class=\"alignnone size-full wp-image-15102\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/Screenshot1-700x.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/Screenshot1-700x-561x300.jpg 561w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>From box fills to navigation links, many UXPin elements have their own custom features in the Editor\u2019s \u201cproperties\u201d panel. But we wanted to give code-savvy designers more control over the look and feel of many visual properties. Here\u2019s how it works:<\/p>\n<ul>\n<li>Select an element.<\/li>\n<li>Click to the aptly-named \u201ccustom styles\u201d section of the Editor\u2019s property panel.<\/li>\n<li>Add your CSS properties, such as font, color, border, and padding.<\/li>\n<\/ul>\n<h2>Properties at your fingertips<\/h2>\n<p>What can you change? Turns out, quite a bit. The editable properties include:<\/p>\n<div style=\"width: 49%; float: left;\">\n<ul>\n<li>background<\/li>\n<li>background-attachment<\/li>\n<li>background-clip<\/li>\n<li>background-color<\/li>\n<li>background-image<\/li>\n<li>background-origin<\/li>\n<li>background-position<\/li>\n<li>background-repeat<\/li>\n<li>background-size<\/li>\n<li>border<\/li>\n<li>border-bottom<\/li>\n<li>border-bottom-color<\/li>\n<li>border-bottom-left-radius<\/li>\n<li>border-bottom-right-radius<\/li>\n<li>border-bottom-style<\/li>\n<li>border-bottom-width<\/li>\n<li>border-color<\/li>\n<li>border-image<\/li>\n<li>border-image-outset<\/li>\n<li>border-image-repeat<\/li>\n<li>border-image-slice<\/li>\n<li>border-image-source<\/li>\n<li>border-image-width<\/li>\n<li>border-left<\/li>\n<li>border-left-color<\/li>\n<li>border-left-style<\/li>\n<li>border-left-width<\/li>\n<li>border-radius<\/li>\n<li>border-right<\/li>\n<li>border-right-color<\/li>\n<li>border-right-style<\/li>\n<li>border-right-width<\/li>\n<li>border-style<\/li>\n<li>border-top<\/li>\n<li>border-top-color<\/li>\n<li>border-top-left-radius<\/li>\n<li>border-top-right-radius<\/li>\n<li>border-top-style<\/li>\n<li>border-top-width<\/li>\n<li>border-width<\/li>\n<\/ul>\n<\/div>\n<div style=\"width: 49%; float: right;\">\n<ul>\n<li>color<\/li>\n<li>opacity<\/li>\n<li>height<\/li>\n<li>width<\/li>\n<li>font-size<\/li>\n<li>font-size-adjust<\/li>\n<li>font-stretch<\/li>\n<li>font-style<\/li>\n<li>font-variant<\/li>\n<li>font-weight<\/li>\n<li>padding<\/li>\n<li>padding-bottom<\/li>\n<li>padding-left<\/li>\n<li>padding-right<\/li>\n<li>padding-top<\/li>\n<li>direction<\/li>\n<li>tab-size<\/li>\n<li>text-align<\/li>\n<li>text-align-last<\/li>\n<li>text-decoration<\/li>\n<li>text-decoration-color<\/li>\n<li>text-decoration-line<\/li>\n<li>text-decoration-style<\/li>\n<li>text-indent<\/li>\n<li>text-justify<\/li>\n<li>text-overflow<\/li>\n<li>text-shadow<\/li>\n<li>text-transform<\/li>\n<li>line-height<\/li>\n<li>vertical-align<\/li>\n<li>letter-spacing<\/li>\n<li>word-spacing<\/li>\n<li>white-space<\/li>\n<li>word-break<\/li>\n<li>word-wrap<\/li>\n<li>box-shadow<\/li>\n<li>filter<\/li>\n<\/ul>\n<\/div>\n<p><br style=\"clear:both\"\/><\/p>\n<p>Whew. That\u2019s a lot of possibilities.<\/p>\n<h2>Going forward<\/h2>\n<p>Designers need more power to customize the look of design elements in UXPin while matching what\u2019s possible in web browsers. CSS is the obvious choice. Now they have it with Custom Styles: tailor any UXPin element with CSS.<\/p>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.<\/p>\n","protected":false},"author":27,"featured_media":15100,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,19],"tags":[],"class_list":["post-15094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-uxpin"],"yoast_title":"","yoast_metadesc":"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Custom Styles: Use CSS to style Elements in UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Styles: Use CSS to style Elements in UXPin\" \/>\n<meta property=\"og:description\" content=\"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-28T16:52:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:36:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Custom Styles: Use CSS to style Elements in UXPin\",\"datePublished\":\"2016-11-28T16:52:35+00:00\",\"dateModified\":\"2020-04-22T13:36:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/\"},\"wordCount\":280,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/CustomStyles_BlogPostImage.jpg\",\"articleSection\":[\"Blog\",\"UI Design\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/\",\"name\":\"Custom Styles: Use CSS to style Elements in UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/CustomStyles_BlogPostImage.jpg\",\"datePublished\":\"2016-11-28T16:52:35+00:00\",\"dateModified\":\"2020-04-22T13:36:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/CustomStyles_BlogPostImage.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/CustomStyles_BlogPostImage.jpg\",\"width\":720,\"height\":200,\"caption\":\"CustomStyles BlogPostImage\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/custom-styles-use-css-to-style-elements-in-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Styles: Use CSS to style Elements in UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Custom Styles: Use CSS to style Elements in UXPin | UXPin","description":"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"Custom Styles: Use CSS to style Elements in UXPin","og_description":"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2016-11-28T16:52:35+00:00","article_modified_time":"2020-04-22T13:36:03+00:00","og_image":[{"width":720,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg","type":"image\/jpeg"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Custom Styles: Use CSS to style Elements in UXPin","datePublished":"2016-11-28T16:52:35+00:00","dateModified":"2020-04-22T13:36:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/"},"wordCount":280,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg","articleSection":["Blog","UI Design","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/","name":"Custom Styles: Use CSS to style Elements in UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg","datePublished":"2016-11-28T16:52:35+00:00","dateModified":"2020-04-22T13:36:03+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Customize your elements with CSS code snippets. Simply enter CSS into UXPin\u2019s editor and the element will be immediately styled.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/11\/CustomStyles_BlogPostImage.jpg","width":720,"height":200,"caption":"CustomStyles BlogPostImage"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Custom Styles: Use CSS to style Elements in UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15094"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15094\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/15100"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}