I want to get rid of outlines in Firefox, however they're pointed more deeply than my style.css in bootstrap3.css so I need to update them all.
I've tried the following:
<link href="{{ URL::to('home_assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::to('home_assets/css/style.css') }}" rel="stylesheet" media="screen">
Example below didn't work because Bootstrap 3 points more deeply.
//bootstrap
a.carousel-control
{
outline: thin dotted;
}
//my css
body {
outline: none !important;
}
Result: a.carousel-control has thin dotted outline.
I need to do something like to remote outline. (and it works)
a.carousel-control
{
outline: none;
}
The problem is, then I need to point everything in markup deeply so it overrides bootstrap. I need to encapsulate most of Bootstrap's css.
Is there a functionality like this in CSS, so I can manage them from a single place?
body {
outline: none !override-previous; //pseudo
}
Any hacks or tricks to manage them in a single place? (no javascript, css expressions are okay though)
Ps. I need this for my dev environment because I keep outlines as default on production to help blind users. They're annoying for me, though.
You can try
*{
outline: none !important;
}
and please add this after your bootstrap.css file so that it'll override.
Related
I am trying to make the horizontal rule to be have border-style dotted on my site. But for some reason, it doesn't happen as long as there is bootstrap-5 cdn embedded. I also tried it on codeply and it works fine until I add the Bootstrap-5 Framework, at which point the border-style reverts back to normal. Here is the CSS I'm applying on the horizontal rule which has the class "horizontal-rule".
.horizontal-rule{
width: 5%;
border-style: dotted none none;
border-width: 7px;
}
Could someone enlighten me as to why this is happening and how I can solve this?
Bootstrap likely has its own styling for <hr> you'll need to open something like Developer tools to see what CSS you need to add to your declarations to override what Bootstrap defines in order for your styles to work.
Also, make sure that you're including your custom CSS After the bootstrap CSS so that your rules take precedence.
When upgrading to OpenLayers 6.5, the shift-zoom rectangular border does not show anymore. The zoom function works in itself, but the border is gone. Any ideas?
The "border" is defined in the ol.css stylesheet file found in the css/ directory under openlayers. So be sure that your html includes that with something like:
<link rel="stylesheet" href="/path/to/css/ol.css" type="text/css">
or define the sytle in-line like:
<style>
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
</style>
I have some styles in my custom CSS to override bootstrap CSS, but it seems they can not override bootstrap CSS. When I checked the styles using chrome developer mode I can only see bootstrap styles being applied!
Here is a screen shot of my chrome bootstrap:
Here is what I have in my css:
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border: 10px solid #b03636;
}
.panel-heading {
padding: 10px 15px !important;
border: 10px solid transparent !important;
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
Am I missing anything?
Thanks,
One thing you should check first: Go through all the styles and see whether the ones in your custom CSS are found at all. If so, they'll likely be crossed out to imply that they were overwritten by the bootstrap styles. If not though, that means that for one reason or another it's not finding your styles at all, and that's where the problem lies.
If they're definitely being overwritten, I might also recommend making sure that the custom CSS is being called after the bootstrap files.
Link your CSS file to HTML properly and import after bootstrap CSS like below so, you no need to write !important for all things to overnight.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first
First make sure your custom CSS is loaded after the Bootstrap CSS file and if it does not help, Use !important attribute with custom CSS to force the overriding.
So I'm completely familiar with overriding a style in bootstrap by using my own Style.css. But let's say that bootstrap has a style that is put on a table or something that is a standard html element. Let's use labels, because it's a rather short example. Let's first assume that there is no other label style or label element styling anywhere else except for the following css code:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
Now if I want to override this style in my Style.css file and change the margin and weight, I could do this:
label {
margin-bottom: 3px;
font-weight: normal;
}
Easy enough, this would change those two items and allow the other styles to cascade through. But what if I wanted to completely remove any styling added by bootstrap for the element label. Is there a short and easy way to do this without having to do something like:
label {
display: inline;
max-width: None;
color: none;
margin-bottom: 0;
font-weight: normal;
}
Or basically going through line by line and changing each styles property to something like none or normal or whatever? All while keeping the original Bootstrap file in an untouched state and not commenting anything out of it.
BTW I would also be fine with using JavaScript if it's concise and easy?
It depends on what browsers you want to support. You could use
label {
all: initial; // or all: unset
}
but be aware that it's not really widely supported yet. It works on IE 11, Firefox, Opera & Chrome, but not Safari or most mobile browsers. Still, a good one to know if and when it becomes more widely supported :)
No if it is already include the only way to override it is to give it properties like none, alternatively the best way to handle it is to use their SASS/LESS implementations and not include the component at all.
I have a css declaration as:
.textBox{
color: Orange;
font-size: 17px;
background: rgba(100, 200, 200, 0.7);
}
.textBox a:link, .textBox a:visited{
color: Blue;
border: 1px solid Black;
text-decoration: none;
background: none;
}
.textBox a:hover, .textBox a:active, .textBox a:focus {
background: rgba(0,0,0,0.5);
color: Red;
}
Then I apply the class "textBox" to a div. The forst "color" property, the one in the class itself ("Orange") works. The text has orange color. But I cannot change the color of the links. Neither while they're "normal" nor when I hover over them. The other properties of the link (border, background, etc) work fine both in "normal" state and when hovering.
I'm on OSX 10.6.8. Chrome 33.0.1750.58 beta doesn't display the link colors (text) in blue and doesn't change the link color to red when hovering. It does change the background on hovering and it does show a border around the link.
FF26 works fine. Blue links that turn red on hovering.
Any idea of what is happening?
Thank you!
UPDATE: Sorry, my wrong. It's not working in FF26 properly either. I went a bit too hasty there. I had left it out to simplify matters but the css also contains:
.textBox h1{
margin-bottom: 7px;
color: Black;
}
In Chrome, links within h1 will appear like links in the main text (some sort of grey, that I haven't set as a color at any level). In FF26, links within a h1 mark will appear blue and turn red on hover, whereas links in the main text will appear the same kind of grey as in Chrome. The h1 mark works fine (Black color and correct margin).
As for the html:
<div style="" class="textBox">
<h1>This Document Contains Descriptions</h1>
<p>Check also sample books foo bar.</p>
</div>
Try using just .textBox a instead of .textBox a:link
I had a similar problem, but only one style-sheet. Everything was receiving its intended style, except links. For whatever reason, I fixed my problem by fixing a caps typo in the style-sheet name.. one letter that was S and not s in the filename. I find this weird since all the other elements were receiving their styles....
It's difficult to tell without seeing your HTML, but I suspect the following CSS will work:
.textBox{
color: Orange;
font-size: 17px;
background: rgba(100, 200, 200, 0.7);
}
.textBox:link, .textBox:visited{
color: Blue;
border: 1px solid Black;
text-decoration: none;
background: none;
}
.textBox:hover, .textBox:active, .textBox:focus {
background: rgba(0,0,0,0.5);
color: Red;
}
Like I said, it's difficult to tell without seeing your HTML, but your first style rule acts as if the textBox class is applying to the link itself, whereas subsequent rules only apply to children of the textBox class (I hope that makes sense)?
All I've done is remove the a tags in your css, if you apply the textBox class to a tags the above code should work.
EXAMPLE
It was a simple thing: I had two calls in the head:
<link href="css/bar.css" rel="stylesheet" type="text/css" media="all"></link>
<link href="css/foo.css" rel="stylesheet" type="text/css" media="all"></link>
and they were in the wrong order. So that my .textBox a:color was overrided later on by a general body a:color.
Found that out as I was creating a fiddle to share. So thanks for that advice!
Sorry for posting the question, but after a couple of hours of staring at the screen, I felt I was going mad and needed some one else's eyes to look at it for a second. Thanks for all the suggestions!
UPDATE:
Man, this is becoming embarrassing. Anyhow, the solution of changing the order worked on my home MAMP installation, and it worked for FF26 on the "real" online server that I use (Apache, not sure of the details). When accessing the online page with Chrome I had the same problem as earlier. To solve it, I had to remove the lines:
.mmBack a, .mmBack a:visited{
color: rgb(75,75,75);
}
from bar.css. Somehow, the declaration above was overriding the .textBox one. The html was:
<body onload="onLoadBody()" class="mmBack">
/* the textBox divs in here, as stated in the question */
</body>
In case someone runs into the same thing....