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
@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:
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";
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";
depending on the bootswatch theme customisations, other files might need the changes you made in step 3, e.g. bs-alert
now build the library using Gradle (read Gradle build requirements) and enjoy!