Solution 1 :

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

Solution 2 :

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;
}

Solution 3 :

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.

Solution 4 :

Try to use property

background-color

Hope It will help

Problem :

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">
        <a href="https://example.com" target="_blank">Link</a>
    </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?

Comments

Comment posted by Biplove Lamichhane

Did you already added to style.css to static folder and made changes? Can you show how you imported css file? I mean line

Comment posted by Charles

Added to the original post @BiploveLamichhane and yes I’m editing the file directly in the static folder

Comment posted by Charles

What does “version=55” does?

Comment posted by Biplove Lamichhane

Well, its nothing… just giving version=55 so that while loading, the browser will treat it as a new url so will load again. You can add other things also, like

Comment posted by UncaughtTypeError

I wouldn’t recommend using an

Comment posted by Charles

That worked, thanks! But I still don’t get why the .css modification doesn’t work :/

By

Leave a Reply

Your email address will not be published. Required fields are marked *