Idea for a "Customize Theme" Tab and an "Inspector Tool"


I really like this software. As a beginner it is helping me understand exactly how to use css and bootstrap. One thing I would really like to see is a visual way to over-ride theme defaults. I tried getting SASS overrides working, but I am not confident in what am doing and need to get a project out so am leaving that for now, but I came across something that I thought would be great as part of BS studio.

This website: allows easy visual customization of the default Bootstrap theme. I was think that something like this would be great to have as a tab in bootstrap studio to make the initial global styling process faster. You could have a sort of dummy html structure where you can pull in some components which you are likely to use into a test page, tweak the global styles till you get the look you want, name the theme, then apply it.

Just a thought anyway.

Also it would be good if there was a way to view all the bootstrap css which applies to an element wihtout having to use my browser developer tools. This one is not crucial, but it would be nice to have a way to select an element and see ALL the styles which will be applied to it. Not all of them show in the styles tab just now and am not sure why. It would just make things easier to not have to switch back and forth between windows so much.



+1 for the addition of a theme builder that builds upon Bootstrap fundamentals! That would be quite an awesome feature indeed!

I would also like to take this idea a step further and request that the default themes that are already part of BSS be within a dropdown to choose as a starter template for the theme builder. In other words, let's say I love the Journal Theme that is included with Bootstrap in the settings, but would like to change the flatness, or a alter the colors just a little bit or something else like that. I would choose the Journal theme as a starting theme in the Theme builder and then alter from there. This would allow us to expand on the already available themes as well as starting from scratch.

@Richard: I'm not sure what how you're viewing BSS, but your last request and part of the one before that are already in there.

Styles connected to elements: When you click on any element and you look in the Styles window, all the CSS you see there is only what is applied to the element or item (paragraph, H3, Div etc.) that you have selected.

Overriding default locked CSS: If you need to override any of the locked CSS just duplicate the CSS to your custom CSS file and alter the settings. To do this use the little dots menu to the right of any Class or ID in the Styles window and choose Duplicate. Alter the things you want to be different in that Class or ID and then just be sure your custom CSS file is the last one being read. Right click over the Styles word in the Design pane and in the little popup menu choose Include Order. Rearrange the CSS so that your custom CSS is the last one on that list.

Another thing I just thought of also, you can use that theme builder and if it gives you the file (I didn't test it that far), if you upload the CSS and JS that it gives you and use those to override (arrange the order of the files as mentioned above), you can effectively override the default files. Would just be a whole lot more fun if it were built into BSS though!

It should be built-in to BSS to at least change the .danger, .info, .... classes colors like it has been done on Pingendo software.

In BSS it could have a "Theme" tab the same way as Pingendo has. They a look at their software an copy it.

Sorry, couldn't put the image before. Here is a image what Pingendo software (that makes Bootstrap websites) has done for Bootstrap theme editing. It's the tab on the right: Pingendo Theme Customization

Something similar can be achieved in Bootstrap Studio software

Or if that is too much for the developer team, there should be a way to, instead of using bootstrap.css, the software could use bootstrap.scss as a option, so that way it would be easier to change variables of bootstrap, such as theme colors. We would do that manually, on the code editing > styles section of the software. Can someone on the developer team tell me what they think of the proposals?

Have to go, bufallo...


Hi, thanks for the tool i didn't know : Really useful to customize easely in no time the default BS theme !

I'll also love to see a tool like this one, or the pingendo one in BSS. But for now, we've no news on the forum of the developpers team...and we're still waiting for the 4.3 (original) additions.

Great suggestion !

Thank you Larsene. does the job. if BSS team developes a theme tab, make sure it has all the functionalities of webapp. Bye bye buterfly