{"id":16621,"date":"2018-07-04T07:09:23","date_gmt":"2018-07-04T14:09:23","guid":{"rendered":"https:\/\/www.exoplatform.com\/blog\/?p=16621"},"modified":"2018-07-04T07:09:23","modified_gmt":"2018-07-04T14:09:23","slug":"skin-customization-with-exo-platform-5-0-exo-platform","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/skin-customization-with-exo-platform-5-0-exo-platform\/","title":{"rendered":"Skin customization with eXo Platform 5.0"},"content":{"rendered":"<p>Defining a skin and creating a graphical chart of a site is an important phase in any project. <a href=\"https:\/\/www-upgrade.exoplatform.com\/blog\/2018\/03\/19\/exo-platform-5-0-released-lets-open-conversation\/\" target=\"_blank\" rel=\"noopener\">eXo Platform 5.0<\/a> comes with two predefined skins (Default and Enterprise) you can draw inspiration from or use with some minor changes. To define a new skin, follow the steps described in the documentation site (<a href=\"https:\/\/docs.exoplatform.org\/PLF50\/PLFDevGuide.Site.LookAndFeel.CustomizingSkin.CreatingNewSkinAddOn.html\" class=\"broken_link\" target=\"_blank\" rel=\"noopener\">direct link<\/a>).<\/p>\n<p>To customize one of the predefined <a href=\"https:\/\/www.exoplatform.com\/?utm_source=BlogEn&amp;utm_medium=Blog&amp;utm_campaign=Content&amp;utm_content=link\">eXo Platform<\/a> skins, you can redefine an existing skin or customize some CSS classes.<\/p>\n<p>1- Redefine an existing skin<\/p>\n<p>If you&#8217;d like to change a generic CSS behavior defined in a <a href=\"https:\/\/docs.exoplatform.org\/PLF50\/PLFDevGuide.Site.LookAndFeel.SkinElements.SkinModule.VariablesIconsImages.html\" class=\"broken_link\" target=\"_blank\" rel=\"noopener\">less variable<\/a>, you could create a new <strong>Maven module<\/strong> based on <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/tree\/master\/skinning\/creating-new-skin\/sample-skin-webapp\" target=\"_blank\" rel=\"noopener\">this sample project<\/a> and add your customizations:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">Use <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/creating-new-skin\/sample-skin-webapp\/src\/main\/webapp\/skin\/less\/customVariables.less\" target=\"_blank\" rel=\"noopener\">customVariables.less<\/a> to change predefined <a href=\"https:\/\/github.com\/exoplatform\/platform-ui\/blob\/5.0.1\/platform-ui-skin\/src\/main\/webapp\/skin\/less\/variables.less\" target=\"_blank\" rel=\"noopener\">less variables<\/a>. You can find a description of the predefined variables on the <a href=\"https:\/\/docs.exoplatform.org\/PLF50\/PLFDevGuide.Site.LookAndFeel.SkinElements.SkinModule.VariablesIconsImages.html\" class=\"broken_link\" target=\"_blank\" rel=\"noopener\">documentation site<\/a>.<\/li>\n<li style=\"font-weight: 400;\">Use <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/creating-new-skin\/sample-skin-webapp\/src\/main\/webapp\/skin\/less\/customStyle.less\" target=\"_blank\" rel=\"noopener\">customStyle.less<\/a> to define custom CSS classes. This will allow you to redefine existing CSS classes or define new ones.<\/li>\n<\/ul>\n<p>2- Customize some CSS classes<\/p>\n<p>To redefine predefined CSS classes, use <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/tree\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/customizing-skin\" target=\"_blank\" rel=\"noopener\">this maven project example<\/a> and add your customizations:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">Use <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/customizing-skin\/src\/main\/webapp\/skin\/myStyle.css\" target=\"_blank\" rel=\"noopener\">myStyle.css<\/a> to redefine <a href=\"https:\/\/www.exoplatform.com\/?utm_source=BlogEn&amp;utm_medium=Blog&amp;utm_campaign=Content&amp;utm_content=link\">eXo Platform<\/a> CSS classes.<\/li>\n<li style=\"font-weight: 400;\">Use <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/customizing-skin\/src\/main\/webapp\/favicon.ico\" target=\"_blank\" rel=\"noopener\">favicon.ico<\/a> to change your site\u2019s favicon.<\/li>\n<\/ul>\n<p>If you want to apply those customizations to the Enterprise skin, you will have to change <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/customizing-skin\/src\/main\/webapp\/WEB-INF\/gatein-resources.xml#L27\" target=\"_blank\" rel=\"noopener\">this parameter<\/a> from \u201cDefault\u201d to \u201cEnterprise\u201d.<\/p>\n<p>To make the new custom style file loaded at the end of Pages DOM (with the top CSS priority), rename the <a href=\"https:\/\/github.com\/exo-samples\/docs-samples\/blob\/6dc3934e03f9239271308ae143283c144e5095db\/skinning\/customizing-skin\/src\/main\/webapp\/WEB-INF\/gatein-resources.xml#L28\" target=\"_blank\" rel=\"noopener\">skin module<\/a> to start with \u201ccustomModule\u201d (this is an improvement made on <strong>eXo Platform 5.0.1+<\/strong>).<\/p>\n<div>\n<div class=\"adv-events\" style=\"background: #476fad; padding: 30px 20px; color: white;\">\n<div class=\"media\">\n<div class=\"pull-right\"><a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\"><br \/>\n<img decoding=\"async\" class=\"size-full wp-image-6587 alignright\" style=\"border: none;\" src=\"https:\/\/www-upgrade.exoplatform.com\/blog\/\/wp-content\/uploads\/2016\/02\/tribe.png\" alt=\"Join The eXo Tribe\" height=\"120px\"><br \/>\n<\/a><\/div>\n<div class=\"media-body\">\n<h4 class=\"media-heading\"><a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\">Join The eXo Tribe<\/a><\/h4>\n<p><a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\"><br \/>\nRegister for our Community to Get updates, tutorials, support, and access to the Platform and add-on downloads. <strong>Sign in Now!<\/strong><br \/>\n<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Defining a skin and creating a graphical chart of a site is an important phase in any project. eXo Platform 5.0 comes with two predefined skins (Default and Enterprise) you can draw inspiration from or use with some minor changes. To define a new skin, follow the steps described in the documentation site (direct link). [&hellip;]","protected":false},"author":7,"featured_media":23362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":[],"categories":[819],"tags":[606,765,827],"lang":"en","translations":{"en":16621},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/16621"}],"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=16621"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/16621\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=16621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=16621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=16621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}