#trying to link css to html template

1 messages · Page 1 of 1 (latest)

hollow notch
#

hey guys, I am having trouble with {% load static %} to link a CSS to my HTML template.
when I write it down, it just appears in the webpage.

tender rivetBOT
nimble narwhal
#

Hi, do you have this in settings.py?
STATIC_URL = '/static/'

torn ingot
#

and do you have "django.contrib.staticfiles", in INSTALLED_APPS?

hollow notch
hollow notch
torn ingot
#

😐

#

is your code on github?

hot quest
#

Show us what you have written in your template file

hollow notch
#

unfortunately no

#

<html lang="">
<head>

<meta charset="utf-8" />
<title>hi</title>
  {% load static %}
<link href="{% static 'styleLogin' %}" rel="stylesheet" type="text/css" />

</head>

hot quest
#

And what comes out in the browser?

hollow notch
#

a text that says {% load static%}

#

instead of linking it

hot quest
#

Ok, show us the Django view that should be rendering this template.

nimble narwhal
hollow notch
#

def login(request):
return render(request, 'login.html')

hollow notch
hot quest
#

Ah, looking at the image you DM'd me, your code is different than what you wrote above. You've got:
{{% load static %}}
instead of
{% load static %}

hollow notch
#

Yead I edited it to {% load static %}

#

I was trying both

#

I am a beginner in Django its my first project and I got stuck here

#

should I import something in view.py ? or is unrelated

hot quest
#

It's unrelated.

#

How are you viewing this? What's in your browser URL bar?

hollow notch
#

local host

#

/templates/login.html?_ijt=gfn1rekn4pf7hjgalv940vaeb4

hot quest
#

Okaaay, what's in urls.py for this app?

hollow notch
#

from django.contrib import admin
from django.urls import path
import MainPage.views

urlpatterns = [
path('admin/', admin.site.urls),
path('', MainPage.views.login)
]

hot quest
#

So, it looks like you're viewing the template file directly instead of using the django view.

hollow notch
#

how to fix that

hot quest
#

How are you running your django server?

hollow notch
#

from the terminal

hot quest
#

And how are you getting to that page?

hollow notch
#

clicking on url that it gives me

hot quest
#

The url it gives you probably doesn't say "login.html" in it anywhere, right?

hollow notch
#

it doesn't

hot quest
#

So how did you get there?

hollow notch
#

I believe it is because I made it null in urlpatterns

#

path('', MainPage.views.login)

hot quest
#

Close your browser and try clicking on that link again.

hollow notch
#

the text {% load static %} is gone

#

but its not linked with the css

#

the logo disappeared also

hot quest
#

Okay, in that page, view source.

nimble narwhal
hollow notch
#

I added .css and still the same

hollow notch
hot quest
#

What does the HTML for the <link> tag look like? Also, what about the <img> tag that you say no longer works? (Hint: The image file should also be in your static files)

hollow notch
#

<link href="/static/styleLogin.css" rel="stylesheet" type="text/css" />

hot quest
#

Great, looks like that worked.

hollow notch
#

it didn't 😦

hot quest
#

In what way?

hollow notch
#

oh wait

#

it did !

#

I closed the browser and opened it again and it did

#

regarding the logo

#

src= {static 'logo.png'} ?

hot quest
#

src="{% static 'logo.png' %}" - same way you did the CSS. But remember that the logo.png file needs to be in your static folder.

hollow notch
#

perfect !

#

it worked

#

thank you so much guys

#

much appreciated

#

excuse my ignorance, I just started learning this framework

nimble narwhal
#

Ken can you now help me please?🥹

hot quest
#

So, for reference, the problem you were having before that caused the {% load static %} to appear in the browser was probably because you double-clicked on login.html at some point, causing your browser to try to load the template directly. Since this doesn't go through Django, the django templating language doesn't get replaced with valid HTML.

#

I'll go take a look...

hollow notch
hot quest
#

The template file doesn't know how to run itself, so the best guess that pycharm has is "open html file in the browser". So, don't do that.