...
- Follow the customization steps from Bootswatch.
- In the bootswatch git project, check out the most recent stable version that corresponds to the bootstrap version that's being used.
- Customize the colors defined in variables.less. Diff shown below...
-@brand-primary: #2196F3;
-@brand-success: #4CAF50;
-@brand-info: #9C27B0;
-@brand-warning: #ff9800;
-@brand-danger: #e51c23;+@brand-primary: #1e7098;
+@brand-success: #0ea862;
+@brand-info: #7772b4;
+@brand-warning: #f19223;
+@brand-danger: #d9534f;-@font-size-h1: 56px;
-@font-size-h2: 45px;
-@font-size-h3: 34px;
-@font-size-h4: 24px;
-@font-size-h5: 20px;
-@font-size-h6: 14px;
+@font-size-h1: floor((@font-size-base * 2.6))40px;
+@font-size-h2: floor((@font-size-base * 2.15))33px;
+@font-size-h3: ceil((@font-size-base * 1.7))26px;
+@font-size-h4: ceil((@font-size-base * 1.25))20px;
+@font-size-h5: @font-size-base16px;
+@font-size-h6: ceil((@font-size-base * 0.85))14px;
Also, update the tooltip background color-@tooltip-bg: #727272;
+@tooltip-bg: #171717;And update bootswatch.less btn so that all text is not uppercase (impacts Synapse Table Headers, for example):
.btn {
- text-transform: uppercase;
- Build the bootswatch project to create a new bootstrap.min.css
- Rename the file so that it is called bootstrap-paper-theme.min.css
- Replace the file in our gwtbootstrap3 project (gwtbootstrap3/src/main/resources/org/gwtbootstrap3/client/resource/css/bootstrap-paper-theme.min.css).
- Increase the gwtbootstrap3 project version, and rebuild.
- In SWC, update the pom to use the updated gwtbootstrap3 project version and rebuild.
- Verify that everything looks and functions correctly after the update!
...