February 29, 2016

Adding a custom css/skin file to a MAF application

When we want to apply our own css to a Oracle MAF application, we need to configure a custom css file to it. Below is the procedure to know how to add a custom css/skin file to a MAF application.
  • Right click on ApplicationController project -> select CSS File -> enter css file name. Below is the default path of the file to be created. Here my css file name is myskin.css
            /ApplicationController/public_html/resources/css/mycss.css

  • Open maf-config.xml which is under Application Resources and check the skin family and version
         Ex
             <skin-family>mobileAlta</skin-family>
             <skin-version>v1.4</skin-version>

  • open maf-skins.xml which is under the project "ApplicationController" and create an xml entry like below
        <?xml version="1.0" encoding="UTF-8" ?>
         <adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skin">
         <skin-addition id="s1">
         <skin-id>mobileAlta-v1.4</skin-id>
         <style-sheet-name>resources/css/myskin.css</style-sheet-name>
         </skin-addition>
         </adfmf-skins>

Where <skin-id> is the combination of skin-family and skin-version of maf-config.xml file seperated by "-" and enter the css file path for <style-sheet-name>.