bootsfaces

How to change themes in bootsfaces


I've create webapp application with BootsFaces. Now I want change the themes used currently. I've cloned the git repository and tried to change themes by downloading a theme from bootswatch as per the documentation provided below.

Customization

Until there is a new version of the customizer, you can still customize the look and feel taking advantage of the build system. There are many Bootstrap customizers on the net, for example Bootswatch . What you need is a file with the variables to customize the build. Some customizers will provide you a .less file as well.

Put the files in the BootsFaces/less directory of the build and tweak the bs-* files to use your variables / .less file.

Bootswatch I can download variables.less, bootswatch.less, but in bootsfaces there files such as alerts.less, badges.less, bsf.less. I'm not sure how to customize the themes. I'm completely lost trying to changes themes.

UPDATE

That's exactly the problem; from bootswatch or for that matter from any Bootstrap site I would get boots bootstrap.min.css and bootstrap.css, however in the bootsfaces source code I find bsf.css and theme.css file in directory BootsFaces-OSP-master\BootsFaces\css. And theme.css in BootsFaces-OSP-master\BootsFaces-OSP-master\BootsFaces\themes directory and BootsFaces.css in BootsFaces-OSP-master\BootsFaces\min directory which on do I need to replace with bootstrap.css and bootstrap.min.css


Solution

  • @Karthik BootsFaces Team is still working on getting Bootswatch Themes in the Build, so we can obtain BootsFaces library in many flavours.

    Of course it is not so easy and actually requires building the library after some changes are made, here is how:

    1. After cloning the github repository, download bootswatch.less and variables.less of your favorite theme
    2. rename variables.less to bs-variables.less and copy it with bootswatch.less in the less directory
    3. edit bs-core.less to import the bs-variables.less file in order to override the original variables

      // Core variables
      @import "variables.less";
      // Custom Variables override
      @import "bs-variables.less";
      
    4. edit bs-theme.less to import bs-variables.less and bootswatch.less to override original variables and apply changes to the the theme

      // Core variables
      @import "variables.less";
      @import "bs-variables.less";
      
      @import "theme.less";
      @import "bootswatch.less";
      
    5. depending on the bootswatch theme customisations, other files might need the changes you made in step 3, e.g. bs-alert

    6. now build the library using Gradle (read Gradle build requirements) and enjoy!