It appears you can create a sass partial (file that starts with an underscore) but I am not sure if this simply creates a compiled CSS file that overrides the full bootstrap.css file variables, which works but is not the most efficient.
There’s instructions, but they don’t go much into detail: https://bootstrapstudio.io/tutorials/writing-sass
So you can create a overide “theme” using sass in your Styles folder. Go to theming Bootstrap and read…
It states that “Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.”
So you must download and import the Sass folder files and folder structure to the Styles folder. I have a _underscore on all the files.
Then the sass:
This will override (not replace) the Bootstrap Studio bootstrap.css file just like any other css file you include in styles. (It is a complete compiled custom bootstrap.css file).One could actually replace the main bootstrap.css file when project is completed or during testing after exporting. Everytime the Bootstrap version is updated you would probably want to update the sass folder to the new Bootstrap version also.
I only offer this up as a “trial” for others to test. Could not recommend it for production until further testing.
One thing I did notice is the downloaded css version of bootstrap (same version as Bootstrap Studio is using) is missing some -ms prefixes so its possible BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..telemacMember
can we have a word from the dev on this, does this method of importing all the BS SASS framework into BS will interfere with look&feel/options/Animation tools? Do you validate this method, or does it have to be considered as a temporary solution or not valid?
Maybe you are planning to had tools panel to edit the bootstrap variable in the future?Martin AngelovBootstrap Studio Developer
Sorry for replying so late to this thread. The recommended way to customize Bootstrap is to do your modifications outside of the application and import the compiled CSS as a custom theme.
We would like to make the Bootstrap SASS editable in the app itself at some point, but we need to figure out how to unlock it without this leading to breakage. It is also not entirely clear how upgrades of the framework (say from 4.0 to 4.3) would be handled so that modifications are retained. Maybe just letting users change a white listed set of variables would be enough.
Would love to hear your opinions on this.
Any updates on this topic? I need custom Bootstrap Style (like https://getbootstrap.com/docs/4.2/getting-started/theming/) but the example on (https://bootstrapstudio.io/tutorials/writing-sass) does not work with:
To modify an existing color in our $theme-colors map, add the following to your custom Sass file:
$theme-colors: ( "primary": #0074d9, "danger": #ff4136 );
Why not just go to one of the many new Bootstrap Theme Builders online such as http://themestr.app/ and create your theme, download, import as a theme (theme.css), and then choose it as your theme in Design settings ?
If you choose to use the compiler included in Bootstrap Studio which is a somewhat complex method, then you will need to import all the needed files for the compiler to build the bootstrap.css file. The error on your screen is correct because it does not know the path to the bootstrap file that will have all the included file paths to compile. That means the complete structure must be inside Bootstrap Studio to work not to mention the “underscored” _naming of files you do not want to be compiled but used.
The theme import is really the way to go and will work with publishing or exporting (later uploading to your server).marrcoMemberValued
Certificate expired for ten days now. Looks like that site is dead now:
Your connection is not private
Attackers might be trying to steal your information from themestr.app (for example, passwords, messages, or credit cards). Learn more
I would agree that using the online theme builders that are becoming popular would not be the greatest solution for some if you want to have full control over versions and advanced customization.
You still need to jump thru some hoops to get your theme.scss that is complied inside Bootstrap Studio using its compiler exported, reimported as a theme, and then removed as a linked style sheet from all the pages.
Simply renaming the “theme.scss” to “_theme.scss” with a underscore does seem to toggle the ability to do that when changes are needed or not. (A export is required first)
One can also setup a “master template page” inside the project so you can see all your theme palette settings as you apply changes to your custom template that will then be applied globally across all pages. These templates are easily found on the web also and can be added simply by using the html custom code.
This method only works for exported projects.
Currently the suggestion is offered only as a “test” as some may find it useful or add to the discussion.
You must be logged in to reply to this topic.