Skip to end of banner
Go to start of banner

Customizing the Bootstrap theme

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Current »

We use a customized Bootstrap theme in the SWC, which we then further customize to have the a different color palette.  Do this when updating Bootstrap.

Step-by-step guide

  1. Download the forked repo:  git clone https://github.com/Sage-Bionetworks/bootswatch.git 
  2. Synapse customizations to theme made in branch of version that corresponds to the bootstrap version that's being used in the product.
    At the time of writing, this is v3.3.2-customized
  3. Following the steps from Bootswatch to configure npm and grunt.
  4. Build the bootswatch project to create a new bootstrap.min.css
  5. Rename bootstrap.min.css to bootstrap-paper-theme.min.css
  6. Replace the file in our gwtbootstrap3 project (gwtbootstrap3/src/main/resources/org/gwtbootstrap3/client/resource/css/bootstrap-paper-theme.min.css).
  7. Increase the gwtbootstrap3 project version, and rebuild.
  8. In SWC, update the pom to use the updated gwtbootstrap3 project version and rebuild.
  9. Verify that everything looks and functions correctly after the update!

 

  • No labels