CHange 3 theme colors

Bootstrap Studio Help
1

I only need to change 3 theme colors for primary, yellow and green. What is the easiest way to do this and have the ability to change more color variables if needed in the future?

I’ve looked at info on adding _variable.scss before importing bootstrap css, but I can’t see how to do that within bootstrapstudio. I don’t have access to when the bootstrap css is loaded to put a file before it. I’ve used theme customizers to created a theme with only the 3 colors changed but that seems like overkill to apply an entirely new theme for just this. Sometimes when I did this, my colors would be updated, but something would mess up with the layout.

I really just need a simple way to overide some of the color variables and know how to do that within BSS. Thanks.

2

Hopefully this answer helps you.

The best way is to customize Bootstrap. Getting up to speed with Sass some time ago took me about 20 minutes. Trying to override color for color or style for style is time consuming and increases the time to get the project done.

I would recommend using Visual Studio Code to do your editing and working through the documentation. I have attached a picture of template folder (in the reference below) and the starting *.scss file that I use before each project that might help. There are two videos that can push you accross the finish line just in case. I hope this helps.

Reference - Customizing Bootstrap CSS

4

NM, I see, thanks! This helps.

5

Would you say BSS is good for quick page layouts, then move into a different tool?

6

Yes, I would. BSS is an important part of my workflow. The secret for me has been to tweak my workflow, some of the things I have done:

  • Customizing CSS as mentioned before.
  • Creating components for things I use often.
  • Using labels for projects that will become part of a web app, static site theme or (argghh) Wordpress since most of my projects don’t end up completely static. Getting the layout right the first time eliminates a majority of the debugging and troubleshooting later.
  • Getting familiar with utility classes. I have found I write 80% less custom CSS since doing this.
  • Just recently started committing Bootstrap classes to memory. Lame, but important to get things done quicker w/o looking at the documetation.
7

To add to that, unless you need it in a different tool to utilize other languages (PHP, etc.) there’s really no need even move it to another tool. Almost everything a website needs is doable right inside the app. Obviously, as I said, if you need other functionality that a static website cannot do that’s different. I’ve been 100% within BSS for years now. Hasn’t stunted my progress, speed or creativity in any way so far. :slight_smile:

2 Likes