I'm developing a website using the Twitter Bootstrap CSS framework. Rather than host the (significantly sized) file and Font Awesome myself, I plan to use the Bootstrap CDN by NetDNA instead to get both, Bootstrap's CSS as well as Font Awesome.
However, some of the button styles in Bootstrap do not appeal to me, and I've decided to override them in a custom stylesheet.
I've already read this question about overriding CSS styles involving images, but does the same apply for background gradients and other assortments? (which make my (quite old) computer groan if used too much, leading me to believe they do put some strain on the computer)
For example, one of bootstrap's style rules is as follows:
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
which I'm tentatively overriding with:
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: none;
background-color: #057CB8;
border: none;
border-radius: 4px;
}
Will the earlier (possibly CPU intensive) properties be loaded anyway?
The browser starts reading the html from the top, and starts fetching all CSS. The page will not be painted until all the CSS has been downloaded.
The bootstrap CSS will get loaded, but it won't be painted.
Related
I am trying to add a blur/glass effect to a Chrome Extension to look like https://css.glass/
These are the styles I used on the <html> of the popup
.extension-html {
background: rgba(0, 0, 0, 0.7);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);
}
And this is how it looks like:
This is how it should look like: (Photoshop edit)
Is adding a glassy transparent effect like this doable with chrome? If so, any guidance would be appreciated
I am trying to recreate the image below that gives the button a "opaque" or blurred transparency look. I have tried googling for an opaque background but did not find much. How can I recreate this look?
The effect is called, I believe, glassmorphism. It is generally achieved using backdrop-filter. You can find a generator for this effect at https://css.glass/. Here's some example CSS it kicked out that seems like it approaching the style in your image:
.your-class-here {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Obviously there's some extra properties in there you might not need, but you can strip out what you do.
I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.
It is simply an exact copy of .btn-success with modified colors and class name only:
.btn-mine {
color: #ffffff;
background-color: #ff8d53;
border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
color: #ffffff;
background-color: #ea793e;
border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
background-color: #ff8d53;
border-color: #ff6314;
}
.btn-mine .caret {
border-top-color: #fff;
}
.dropup .btn-mine .caret {
border-bottom-color: #fff;
}
Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.
I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.
But I am more interested in knowing why my approach above does not work.
I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.
What am I missing here?
.btn-success contains
.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
While your class contains just some border and background color
You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:
.btn-mine {
color: #ffffff;
background-image: none;
background-color: #ff8d53;
border-color: #ef8343;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
http://jsfiddle.net/qG2n6/1/
If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:
http://www.colorzilla.com/gradient-editor/
Which might look something like this:
.btn-mine {
color: #ffffff;
border-color: #dc5930;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #ff8d53;
background: -moz-linear-gradient(top, #ff8d53 0%, #ff732d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
background: -webkit-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -o-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -ms-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: linear-gradient(to bottom, #ff8d53 0%,#ff732d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
background-repeat: repeat-x;
}
http://jsfiddle.net/qG2n6/3/
I've figured out how to change background color of things such as the heading in the navbar along with the links but what about the rest of the bar? I'm talking about the area left and right of any links. I assume it's in the following code but I do not know what to edit as it isn't clear. Note: Changing background color has no effect. This is in the bootstrap.css. The color is currently black.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #8900ff;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
The code below in my style.css has worked to color the background color for the links:
.navbar .navbar-inner .container .nav-collapse > ul > li > a {
background-color: #E89800;
}
Solved: What I had to do was get rid of the background image like so:
.navbar .navbar-inner {
background-color: #e89800;
background-image: none;
}
It set the background image of the navbar to none and I was able to change the background-color for the rest of the bar.
Response was found: Change background color in navbar fixed menu bar Bootstrap
There is a class that ships with bootstrap that is called .navbar-inverse
You can use that class there where you have .navbar (just add on so it looks more or less like navbar navbar-inverse
This will invert the white to black and it's something you can target easily to change as well.
Here is a JS fiddle using only stock bootstrap: Demo
As a final recommendation and to help you understand things better with the CSS in bootstrap. I recommend that you don't modify any bootstrap files and you instead use your own custom.css file (place it after the bootstrap CSS so it weights more) and do your modifications there. Read the bootstrap documentation, it's very short and simple to understand.
You can find the source of this information here: http://twitter.github.io/bootstrap/components.html#navbar , just look for the "Inverted variation" part of the documentation for the navbar and you should be good to go. It's also note worthy to say that there are more things that you can invert, such as buttons with btn-inverse so read the documentation a little more so you can engage in better and simpler programming with bootstrap.
I'm trying to override the css from bootstrap.
I going to design the navbar without color.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
with
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
}
I delete background color replacing it in the bootstrap .css.
Is it possible to just override it with another value?
Short Answer: YES
Long Answer Follows
The way CSS works is called specificity. There's is an order in which styles are applied to an element. Think of it as 4 separate numbers with the default value of each being 0. So 0,0,0,0 is the default
The first number represents inline styles
e.g., <span style="color: red">I'm Red</span>
The second number represents IDs
e.g., #IdSelector
The third number represents classes
e.g., .ClassSelector
The fourth number represents element and pseudo selectors
e.g., div and :first-child
These rules are applied in the order of internal style sheet first, external stylesheet second. If there's a rule defined ANYWHERE that applies to your element and you don't override it with a selector that has a higher specificity, then it will stay the same.
The following will override
.navbar-inner {
background-image: none;
}
Going back to specificity.
If your element is <div id="mainNav" class="navbar-inner"></div>
#mainNav {
background-image: none;
}
.navbar-inner {
background-image: url(img.png);
}
Then the image will be set to none. The ID selector has a specificity of 0,1,0,0 and the class sector has a specificity of 0,0,1,0.
Even if you added 11 classes the ID would still win, the specificity in that case would be 0,0,11,0
There is one last number, a hidden number. so 0,0,0,0,0 The one in front represents !important, which can be added after any style declaration to make it apply no matter what. If you have two conflicting declarations which have !important listed, it falls back to the order of inline vs. embedded vs. external. Generally you should avoid !important at most costs, except where it absolutely makes sense.
!important example that makes sense.
.hide {
display: none !important;
}