How to override Bootstrap CSS with brand new styling?

Bootstrap Studio Help
1

Hey guys,

Quick question I had since I'm new to the app. Say for example I have a default navbar out of drag and drop like this; Well, how can I override all of the default styling? For example, the default uses gradients and such. How would I go about using something like; "background-color: red;" as an example? Because I've tried a lot of different things, and it appears the gradient from the default bootstrap draws over everything unless I take an EXACT direct copy of that styling and change the colours that way.

Any help is appreciated!

2

You can import a new Theme {File}-{Design Settings} - {Main} - {Manage Themes}

then you have your own CSS-Files with Bootstrap.

For customizing these Import-Themes, I use SASS. So every detail of the NAV can be changed easily

Or you can override each NAV-CSS on your own in the styles.css, but that's a lot of work.

3

Hey Frank,

Can you perhaps give a little more elaboration or some examples regarding SASS? Never used it before but currently doing the 2nd way you said involving overriding each class for the nav, and you are right, it's really quite a lot of work.

Thanks

4

Overriding classes (if they are the default locked ones) is really the only "direct" way to edit things like this. Yes it's a little more work, but not really all that much. If you're a good web designer, you usually don't edit the default classes of a Bootstrap CSS file anyways, you copy it to a custom file so you don't lose the original information. This works the same way in BSS, so it's really not any more work than it would be if you were doing things the proper way outside of BSS :P Actually it's shorter amount of time as it copies it for you directly to the file you want it in so you don't have to copy and paste it to another file manually. :)

Outside of that, the theme idea is pretty interesting to me too, I haven't played around much with that stuff yet.

5

Click on my SASS-link an there is shown how to install SASS.

It's really easy to install, don't worry :)

I am on Linux... and I don't know which System you have. On that System... ahh what's its name... ahh "Windows"... it's a bit more to do, but you can read it on that SASS site.

After installing you can type sass -v in the terminal an when you see something like Sass 3.4.22 (Selective Steve) ... you got it.

In the part "Preprocessing" you see the what to do...

I explain it with my word, but look there for the correctness!

In your Project-Folder you have normaly an CSS-Folder. Add an SCSS-Folder

run sass input.scss output.css and thats it. for more automatic convert use the "watch-flag"

sass --watch input-dir:output-dir

then all your SCSS-Files in the input-dir will automatically converted.

There are a lot of tools outside, where you can make this with an GUI, but urgllll... I don't like this :)

After installing the Bootstap-SASS Files in ANY folder (not your "input-dir"), you have the bootstrap-sass-3.3.7/assets/stylesheets/bootstrap/_variables.scss File.

I copied only THIS file to my project and marked ALL lines in my copy as comment with ///// at the beginning of the line.

So now I have my Bootstrap-SASS Folder, my Project-SASS Folder with one file "_my_Bootstrap_variables.scss" Now create an file "website.scss" and this makes automatically an "website.css" in your output-dir.

In your "website.scss" write something like this:

@import "{Your_Folder_to_your_output-dir}scss/_my_Bootstrap_variables.scss";
@import "{Your_Folder_to}bootstrap-sass-3.3.7/assets/stylesheets/bootstrap/_variables.scss";
@import "{Your_Folder_to_your_output-dir}scss/_Style_1.scss";

Line 1 sets your personally defined variables for Bootstrap, just clear the "/////" at the beginning of the line. I made 5 * "/" because now I know which on I need, an which not. When I temporarily don't need one, I mark this only with "//". Sure, you could delete ALL line you don't need, but if they are there, you see what you CAN change.

If you set your styles, these defined variables will not be overridden by the standard "_variables.scss" because of the "!default". So only the variables are overridden that ARE NOT DEFINED yet

Line 2 imports the standard Bootstrap-Style

In Line 3 you can set your own style after all

If all is done correctly you have one "website.css" in your output-dir. This file import in Bootstrapstudio.

6

By default a new project starts with the Theme "Bootstrap". You can change the default theme to "Bootstrap without Theme" which will not include the gradients. To do that click on the file menu and select Design Settings then select a different Theme from the Theme dropdown.

Or if you just want to deal with the navbar gradient you have in your example you can use the following CSS.

.navbar-default {
  background-image:none;
}

It might help to look at a site in layers, one of Firefox's dev tools used to have a 3D view of a site and you can see how things are layered. Anyways, take the CSS property "background", it is a shorthand property that consists of several other properties such as:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

The shorthand looks something like background:red url(image.ext) no-repeat fixed left top;

The first layer is background-color:red; the second is background-image:url(image.ext);. The second layer goes over the top of the first, just like if you were to stack paper. Which is why simply changing the background-color has no effect because it is covered entirely by the background-image property. The other three properties are actually more like effects rather then layers because what they do is effect the styling/behavior of the first two layers.

So with this in mind you have to write a property that overrides the property you are looking to override, therefor, the gradients use the "background-image" property so you have to effectively disable it by saying there is not going to be a background image by saying "none" as the value.

So you could add your CSS as

.navbar-default {
    background-color:red;
    background-image:none;
}

Or you can shorthand it by using

.navbar-default {
    background:red none;
}

The other three properties may not need to be overridden, so you don't need to declare them, unless you do need to override them. If so just add them in similarly like above.

I hope this helps you in some way :)

Saj