Building a Bootstrap Theme

IS there a simple way to change the colour values for success, danger, warning, etc?

I need to create a custom theme based on corporate branding colours.

Hi Brad,

This may help.

Best regards,
Brian

Thanks Brian, I am aware I can change elements using custom classes or over riding the current class of an element. But that is very time consuming to have to do that on every element.

I was wondering if there was a way to globally change the values for warning, success, danger, info, etc

So for example every element using the success value would be a certain colour.

I think the only way to do this is to recompile Bootstrap. This is a little fiddly but could avoid changing numerous classes where a particular colour might be used. Once you’ve set it up and selected your new colours etc., it only takes a second or so to have a custom theme.

There have been a couple of threads on the subject. I included a link to demo for doing this with Pinegrow on one of these - I think it’s probably a good explanation even if you don’t use Pinegrow. You certainly don’t need Pinegrow for this but you need something to compile the SASS files - either free/open source or with a UI (Prepros is a good option Mac/Windows).

1 Like

I found this that looks like it may do what I need. Just not sure how I would include it in Wappler or if it would effect Wappler at all.

http://upgrade-bootstrap.bootply.com/bootstrap-4-customizer

We found the same page :slight_smile: I do not think there is an easier way other than using custom styles. However, its a good question so will watch this thread for ideas too.

This looks like a good option - certainly worth a try. You would just need to replace the existing Bootstrap file with the custom version.

It shouldn’t effect Wappler. However you need to be careful that Wappler doesn’t overwrite it - eg if there is a new Bootstrap version. At some point I hope this sort of thing will be easier to avoid and Wappler will give a warning before it overwrites files like this. Make sure you have a backup ready to hand in case it happens.

Might be better to use the generated css file as an include after the main bootstrap file so it just over rides the main css file?

I’ve just noticed a message on the site:

This is an experimental CSS custom build tool based on Bootstrap 4.1.1

… so it’s possible there may be some issues.

(PS I just tried a custom version - it’s 4.3.1 - so ignore this message.)

I suppose you could to that - but there would be a great deal of redundant CSS. (Most of what’s in Bootstrap is probably not used anyway on any particular page, so you would be more than doubling this.)

Ben already made a nice guide about this:

1 Like

Wow, great tutorial, but that seems very complicated just to change a couple default colours.

When you change a single colour in Bootstrap, it changes a series of classes - affecting text, backgrounds, buttons, hover effects, gradients etc… Searching for ‘primary’ finds 59 occurrences in a Bootstrap .css file I just tried. If you were to change all the colours with all their related classes, in a custom css file for example, it would be a huge task.

Once you’ve set things up (which as you suggest, is not a trivial matter), you could choose your colours and the relevant changes (possibly hundreds of them) would be applied in a second or two.

There are other changes you can make like switching on gradients. There’s a single SASS rule to set this. Again, it would be a difficult and fiddly task to create all the relevant custom styles.

Having said that, if you only need a few changes, custom css styles may be the best solution.

1 Like

This will make it a lot easier https://www.youtube.com/watch?v=85tt7KwUMLo