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
Related
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.
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>
Here is a sample of my code:
<!doctype HTML>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="C:/Users/OneDrive/Programming/HTML/css/test.css">
</head>
<body>
<h1>This is a heading.</h1>
<p1>This is a paragraph.</p1>
<ul>
<li>This is the first element of a list</li>
<li>This is the second one.</li>
</ul>
<button type="button" onclick="alert('That tickles...')">Press me!</button><br>
<button type="button" onclick="">I do nothing. :-(</button>
</body>
</html>
What the situation is my CSS file...
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
... is located in the following way:
HTML/
..../home.html
..../css/
......../test.css
I've tried to access the css via href="css/test.css" but to no avail. What am I doing wrong?
P.S. Any optimisations to my code?
This is correct:
<link rel="stylesheet" type="text/css" href="css/test.css">
But in your code isn't any p tag only p1. So replace this:
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
With this:
p1 {
font-family: Courier New;
color: white;
background-color: lightblue;
}
(Sorry for my english. I'm from czech republic)
When you are accessing local files, you have to specify the file URI scheme (file:///):
<link rel="stylesheet" href="file:///C:/Users/OneDrive/Programming/HTML/css/test.css">
or use a relative path:
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" type="text/css" href="/css/test.css">
I would say check the spelling of the filename of your actual css file. Make sure it actually is test.css and not tst.css or tesy.css or some other typo. Check the folder name for typos too.
If your css file is somewhere inside your project folder just like your HMTL file I'm guessing a typo has to be the issue. For example, if your project structure looks like this
yourProjectFolder
||
||_ index.html
|
|__ stylesFolder
|
|_ test.css
Your script would have to look like this
<link rel="stylesheet" type="text/css" href="stylesFolder/test.css">
If this is indeed the way you're targeting your file and you're getting errors you have to be spelling something wrong somewhere along the way.
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.