Tweaking Bootstrap CSS buttons (all of them)

Hi
I'm just checking if there's a simpler way to change the css for all the CB/GJ buttons in one go instead of each plugin one by one.

For instance, I managed to tweak the code for the profile tabs to look and appear in a better way by putting the changes in my site's template custom.css file, but then I found I still had to find the code for each additional CB/GJ plugin in it's components/com_comprofiler/plugin/user/... folder and then add or combine very similar code for the various extra buttons to be affected as well.

I wonder if I'm missing a trick that will override all the buttons look in one go or am I already going about it in the only way currently available?

Here are some visual samples of what I mean:

Before:


After:


A button I still need to change (in blue):


Another still to change:


One that I've tweaked already:

---

One other little problem I've had with the css is with a lack of background colour that does not seem to be applied to the CB/GJ content outer boxes. My main site template uses a slightly grey background similar to the greys used for the CB/GJ inner content box and the effect is that everything is grey and not, for example, like the sample page on the CB QS Pro Demo site ( cbqspro.cbdemosites.com/ ):

CB Demo site:


My site before tweaks: (NB I had already tweaked triangle on this shot)


After tweaking the cb outer box background area:


The problem I'm having with the backgrounds is that they too need to be repeatedly altered in the css depending on which plugin is displaying a box. If I don't make the change then it makes visually differentiating the actual content areas more difficult for the users.

It seems like there should be an area of the css that shares the code for the standard elements (e.g. buttons and boxes from the main CB bootstrap css file) rather than recreate a long css (and my long overrides) file for each and every cb/gj plugin. I suppose this would be an intention for the future, perhaps in combination with using LESS, or am I missing something easy and obvious that's there already?

This will all be addressed with CB 2.0 where Twitter Bootstrap and CSS LESS will be a part of CBs core so you only need to make 1 change to affect all usages of it. For now each individual plugin needs to load it and have its own CSS for it. The reason I use selectors to target just that plugin is to avoid it from styling outside of it self (very bad if it did). For now your usage is correct.