I have imported my custom CSS file below the bootstrap CDN but still it is not getting overridden.
[here is the screenshot of inspecting element.][1]
Importing bootstrap and css
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="{% static '/css/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static '/css/cart.css' %}" />
My custom style (to override bootstrap)
* {
font-family: 'Poppins';
box-sizing: border-box;
margin: 0;
padding: 0;
}
Your code is working as expected:
* is of lower priority than p (or any selector), so the boostrap code will be more important.
The order of the files only matters when two selectors with the same priority exist. In that case the file loaded latest will win.
To fix this, do:
p {
margin: 0;
padding: 0;
}
And you'll see your code applying.
Related
I have added css links with the asset() helper within my master file but they seem to bring about style conflicts. I would like to find a way of including all my css files without the conflict
<link rel="stylesheet" href="{{asset('css/frontend_css/style.css')}}" />
<link rel="stylesheet" href=
{{asset('css/frontend_css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('css/frontend_css/font-
awesome.min.css')}}">
<link rel="stylesheet" href="{{asset('css/frontend_css/animate.css')}}">
<link rel="stylesheet" href="{{asset('css/frontend_css/sina-nav.css')}}">
<link rel="stylesheet" href="{{asset('css/frontend_css/pdt.css')}}">
The order in which you import your stylesheets is important - each stylesheet you add will override the previous variables if applicable, so put your main, custom CSS last to override the others.
e.g:
stylesheet-a.css
body {
background-color: red;
color: black;
}
stylesheet-b.css
body {
background-color: yellow;
}
On your imports:
<link rel="stylesheet" href="{{asset('css/stylesheet-a.css')}}">
<link rel="stylesheet" href="{{asset('css/stylesheet-b.css')}}">
This will produce a background of yellow and text that is black. If you import it the other way around, you will have a red background with black text.
Hope that helps.
I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
This is my first attempt at writing some LESS css code and I can't seem to get it to compile. I'm sure I'll be missing something simple but I can seem to find what it is.
My Styles are declared as follows:
<!--Styles & JS-->
<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
And my LESS file looks like this:
//Theme Colours
#headingcolor: #212d43;
#accentcolor: #005bc4;
#textcolor: #FFF;
#footercolor: #0856a1;
//Theme Fonts
#font: 'Sniglet', cursive;
//Theme Sizes (1980)
#mainfont: 12px;
#h1: #mainfont + 6;
#h2: #mainfont - 1;
#footerlinks: #mainfont - 2;
//Styles
header {
background: #headingcolor;
color: #textcolor;
font: #font #mainfont;
padding:10px 36px 15px 36px;
}
Try to load your stylesheet before the js. With your theme.less, the following code is working:
<body>
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<header></header>
</body>
If everything is working, you should find in your browser console some messages like:
less.min.js:13 rendered http://localhost:8000/theme.less successfully.
less.min.js:13 css for http://localhost:8000/theme.less generated in 19ms
less.min.js:13 less has finished. css generated in 20ms
Practially, i have a css file with some classes ,id's and html selectors (index.css) and the kendo.mobile.all.min.css.
I've tried putting it before and after to no avail.
My classes won't work , for example:
<div data-role="view" data-title="main-menu" id="main-menu" data-persist="true" class="body" data-transition="overlay:up" >
<h1>Text text</h1>
<h2>Another</h2>
<div>
This code, when used only with my css and the kendo.common.min.css and kendo.default.min.css files, shows the proper styling with background, when used , in any combination with kendo.mobile.all.min.css all i see is the plain html.
I'm a begginer (still in university) , is there something implicit about this that escapes me? I also tried jquery mobile but quit that because it overrided all my css and got blank html.
Also anyone know how can i change the default android skin from android-dark to android-light without forcing the app to run on one platform? (as in still adapt to different platforms)?
My include order:
<script type="text/javascript" src="cordova.js"></script>
<script src="js/load.unload.js"></script>
<script src="js/hangman.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<!-- audio css-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.ui.core.min.js"></script>
<script src="js/kendo.mobile.listview.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- audio js sources-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
you can try adding the !important property to your css to see if that works.
like this:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
I need some help diagnosing a CSS problem in Chrome. I'm not even sure how to diagnose this issue. I'm just wondering what the next steps should be.
As far as solutions go, I have checked this question but it's not very clear. I have also tried this solution (disabling all styles and then enabling one) but it's not working. I don't think this question applies because we're not pulling from external domains so it's not a cross-domain issue.
The problem:
It appears that Chrome is ignoring our alternate stylesheet definitions. In our application we use alternate stylesheets and a Javascript routine to change the background color. This code was working, and is still working in Firefox and IE, but at some point it stopped working in Chrome. The stylesheets are defined like this:
<link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" />
<link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" />
<link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" />
<link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" />
<link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" />
The original body definition here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #282828;
height: 100%;
background: #fff url(../images/header-bg.jpg) center top no-repeat;
min-width: 1024px;
}
is supposed to be overridden with (for example) this, in one of the alternate stylesheets:
body {
background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
}
But this is not working in Chrome. I've tried the following:
1) Traced through the JS code and verified that the CSS sheets are getting enabled/disabled correctly:
if (document.styleSheets.item(i).href.indexOf("medium") > -1) {
document.styleSheets.item(i).disabled = false;
} else if (document.styleSheets.item(i).href.indexOf("dark") > -1
|| document.styleSheets.item(i).href.indexOf("beige") > -1
|| document.styleSheets.item(i).href.indexOf("green") > -1) {
document.styleSheets.item(i).disabled = true;
}
2) Looked at the computed styles, and only the base style is showing - it's like Chrome is ignoring the other styles.
3) Tried removing alternate from the rel="alternate stylesheet" part of the definitions.
4) Tried removing the title from the base definition (layer.css).
Anyone have any other ideas? If I find a solution I'll post it.
The answer turned out to be removing the "title" attribute AND removing the "alternate" part of the stylesheet definition. So the stylesheets are now linked like this:
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/medium.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/dark.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/beige.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/green.css"/>" />
No idea why the original definitions didn't work but the new ones work and can be turned on and off with JS, which is what we needed.