Adding app stylesheet in Django

I'm a bit unsure about how to incorporate CSS into my HTML. I have an app within my project that has its own template folder, and I would like to include the sample.css file in my HTML.

I think it should be something like this:

<link rel="stylesheet" type="text/css" href="{%  %}">

But I'm not exactly sure what needs to go between {% %}

Here is the current directory structure:

/proj
   /app
      /templates
         sample.css
         sample.html

And here are my template directories:

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR,'templates'),
    os.path.join(BASE_DIR,'home/templates'),
    os.path.join(BASE_DIR,'gallery/templates'),
    os.path.join(BASE_DIR,'contact/templates'),
    os.path.join(BASE_DIR,'aboutme/templates'),
)

If you need any additional information, please feel free to ask!

Updated directory structure:

/proj
   /app
      /static
         /css
            sample.css
      /templates
         sample.html

Answer №1

Stylesheets and script files, as well as images, are categorized as static files.

The common method is to utilize the django.contrib.staticfiles built-in django app for managing static files.

If you configure the app correctly, this is how your link would appear:

<link rel="stylesheet" type="text/css" href="{% static 'sample.css' %}">

Answer №2

According to @alecxe's suggestion, make sure to organize them in a directory labeled as "static" and add these details into your settings file.

STATIC_URL = '/static/'

# Extra places where static files are stored
STATICFILES_DIRS = (
    # Insert paths here, for instance "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Remember to input absolute paths rather than relative ones.
)

# Collection of finder classes that have the ability to locate static files in
# different directories.
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

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 experiencing issues with modal contents extending beyond the modal on smaller screens?

I recently installed a modal plugin called blockUI for my image uploading needs. Although I have styled and positioned everything accordingly, I am facing an issue: Whenever I resize the browser screen, switch to my iPhone, or use another screen, some con ...

Need jQuery solution for changing CSS in numerous locations upon hover

Currently, I am working on a WordPress website and I am trying to figure out how to change the CSS color of a side navigation element when a remote image is hovered over. In a typical scenario, I would accomplish this using CSS by assigning a hover class ...

How do I create a sliding dropdown notification bar?

Can anyone provide some guidance on how to create a sliding dropdown section for my homepage, similar to the one on this website: . (Please note, be cautious of potential malware) I'm interested in replicating the dropdown section that says "call for ...

Django: No matching query exists and an error has been improperly configured in django.core.exceptions.ImproperlyConfigured

After successfully developing an app using SQLite, I needed to switch to MySQL for production purposes. I installed MySQL along with the python client and updated my settings.py file as follows: DATABASES = { 'default': { 'ENGI ...

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image https://i.sstatic.net/UJEG8.png HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot ...

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

"Crafting sleek and polished titles using HTML and CSS - A step-by-step guide

I've noticed an increasing number of websites that feature incredibly slick headlines, such as the ones on this site: How do these websites achieve this effect? Are there any subtle hints to look out for? I once heard about a technique involving Fla ...

Challenges associated with integrating PayPal server

I'm encountering issues with a web project I'm developing. The payment functionality is working fine, but the problem lies in just one line of code. I am attempting to store the names of purchased products (courses, in this case) in a billing sys ...

Efficiently adjusting the height of a sticky sidebar

I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, set ...

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

Customize button appearance within mat-menu in Angular versions 2 and above

Is there a way to style my mat-menu to function similar to a modal dialog? I am having difficulty with the styling aspect and need advice on how to move the save and reset buttons to the right while creating space between them. I have attempted to apply st ...

Prevent table headers from scrolling in Bootstrap Vue by following these steps

Just starting out with bootstrap vue and I've been using version 1.4 for my application. I've utilized b-table for displaying my data, but I'm encountering a problem where the table headers also scroll along with the content. I'd like t ...

Looking for a way to customize the auto_now_add feature in Django when using pytest factory

Is there a way to override the sent_at attribute in pytest factory when using auto_now_add in django models? It seems that the current setup is not working as expected. class ABC(models.Model): x = models.ForeignKey(X, on_delete=models.CASCADE, relat ...

Encountering a Django Rest nested serialization issue with a many-to-many field

I'm facing an issue with nested serialization (save()). Below are the models code: class SingleReservation(models.Model): hairdos = models.ForeignKey(Hairdo, verbose_name=u'Fryzura/y z cenika') number = models.PositiveIntegerField( ...

The default value set for a Django field when creating a new record in the process of being created

I have an application called "Community Connect". Within this app, I have a model called "Member" that includes a "handle" field. When I add a new member who does not yet have an account, I click on the plus sign next to the "handle" field to access the Ne ...

What is the best way to cut out a portion of a div using CSS?

I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However ...

Experience choppy scrolling in Internet Explorer

Check out my click and drag scrolling Image Viewer here. While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish ...

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...