When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive css?
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
or
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
and what are the pros and cons of each?
If I edit the body padding after the bootstrap-responsive.css like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
/* Add padding for navbar-top-fixed */
body {
padding-top: 60px;
padding-bottom: 40px;
}
Then I must also fix the responsive layout using a media query as I have overwritten the global body style.
/* Fix to remove top padding for narrow viewports */
#media (max-width: 979px) {
body {
padding-top: 0;
}
}
It's usually better to place your custom CSS after the Bootstrap CSS. I'd imagine that you're wanting the custom CSS to override the Bootstrap CSS.
The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.
I can't really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn't really make much sense to write your own styles and then override them with Bootstrap's...
For example, this isn't bootstrap CSS, but it would work the same way, if you had the following in your head section:
<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />
Then in framework.css you had the following:
div.row {
border: 1px solid #eee;
border-radius: 3px;
margin-bottom: 50px;
padding: 15px;
}
But then you realised you wanted to add a red background (why oh why...) and change the border radius, you could have the following in custom-styles.css:
div.row {
background-color: red;
border-radius: 10px;
}
The resulting CSS applied to the element would be this:
div.row {
background-color: red;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 50px;
padding: 15px;
}
Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! :)
I think if you put style.css on top then bootstarp styles will override it.If you put style.css at bottom then bootstrap styles will be overriden with your custom styles
Related
When I change the index.php file to index.html, it runs main.css file on local. But when I run it with php, it does not see main.css. Bootstrap sees the css files.
Note:The index.html code works when I run on local. There is no problem with the code.
Edit:The problem is not in PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
</body>
</html>
main.css:
.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
This is not really a PHP problem. This is happening because Bootstrap is overwriting your main CSS. In fact, using the main CSS, give your button an ID name and change it to the main cass. I think this will work
bootstrap default css btn-primary
<a href="" class="btn-primary class_name" ></a>
use css
.class_name.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
Please do not overwrite the bootstrap classes,instead use custom class say .btnDelete.
.btnDelete{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
And also remove asterisk btn-primary.Bootstrap uses snake case notation for naming classes.why don't you use camelCase notation in order to distinguish between user-defined classes and bootstrap classes.
It is actually not a PHP problem. It is happening because Bootstrap is overwriting your main CSS. To actually use main CSS give your button a id name then change it in main.css. I think that will work. ;-)
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
I am using bootstrap for my site, I think the black header is not good and the font is too small. How to customize the header of bootstrap ? Is there any example ?
It's better to just override the class/id.
Declare the bootstrap first then your own css
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/mystyle.css" rel="stylesheet">
in your mystyle.css you can:
header,.header,#header{
background: red;
color: white;
font-size: 15px;
}
I have a stylesheet that contains 10 selector definitions. When I view my website in IE and Chrome (I'm not including FF because it renders exactly like the way it does in Chrome), nine of the ten selector definitions work consistently across all browsers.
The one that doesn't work is defined as such:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
As you can see, there are only two values that are necessary for IE. So I did some research on conditional CSS. I have now taken my style sheet and create a duplicate with the two additional entries for IE.
At the top of my document, I now have the following:
<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>
which is working, but can't I do the conditional statement at the selector level?
I also tried this in the CSS document which also didn't work.
[if IE] a.dp-choose-date {
/* definitions here */
}
Does anyone have any suggestions?
One way to do this is:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />
Notice than I do not have a conditional around the first style sheet.
Within the second style sheet just define the tag as:
a.dp-choose-date {
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
}
Due to the way style sheets work, the browser will combine and apply both definitions.
You can make things easier on yourself by adding classes to target IE, and a nice way to do this is to wrap your opening html tag in conditionals like so:
<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
This allows you to prefix your IE only selector with the version of IE you want to target:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
.ie6 a.dp-choose-date
{
position: relative;
top: -25px;
}
Using IE's if conditionals at the HTML level is probably the best way to fix kinks that IE (usually < 9) has. Conditional comments do not exist at the CSS level. You can also (if you wish) use CSS hacks, but that probably isn't the best solution, as later versions of IE may not necessarily allow those hacks, but may still have the same CSS issues.
By the way, your second if conditional should be written as the following for validation purposes:
<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
The easiest way to implement this logic:
[if IE] a.dp-choose-date {
/* definitions here */
}
is to use IE's conditional comments to write out unique body tags:
http://www.positioniseverything.net/articles/cc-plus.html
So you can end up with something like this:
<body class="ie7">
Then, in your CSS, when you need to over-ride one style, you can do this:
.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}
The benefits of this:
only one CSS file needs to be loaded (saving server requests)
your CSS remains valid (no ugly CSS hacks)
your over-ride styles stay with your good styles, so much easier to maintain