Struggling to get a CSS file working

Using Django Mystery Errors
1

Hello,

I am trying to get a CSS file to turn the background of the website blue (more of a learning exercise than something practical)

I started by using inline CSS and that was fine. I thought the process would be as simple as replacing this inline CSS with a link to a CSS file that had the same code as the previous inline CSS

however when doing that I get a 404 error for the css file and the background does not turn blue. I can’t really find anything online showing me where I am going wrong and would be grateful for any feedback.

I have attached pictures to show what I mean in greater detail.

CSS issue 1
CSS issue 1973×293 9.16 KB

2

What is your STATICFILES_DIRS setting? What is the directory that this file is in?

3

Thanks for your reply Ken

My STATICFILES_DIRS is the same as my Static DIR which is just the route to my static folder I have included pictures of this I am able to put a picture up from the images folder of my static folder

the file directory is my project/static/css/style.css

css issue 5

thanks,

4

You should have a STATICFILES_DIRS setting which should be a list, like:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
5

I have that however it was only allowing me to add one image per post because I am new.

css issue 4

6

Please do not post images of code here - copy/paste the actual code into the text of your post, surrounded by lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```.

7

Please post the log message for the 404 showing the url being issued, along with your STATIC_URL setting.

8

Sorry about that I’ll adhere to that in the future

My static URL setting is

STATIC_URL = '/static/'

this is the error log I see below

css issue 7
css issue 7913×772 30.5 KB

9

Please post the 404 from the console itself where you’re running runserver - I’m looking to see what the url is being issued.

10

Ahh right sorry I think I’ve got what you are looking for here

css issue 8

11

Again - please stop posting images of text here.

12

Please show the output of an ls -lR command of your static directory.

13

I am using windows and ls -lR was not recognised but I used dir /s which seems to be the equivalent. I assume the goal was to get all the directories and sub-directories.

what I found was

 Volume in drive C is Windows
 Volume Serial Number is 5439-7CAC

 Directory of C:\Users\ccolq\Workspace\JAP_project\static

17/06/2023  09:07    <DIR>          .
17/06/2023  09:07    <DIR>          ..
17/06/2023  09:07    <DIR>          css
15/06/2023  21:42    <DIR>          images
               0 File(s)              0 bytes

 Directory of C:\Users\ccolq\Workspace\JAP_project\static\css

17/06/2023  09:07    <DIR>          .
17/06/2023  09:07    <DIR>          ..
17/06/2023  11:47                52 style.css.txt
               1 File(s)             52 bytes

 Directory of C:\Users\ccolq\Workspace\JAP_project\static\images

15/06/2023  21:42    <DIR>          .
15/06/2023  21:42    <DIR>          ..
15/06/2023  21:42             5,283 camera.jpg
               1 File(s)          5,283 bytes

     Total Files Listed:
               2 File(s)          5,335 bytes
               8 Dir(s)  400,326,201,344 bytes free

Sorry about the pictures I thought the rule only specified code

14

You are correct in your assumption - it wasn’t clear to me that you were using Windows.

Note that you do not have a file named style.css. You have a file named style.css.txt

Side note: Regarding the images, it’s not so much a rule as a “strongly suggested” guideline. You’re not going to get in trouble, or anything like that, if you post images. However, you generally have a better chance of getting answers when you do post text.

There are three reasons why we request this:

  • The images aren’t always readable on every device being used to read the forum. (I write a fair number of replies on my cell phone - images can be particularly problematic there.)
  • The data in the images aren’t indexed by the forum and so don’t show up in a search.
  • The data in images can’t be quoted when there’s specific information that should be highlighted in a reply.

(And yes, there are cases where a picture may be worth 1000 words - in which case the images would be most appropriate - it’s a judgement call.)

15

That all makes sense. I assume my issue must be coming from the name of the file then. When I created the file I replaced the .txt with .css and thought that was enough but it must have put the .txt on the end anyway. Thanks for pointing that out I’ll try sorting that out and see if my problem is solved. Thanks a lot