Add New Skin

Widget Framework is shipped with escenic-times. But you can add your own skin. The steps involved to add a new skin are as follows-

  • Create your skin directory in each widget according to the strucutre of Widget Framework. Say your skin name is my-skin. Then you have to create my-skin directory under skin directory of each widget. The path is <widget>/src/main/webapp/skins

  • You also need to create your skin directory in widget-framework-core/src/main/webapp/skins skin and need to add common css and gfx there.

  • Add a property publication.skin.my-skin.title = My Skin in widget-framework-core/src/main/resources/com/escenic/framework/ApplicationResources.properties.

  • Add the transformer for skin in your publication pom file which will be used to make final war file. For details, see Using core and community widgets together and Using core and mobile widgets together. If you add this transformer then maven shade plugin will merge all widget's my-skin.css in a single my-skin.css file otherwise it will not merge.

                <transformer implementation="org.apache.maven.plugins.shade.resource.AppendingTransformer">
                <resource>skins/my-skin/css/my-skin.css</resource>
                </transformer>
              
  • compile and deploy your code.

  • Edit root section parameter from web studio. Set skin variable there e.g skin=my-skin