A default heavy check (✔) appears as "✔"
Bootstrap 4.3 appears to be stylizing the check, forcing the browser to render as a thick-green one, which is undesired for my tastes -- refer to the example below
I'd like to remove Bootstrap's styling, but cannot detect the styling rules that were used. I've attempted to locate it via grep -irn 10004 with no luck
How might I revert the styling back to the default to undo Bootstrap's work?
w/ Bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
Default (Desired):
.small.text-muted {
color: #444;
font-size: .85rem;
}
✔
<div class="small text-muted">
This is how I want the checkmark to appear, but still including Boostrap on the page.</div>
The reason because the "✔" check has style of green is caused of styled by the browser based on the font rule.
To be able to revert the styling back to the default style of check mark and undo the Bootstrap's CSS. You need to override the font-family property in the body and remove the "Segoe UI Emoji" font.
Note that you need to add !important to override the style.
Please see the code below
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"!important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
or In order to avoid using !important ( as Jon P mentioned) you can create a style tag after the inclusion of your bootstrap css file so that it will override the style.
Note: Bootstrap css file should be declared first then declare the style to override next.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"
}
</style>
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
Hope this helps.
Related
I am using Bulma css framework with custom font Comfortaa from https://fonts.google.com/specimen/Comfortaa
But the font has some extra space at bottom and it makes all text of elements to be little higher than it should be.
On img: 1) comfortaa 2) roboto 3) Segoe UI (with button and h1 with border)
see comparision img
How to make text of elements with Comfortaa font on same level as others ?
Preferably in Bulma. Thank you.
You could add extra padding to the text container to push it down a little. You'll need to tweak the amount of padding to suit. Below is an example of how that could work. I have created a class .text-offset that pushes the text down 1px with padding-top.
The whitespace you have outlined in your image is the fonts line height, it is different from font to font. Apparently, some web fonts try to balance the top and bottom spacing out for this reason.
body {
font-family: 'Comfortaa', cursive;
padding: 20px;
}
.text-offset {
padding-top: 1px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span class="text-offset">GitHub</span>
</a>
I have Bootstrap loaded and working all fine, via CDN, and I'm trying to override the bootstrap default size and color stylings for a <caption> tag. So, I've placed some css in my stylesheets/application.css file:
caption {
font-size: 150%;
color: #000000;
}
My application.html.rb head looks like this:
<head>
<title>Odot2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
Even though bootstrap is listed after the application.css manifest file the font-size css selector i defined in application.css does take effect, yet the color selector will only work if i move the bootstrap link before the application manifest link?
Why does one selector work and not the other and what is the correct way to be doing this? Thanks in advance.
Bootstrap css defines caption as:
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
Note, there is no font-size there, but there is color.
In css, if the same property is defined in exactly same selector more then once, the second definition overrides the previous one. Hence if you define color first in your assets and you load bootstrap later on, bootstrap will override your definition. Since font-size is not used in bootstrap for this selector, order doesn't make any difference.
Thats how CSS works - if two rules have the same specificity than the latter rule always wins:
a.css
p { color: blue; }
b.css
p { color: red; }
--
<html>
<head>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
</head>
<body>
<p>I'm red</p>
</body>
</html>
That's why you always place libs at the top and your overrides under. That is unless you want to start a specificity war...
The correct way, if you want to override a style defined in a library, is to put your own stylesheet after the stylesheet for the library, as you noticed.
Now the Bootstrap CSS does not define the caption color font size, so it doesn't matter where you put the size in your CSS; that's the size it will take. However, it does define the color, so in that case, the order in which the styles appear is important. The last one takes precedence.
Use the custom style CSS at the last, after bootstrap CSS..it will over write the caption style. Hope it will resolve ur issue
Just add important to your css attribute value to override default bootstrap CSS
caption {
font-size: 150%;
color: #000000!important;
}
Hope that will be quick and work for you well.
thanks
Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).