CSS Bootstrap Theme update in DXA

Question

I would like to use an existing Bootstrap theme (like on https://bootswatch.com/) in the Example DXA Core Website. Looking at the DXA Documentation on the HTML design I found the Build Files zip and inside this, the Bootstrap CSS files.

\build-files.zip\src\bower_components\bootstrap\dist\css

If I unzip and replace the CSS files in the folder above with the downloaded Theme files, would the new theme design apply? Then I would only need to upload the updated .zip to Tridion, and re-publish the 'Publish HTML Design' page?|

Answer 1

The DXA HTML design is not prepared for changes in the build-files.zip, we based the design on a set of standard modules/components and included those in that package, so these wouldn't have to be fetched from the internet upon publishing. Modification to the CSS should be done as described here https://github.com/sdl/dxa-html-design/tree/master/design (basically by editing the files of the html-design.zip).

But technically the entire design is indeed a basic bootstrap which is built by Node.js and Grunt, where the packages are provided by Bower. So if you update/replace the content in the bower_components folder and make sure they are correctly utilized by the build process, then you should be able to change it like that. I can't guarantee that all the standard DXA elements like teaser and carousel will still work in those designs though, again that is something you will have to find out yourself.

If you want to modify more of the HTML design than we expected you to do, you might want to consider using an external HTML design which is not published by the CMS, This gives you a lot more control and options, see also my answer here Using CSS / JS files outside of Tridion in DXA (specifically the blog post mentioned in there).