How to customize CSS based on the specific Django app you are using

I am new to Django and currently customizing the admin section. I want to change the CSS based on the app I am working with. Is this possible? I've noticed that the system uses the CSS from the first static folder it finds. Is there a workaround for this?

I have tried creating a static folder in each app, but the chosen CSS is always from the first one.

Even when following this method, the app_name variable remains empty, even within the admin site. The default blue CSS is always loaded.

The file I'm working with is 'portale_ict/templates/admin/base_site.html'

{% extends "admin/base.html" %}
     {% block title %}{% if subtitle %}
          {{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}
     {% endblock %}

     {% block branding %}
          <h1 id="site-name"><a href="{% url 'admin:index' %}">Portale ICT Administration</a></h1>
     {% endblock %}

     {% load i18n static %}

     {% block extrastyle %}
          <h1>{{ app_name }}</h1>
          {% if app_name == 'ict' %}
               <link rel="stylesheet" type="text/css" href="{% static 'admin_color_green.css' %}"/>
          {% elif app_name == 'ins' %}
               <link rel="stylesheet" type="text/css" href="{% static 'admin_color_purple.css' %}"/>
          {% endif %}
     {% endblock %}

     {% block nav-global %}
{% endblock %}

The current setup loads the green CSS all the time, which is not my desired outcome:

{% extends "admin/base.html" %}
     {% block title %}{% if subtitle %}
          {{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}
     {% endblock %}

     {% block branding %}
          <h1 id="site-name"><a href="{% url 'admin:index' %}">Portale ICT Administration</a></h1>
     {% endblock %}

     {% load i18n static %}

     {% block extrastyle %}
          <link rel="stylesheet" type="text/css" href="{% static 'admin_color_green.css' %}"/>
     {% endblock %}

     {% block nav-global %}
{% endblock %}

Here is the structure

Appreciate any help or suggestions. Thank you.

Answer №1

To enhance the functionality of a specific app, you have the option to include {% block script %}{% endblock %} and {% block style %}{% endblock %} within the body of the layout.html file located in the templates folder. By utilizing these tags when creating a new template, you can seamlessly insert code into the header section of the HTML page. This allows for the inclusion of file links, JavaScript, and CSS directly within the specified app's templates. For more detailed guidance on this topic, please refer to this resource.

Additionally, it is advisable to centralize your main CSS file to be shared across multiple templates within the same app. Ideally, each app should have its own dedicated templates folder to maintain organizational clarity.

It is worth noting that customizing styles for the Django-admin app may pose a greater challenge due to the disparate location of its template files. As a novice user, deciphering the intricate structure of these files may seem daunting. However, if you encounter difficulties in this aspect, you can seek assistance from resources like this reference.

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

Error occurred in Django while attempting to close socket: [Errno 48] Address is already in use

By mistake, I created an endless loop while making an API call. The situation got out of control and I had to forcibly terminate it using [control + C]. Now, whenever I try to run the command $ python manage.py runserver I receive the following message: ...

unusual problems with absolute positioning in CSS

I've run into a problem with absolute positioning in my CSS. Oddly, IE 10+ displays correctly, but Chrome gets distorted. See the images below: Any advice would be appreciated. (This distortion seems to have started after the Chrome 52 update) IE ...

Is it possible to hide a form field in django forms while still setting a default value for it?

When working with a forms.ModelForm to assign attributes to a model, I have encountered a situation where I need to set a default value. However, I do not want to specify the default value in the model class itself. Additionally, I want to ensure that the ...

What is the process for incorporating a Facebook account and friend list into a Pinax Django project?

Looking to start a project using Pinax social project as a base. I'm interested in enabling users to login with their Facebook accounts, not just using Facebook information for signing up on my site, but also importing their existing Facebook friend l ...

Advantages of incorporating CSS modules into React/Vue development

I am curious about the advantages of incorporating CSS Modules into projects with React/Vue. At my workplace, developers currently utilize the following approach during development: return ( <div className={styles.User}> <div classNam ...

Expand picture when grid is selected

I am facing a challenge with my thumbnail grid. I want to enlarge an image slightly without disrupting the layout of the grid. I have experimented with different approaches, first focusing on displaying the enlarged image and then on maintaining the fluid ...

In Django, I want to create a function that calculates the prices of items without the need to save them in the database

I am in need of a function that can calculate the prices of items without the need to store them in a database, as the prices of these items change on a daily basis. I intend to scrape the price of the day and calculate the item prices based on this value. ...

Pictures are not appearing correctly when utilizing the img-fluid class

Issues occur when I apply the "img-fluid" bootstrap class to my images, as they fail to appear on the page and are set at 0x0 pixels in size upon inspection. This is the HTML code: <div class="col"> <div class="row no-gutters"> &l ...

What is the best way to resize an image to fit its surroundings within a nested box?

Have you ever heard of a website called SPAM? It has a unique homepage that I want to replicate using JavaScript, jQuery, and some CSS. My main challenge is figuring out how to adjust the image size to match the center box on the page. I want to create th ...

Creating an eye-catching loading animation for page content using jQuery and CSS

Many websites incorporate animations to enhance user experience when content loads in the background. LinkedIn is one example of a site that features a nice animation during content loading. Below is a screenshot for reference, showcasing the type of anima ...

"What is the best way to use JavaScript to dynamically modify the hover color of a button

I am looking to customize the hover color of all buttons on my website to align with the overall theme. The challenge is that I need the hover color to vary based on the page it originates from. I have successfully identified the referring page, but I am s ...

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

Accordion Widget in Bootstrap fails to initiate with proper icon

I recently designed a webpage showcasing different parts of a privacy policy. Using Bootstrap and its accordion feature, I successfully displayed the information with standard icons. However, I encountered an issue where the accordion initially loads with ...

Tips for preventing automatic sliding in a bootstrap 4 carousel on mobile with JavaScript or other methods

Can someone assist me in stopping my carousel from auto-sliding on mobile devices only? I have attempted solutions from similar queries on this platform, but they have not worked for me. Any suggestions would be greatly appreciated. Below is an example of ...

The issue of IE 6 not properly displaying a pop-up div with dynamic data when set to a width of 70%

I am trying to create a pop-up div with dynamic data that is centered on the screen. I have set the height to 300px, width to 70%, and enabled vertical scrolling. When viewing in IE7/IE8, the div appears as intended, centered on the screen with the specif ...

Prevent the hover() effect from affecting all div elements at once

I am aiming to achieve a function where hovering over a div with the "rectangle" class will display another div with the "description" class. Initially, the description div will have a display value of "none", but upon hovering, it should become visible. ...

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle) body { font-family: Arial; font-size: 13px; } a { text-decoration: none; color: #515151; } a:before { font-family: "Font Awesome 5 Free"; content: "\f07a"; di ...

CSS Table columns are set to have a fixed width for the first and last columns, while the middle two columns have dynamic widths

I was able to create a table layout like this: fixed - dynamic(50%) - dynamic(50%) - fixed http://jsfiddle.net/ihtus/ksucU/ Now, I'm wondering how to achieve this layout instead: fixed - dynamic(30%) - dynamic(70%) - fixed This is the CSS code I c ...