{"id":37764,"date":"2015-02-17T05:55:46","date_gmt":"2015-02-17T13:55:46","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=8372"},"modified":"2015-02-17T05:55:46","modified_gmt":"2015-02-17T13:55:46","slug":"deep-look-at-the-new-skin-module-feature-in-platform-4-2","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/deep-look-at-the-new-skin-module-feature-in-platform-4-2\/","title":{"rendered":"Deep look at the new Skin Module feature in Platform 4.2"},"content":{"rendered":"

\"SkinModule-PLF42\"<\/a><\/p>\n

Last week, we announced the release of eXo Platform 4.2 Milestone 1<\/a> and told you about the new feature it would include. Today, it\u2019s time to take a deeper look at one of them: the Skin Module<\/strong>.
\n
\nSome of you stated that it takes too much time to modify the default skin of eXo Platform, and we heard you.<\/p>\n

We understood that even if the default skin is really nice, you need to be able to easily create your own theme<\/strong>.<\/p>\n

You need to be able to create a custom theme that can represent your company, your brand, and your community. Or perhaps you just don\u2019t like that shade of blue, and you prefer a strong pink color!<\/p>\n

As usual, we listened to our community<\/strong>:<\/p>\n

\"01-pink-skin\"<\/a><\/p>\n

During the past few months, our UI team has worked hard to harmonize, factorize, and optimize the look and feel of eXo Platform. We have reached our first milestone: it is now ridiculously simple to customize the skin of eXo Platform 4.2.<\/p>\n

The Skin Module <\/strong>feature lets you modify the entire eXo Platform skin by updating only a few variables in a unique Less file.<\/p>\n

For instance, we can create your own add-on. Then by modifying only six variables in the variable.less file, you can include a new grey background image like below:<\/p>\n

@baseColor: #ffffff; \/\/ text color , border color, and other UI elements..\n\n@baseBackground: #333333; \/\/ default background , background for content display....\n\n@primaryColor: #0ab5f5; \/\/ primary button and link color...\n\n@primaryBackground: #222222; \/\/ main background such as header popup background, tab items...\n\n@images-path: \"\/eXoSkin\/skin\/images\/themes\/blue\";\n\n@contentBackground: url(\"@{images-path}\/ShareImages\/Background\/texture-gray.jpg\") repeat left top;<\/pre>\n
We can completely modify the default skin of eXo Platform to produce a new dark theme<\/strong>:<\/p>\n
\"02-dark-theme\"<\/a><\/p>\n
This Dark Skin Add-on<\/a> is already available, and you can install it in one command line using the add-on manager:<\/p>\n
$ .\/addon install exo-dark-skin --snapshots<\/pre>\n
You want to go back to the default eXo skin; just uninstall the add-on:<\/p>\n
$ .\/addon uninstall exo-dark-skin<\/pre>\n
Exciting? I\u2019m sure now you want to create your own skin add-on. Let\u2019s start by forking the platform-ui project and follow the Readme file. Then let\u2019s share your nice skin add-on with the community by registering it on the community website<\/a>.<\/p>\n
As with any new feature in eXo Platform, a complete documentation will follow soon. Keep an eye on this blog to read our documentation updates.<\/p>\n
We are eager to hear your feedback on this feature. Please let us know on eXo Tribe<\/a> and do not hesitate to share screenshots of your creations!<\/p>\n
May the force be with you ! \ud83d\ude42<\/p>\n
\"03-star-wars-background\"<\/a><\/p>\n
Join the eXo tribe<\/a> by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!<\/b><\/p>\n
<\/p>\n
\n
\n

\n\"make-the-most-out-of-eXo-platform4\"
\n<\/a><\/div>\n
\n
Make the most out of eXo Platform 4<\/h4>\n
Register to the next weekly live demo session and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"Last week, we announced the release of eXo Platform 4.2 Milestone 1 and told you about the new feature it would include. Today, it\u2019s time to take a deeper look at one of them: the Skin Module.","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":37764},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37764"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=37764"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37764\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=37764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=37764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=37764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}