Overriding Bootstrap Styles in Service Portal

tmgarcia · ‎06-22-2016

Is there any way to override Bootstrap CSS styles (not scss variables) on a theme or portal level in Service Portal? The way things are currently being built out, your portal's Theme styles are compiled and included, then any Portal CSS variables, then Bootstrap itself, and then you have any CSS include files. Obviously this order makes sense so that you can override Bootstraps SCSS variables (e.g. $link-color), since SASS doesn't have variable hoisting, but this also means that any CSS styles you have defined in your theme or Portal CSS gets overriden when Bootstrap's is coming afterwards. Is there anywhere that you can include SCSS code that will be loaded in after Bootstrap?

Essentially what I'm looking for is to accomplish a style ordering of

Base Theme styles > Portal Specific styles > Bootstrap styles > Overrides

For a specific example, say I want h1 to have a specific font-family and I want h2 to have a completely different font family. Bootstrap doesn't have separate SCSS variables I can override, it just sets every h# font family in one style, so where can I set this that it will be defined portal wide?

It could be done within page or widget specific styles, but that'd mean a lot of repetition and loss of re-usability for what should be simple global styles like h1s and h2s. It could be done in CSS includes since those do seem to come in after the SCSS compiled code, but it'd be preferable to do it somewhere that will still compile down SCSS code so I can reference variables. (As a side note, I'd so love to see SCSS includes become a thing in the future)

Edit: Here's a clearer example of what I'm talking about, from one of my replies down below (copied here for visibility)

Here's a hopefully more clear, concrete example of what is going on, keeping in mind that it is hypothetical, I am not literally storing every single font family in a separate variable, that's silly.

My Theme SCSS

$h1-font-family: Roboto Slab Thin, sans-serif;
$h2-font-family: Roboto Slab Light, sans-serif;
h1 {
         font-family: $h1-font-family;
}
h2 {
         font-family: $h2-font-family;
}

Bootstrap's scss (Included in the same file after my theme css)

h1,h2,h3,h4,h5,h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

font-family: $headings-font-family;/* This will now override my two separate header font family stylings */

font-weight: $headings-font-weight;

line-height: $headings-line-height;

color: $headings-color;

}

The point, as this hopefully conveys, is that not every Bootstrap style can be overridden by overriding one of their SCSS variables. Some styles have to be overridden with actual style definitions, but still needing SCSS functionality. Like in this example, what I would have to do, what I'm looking for with this question, is to somehow be able to put this section of code

h1 {
         font-family: $h1-font-family;
}
h2 {
         font-family: $h2-font-family;
}

after that Bootstrap's scss section of code, so that it overrides their styling while still being able to reference SCSS variables.

Message was edited by: Taylor Garcia

nathanfirth · ‎07-04-2016

Why not just increase the "specificity"? You could even do something like "html > body h1" or similar to increase the specificity to override Bootstrap. Or you could use !important;

Link: Specificity - CSS | MDN

View solution in original post

nathanfirth · ‎06-22-2016

The Theme CSS is loaded after Bootstrap. Almost all my portals utilize custom fonts and so if you define a different font-family and place it on H1, H2 in the theme stylesheets that should override Bootstraps defaults.

See below. the highlighted line is the theme styles being imported right after bootstrap.

tmgarcia · ‎06-22-2016

I apologize, you're saying that the Theme CSS includes are loaded after Bootstrap, right? Because I do see that, the problem I'm having is that the Theme CSS and SCSS styles defined in the Theme's "CSS variables" property are included inside the "sp-bootstrap.scss?portal_id{id}" file before the bootstrap styling is included into that same file.

Sorry, my question might not be totally clear. My example with the h1 and h2 were a poor choice since that's a purely css style override so it could be put into one of those CSS include files, but what I'm really looking for is somehow having some SCSS styles included after bootstrap's styling. So a more accurate (though slightly contrived) example would be wanting h1 and h2 to be two different font families that I've defined in two different SCSS variables.

nathanfirth · ‎06-23-2016

Are you using "!default" on all your variables?

If you want to override the variables in the Bootstrap file you simply define your variable in the theme or portal and then set it with !default;

Example:

$grid-gutter-width: 30px !default;

$brand-primary: #00aacd !default;

You'll notice this is how Bootstrap uses it's own variables in their SASS version. This simply reverses the order so the first to set takes priority.

tmgarcia · ‎06-24-2016

Just a quick clarification for anyone who might come by this thread in the future - the !default modifier means that a variable should be defined as the specified value only if it has not already been previously defined. Essentially it marks a variable as overridable by variable definitions that come before it. You do not need to mark a variable definition with !default if that definition is itself doing the overriding, only if it needs to be overridden. There isn't technically any order reversal, which might be misinterpreted as implying variable hoisting, which is found in less, not sass.

And it's still not what I'm looking for. As I mentioned in my question, I am trying to override bootstrap styles, not variables.