Changing skins at runtime

Having a skin for your application is great to manage how it looks and feels from a central location, but giving the user an option to change the skin at runtime is also a great feature that many applications might want to provide to their users.

In this recipe, we will know how to provide the user with the capability to change skins at runtime and swap between two skins.

You can continue from the last recipe, or you can grab the ADFFacesSwapSkins application from the Git repository.

How to do it…

To know how to change skins at runtime, perform the following steps:

1. Create a new skin by following steps 1 to 8 of the previous recipe with the following changes:

   • Name the skin hrRed instead of hrBlue

   • Choose the base skin hrBlue

   • Uncheck the Use as the default skin family for this project option

2. Open the hrRed.css file.

3. Open the Source mode of hrRed.css.

4. Add the following lines:

   .hr-header-wrapper {
       background-color: #821816;
   }

5. Create a new task flow with the name hr-skins-menu...