I'm trying to edit a template I've downloaded on the internet, by changing some colors.
However, when I change the color in the css file, it doesn't change it on the website:
HTML:
.user-panel {
float: right;
font-weight: 500;
background: #ffb320;
padding: 8px 28px;
border-radius: 30px;
}
<div class="user-panel">
Link
</div>
This is how I import the .css file:
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
So what I did was changing #ffb320 to #cc0000 to have red instead of yellow, saved the file, and reloaded the page, but the color didn't change. Same goes for font size, etc...
The only thing that did work was using style='font-size:20px' for the font size.
What am I doing wrong here?
This happens because of the cache so, you can do like:
<link rel="stylesheet" href="{% static 'css/style.css' %}?version=55"/>
Also, do run the command:
python manage.py collectstatic
You should check out the original CSS from the template. Maybe there is a selector with more strength that just .class, I don't know the strength scale from memory, but I believe that doing something like div.class has more priority than .class.
You can always try adding !important. For instance:
.user-panel {
background: #ffb320!important;
}
It's a button with a link, so you need to target the 'a'. Because there's a child inside the parent, when you target the parent it won't automatically target the child. I've learned this through trial and error.
Try it like this:
.user-panel a {
background-color: #cc0000;
}
That will work.
Try to use property
background-color
Hope It will help
Related
I'm using a the Hugo Bigspring theme with Bootstrap 4 on a website. My primary call to action buttons are orange vs. the secondary green. However, my orange buttons turn green on hover and I cannot figure out why.
Code for the button:
Contact Us
CSS:
.btn-primary:hover,
.btn-primary:focus {
background-color: #F37021!important;
border-color: #F37021!important;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #F37021!important;
border-color: #F37021!important;
You can view the site live here: https://www.bridge12.com.
The orange buttons are on the top right and the bottom of the page.
Really appreciate your help - I've been banging my head against the wall for hours on this one.
This code block in your CSS is changing the color:
.btn-primary:active,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary.active {
background-color: #46812b !important;
border-color: #46812b !important;
}
By checking your website and inspecting the element this is what is shows
So it looks like either bootstrap or another custom CSS is overwriting your code.
Make sure that bootstrap css is always loading before your custom code.
Your background-color for btn-primary is set to #46812b!important; which i am sure it is not bootstrap css, that only means that you have that declared somewhere in your css. double check and you will find it.
Thank you all - this was very helpful. I was loading the style sheets in this order:
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
Changing it to this fixed it immediately:
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
Huge Thanks!
I'm very new to HTML, CSS, and JS.
I've just watched a youtube lecture for making the "Rock Paper Scissors" game website.
At the very early stage, I'm stuck when I make a CSS file.
Like this.
#import url('https://fonts.googleapis.com/css2?family=Asap:wght#600&display=swap');
*{
margin: 0;
padding : 0;
box-sizing: border-box;
}
header{
background : white;
padding: 20px;
}
header > h1{
color : #25272E;
text-align: center;
font-family: Asap, sans-serif;
}
body{
background-color: #25272E;
}
.score-board{
margin : 20px auto;
border : 3px solid white;
border-radius: 4px;
width : 200px;
text-align: center;
color : white;
font-size: 40px;
padding : 15px 20px; /*top-bottom left-right */
font-family: Asap, sans-serif;
position : relative;
}
.badge{
background : #E2584D;
color: white;
font-size: 14px;
padding : 2px 10px;
font-family: Asap, sans-serif;
}
#user-label{
position : absolute;
top: 0px;
left : 0px;
}
And in my HTML file, I just add it to the header.
Like the way, I've learned.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Sissors Game</title>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<header>
<h1>Rock Paper Sissors</h1>
</header>
<div class="score-board">
<div id = "user-label" class="badge">user</div>
<div id = "computer-label"class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Paper covers Rock. You Win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/hand_rock.png" alt="">
</div>
<div class="choice" id="p">
<img src="images/hand_paper.png" alt="">
</div>
<div class="choice" id="s">
<img src="images/hand_sissors.png" alt="">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
</html>
I've double-checked the file's location and there is no problem at all.
But whenever I launched the HTML file, my page style doesn't change at all.
For the first time, I checked the sources of HTML through the inspecting function in Chrome.
It was like this.
But as soon I reload my page the CSS source file changed to like this.
I really don't know why my CSS file not working in Chrome browser.
Coz in Microsoft's Edge the problem doesn't appear.
My Html CSS image :
My chrome screen :
When I push F4(Reload Page) :
It seems like my CSS file has gone.
Ok first your CSS file is fine and it is not gone at all. To find the CSS file and check it out go to your editor and navigate to the CSS link:
<link rel="stylesheet" href="assets/css/style.css">
hover over the href and alt + click you will find your file, another way to locate your CSS file in the editor and reveal in Explorer.
If you were able to find your CSS file make sure you are adding the accurate path in your link tag.
In case you still can't find the file please use the search in your PC it will show up for sure.
Also based on the images you posted every single change you were making is only restricted to the copy on the browser. Since you were using the page option as I have seen from the images you showed us, try to use a hard reload by clicking ctrl + shift + R maybe that will solve the Chinese letters thing. or close the page and try to reopen it after the hard reload.
Also if you added body { background-color-:red; } at the top of your page it will be overridden by your CSS code Since order matters.
body {
background-color: #25272E;
}
another thing since you are using the developer tools to make changes to your files, here is a tip for you do please use this feature to make the changes apply to your local copy too.
1- navigate to Sources > overrides > selete folder to override (your project folder)
2- make sure the local override is checked.
3- choose the file you want to edit after that save your changes and reload the changes will happen and your local copy has been changed as well.
I'm not sure if this what you are trying to say. But anyway I hope this was helpful.
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
I'm just new to CSS and I want to run this particular animation but not sure yet how to call it in my html file
http://www.impressivewebs.com/demo-files/css3-animated-scene/
Type in the CSS code in a file named `style.css
Then include it as shown:
<link rel="stylesheet" href="style.css">
Place style.css and a HTML page, for examplepage.html in the same folder and open `page.html. Should work :)
I have set up a JS fiddle for you:
http://jsfiddle.net/kr2XU/
You have to link your CSS in the HTML file like this:
<link rel="stylesheet" href="style.css">
For the future, you should know very easy and good way of animating content in your HTML files is using an Adobe product called Edge Animate. It is available with a free Creative Cloud membership.
You can learn more about it here.
About calling CSS selectors, let's have an example:
main.css
.class1
{
background-color: #fff;
border: 1px solid #000;
}
#another_selector
{
background-color: #eee;
border: 1px solid #666;
}
In your HTML file, you will have:
<div class="class1"> This div has the CSS class ".class1" </div>
<div id="another_selector"> This div has the "#another_selector" id </div>
See here a JSFiddle that will help you figure out what's going on with those classes and ids.