How to overwrite default color SASS variables.

Forums Help and How To How to overwrite default color SASS variables.

This topic contains 32 replies, has 12 voices, and was last updated by  PervasiveRichesLLC 2 weeks, 5 days ago.

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • How does one simply overwrite the default color variables? Say I want to change the $blue / $primary viable throughout all of the styling. Any insights or even efficient hacks would be helpful.

    emartinez
    Member

    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

    Twinstream
    Member

    So you can create a overide “theme” using sass in your Styles folder. Go to theming Bootstrap and read…
    https://getbootstrap.com/docs/4.2/getting-started/theming/

    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:

    $primary: #be0a0a;

    $theme-colors: (
    primary: $primary,
    );
    @import “bootstrap”;

    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 …..

    Twinstream
    Member

    It’s kinda like finding a Gold Willy Wonka Ticket !

    Rutwin
    Member

    BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..

    Me too

    telemac
    Member

    Greetings,

    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?

    atalzabidi
    Member

    Can we import bootstrap in our SASS files without the need to download bootstrap sass folder and include them in the bootstrap studio?
    We need to override the _variables bootstrap file.

    Martin Angelov
    Bootstrap Studio Developer

    Hey guys!

    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.

    myf
    Member

    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:

    Modify map
    To modify an existing color in our $theme-colors map, add the following to your custom Sass file:

    $theme-colors: (
      "primary": #0074d9,
      "danger": #ff4136
    );
    
    myf
    Member

    Bootstrap Image Error
    enter link description here

    @twinstream your example does not works.
    @martin Angelov how i can override colors using scss? Not custom theme!

    Twinstream
    Member

    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).

    Printninja
    Member

    I agree with Twinstream. So much simpler to do it that way.

    marrco
    Member
    Valued

    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
    NET::ERR_CERT_DATE_INVALID

    myf
    Member

    Why not teach clearly how to use SASS inside Bootstrap through the compiler the right way? Relying on others (like you say: themestr.app) to do simple things like creating your own theme is very bad

    Twinstream
    Member

    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.

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.