The styles from the base.css file are not being implemented in the Django project

I currently have a folder structure that looks like this:

https://i.sstatic.net/a4nYD.png

My goal is to import base.css into base.html so that it is applied globally:

Here is my HTML:

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <link rel="stylesheet" href="{% static 'base.css' %}">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded98839d839f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  (...)
</html>

Here are my settings:

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR,'static')

I've tried various combinations, but nothing seems to be working. Any assistance would be greatly appreciated. Thank you :)

htmlcssdjangostatic

Answer №1

Finally got it working after consulting the documentation once again, although the solution is not the most elegant one.

My modification in settings.py now reads as follows:

STATIC_URL = "static/"

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

It's functioning properly now, but I can't shake the feeling that this isn't the most Django-esque way to handle it. If anyone has a more efficient method, please do share.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are you accessing the site on a variety of gadgets?

I am currently working on a website with the goal of making it responsive. So far, it looks great on desktops and mobile phones like the iPhone and Galaxy S4. However, I am encountering difficulties in making the website look like it is on a mobile phone w ...

csshtmlmobilescreen

Is there a way to insert a clickable hyperlink in the text of a MessageDialog?

I am currently working on MessageDialog code that looks like this: MessageDialog dlg = new MessageDialog("None of the images you selected contain location information. You can add your own after downloading http://exifpilot.com/"); await dlg.ShowAsync(); ...

c#htmlhyperlinkwindows-store-appsmessagedialog

Is there a way to modify the values of a field for all items in a Django queryset at once?

Is there a way to update the 'volume' field by adding a specific amount (change_by) for all objects in a queryset? queryset = QueueStatusModel.objects.all() queryset.update(volume=F('volume') + change_by) I tried the above code but it ...

pythondjangodjango-queryset

Creating consistent image sizes using Bootstrap or pure CSS styling

I've been attempting to create 6 images that are all responsive and the same size. I've tried using just CSS and also tried using bootstrap cards, but I can't seem to achieve the desired result. I've experimented with flexbox, grids, s ...

cssimagebootstrap-5responsivesizing

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...

cssreactjstypescriptmaterial-uitextfield

How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance. Below is the table data extracted from index.html.erb: <table class="table"> <thead> <tr> <th>Area& ...

htmlcssruby-on-railsrubybootstrap-4

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

htmlcss

Django's additional features: unavailable commands (such as graph_models)

I am facing an issue with installing django-extensions, graphviz, and pygraph on my system. Despite following the necessary steps on Ubuntu, I am unable to proceed. Here's what I have done so far: sudo apt-get install graphviz libgraphviz-dev graphvi ...

pythondjangographvizpygraphviz

Converting XML hierarchy into a flat HTML table using XSLT

Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...

htmlxmlxslt

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

No data returned in AJAX response while trying to connect to a RESTful service

After creating a WCF REST service that returns a JSON response like {"Id":10,"Name":"Peter"}, I noticed that when trying to access it using the provided HTML5 code snippet, the status returned is always 0. Can anyone help me figure out what might be caus ...

ajaxhtmlrest

Using PHP to create multi-dimensional arrays and display them in a HTML table

Need help with this issue: Here is the array I'm working with: $tabel3 = array ( array ( "progdas" => "Java", "sks" => "3", "prior" => "2" ), array ( "progdas" => "C#", "sks" => "6", "prior" => "1" ), array ( "mat" => "Dasar", ...

phphtmlarrayshtml-table

Presenting the correct error notification if the JSON data fails to load in an HTML webpage

Here is a sample JSON data: [ { "componentid": 4, "displayImageUrl": "https://via.placeholder.com/350x200", "title": "theme", "shortdesc": "to set theme for different applications" }, { "componentid": ...

javascripthtmljson

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

htmlcssreactjsbootstrap-4bootstrap-multiselect

Tips for accessing DRF Forms information during a POST request

After creating a class-based view in views/users.py where the POST method is supposed to send form data to the serializer for validation and user creation, I'm encountering a frustrating issue. Instead of returning the user data as expected, I keep ge ...

djangoformsdjango-rest-framework

Is it possible to implement an automatic scrolling functionality in this code snippet?

https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0110 Stumbled upon some interesting code to tinker with and came across this piece. Attempted to search online for solutions, but my grasp on React (or maybe Java?) is close to zero. Tried following guid ...

javascripthtmlcssreactjs

How to position a dropdown menu to the right of a textbox in a Bootstrap form

Seeking assistance with customizing my accordion. I have a flex-row textbox with icons on the right, and I want to incorporate a menu, as depicted in the image linked below: Accordion Image Below is the code snippet: <html> <head> <s ...

htmlcssbootstrap-5

The nested ThemeProvider takes priority over the theme's style definitions

Is there a way to render a component and then apply additional rendering using useEffects in React? The issue I am facing is that when I have a component with a specific theme, each useEffect call ends up overriding the style of the original component wit ...

cssreactjsmaterial-uithemeprovider

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

javascripthtmlvue.js