Logout button is not styled with django 4.1

[merwok]

Python version
3.11, but irrelevant

Django version
4.1.5

Package version
0.24.2

Current behavior (bug description)
With django 4.1, the logout link in the top bar becomes a form, which is not styled like the other items.

Expected behavior
Should look like the other items 🙂

[merwok]

I see it working now 😮

[fabiocaccamo]

Caching?

[saymoncoppi]

Hello Fabio!
I'm using Django 4.1.5 and django-admin-interface v0.26. This behavior also appears here.

[fabiocaccamo]

@saymoncoppi clear the cache / force reload

[saymoncoppi]

Nop. still not working. Could you help me?

[fabiocaccamo]

@saymoncoppi I'm using this library on more than one project running on latest django version and it works fine.

Are you using STATICFILES_STORAGE = "django.contrib.staticfiles.storage.ManifestStaticFilesStorage" ?

[saymoncoppi]

Hello Fabio! Im also using with another projects but witholder django versions. For this current project, I'm using the newest libs. My settings file has these entries: STATIC_URL = "/static/" STATIC_ROOT = BASE_DIR / "static" STATICFILES_DIRS = [os.path.join(BASE_DIR, "static/admin_override")] Em seg., 28 de ago. de 2023 às 07:35, Fabio Caccamo < ***@***.***> escreveu:

…

@saymoncoppi <https://github.com/saymoncoppi> I'm using this library on more than one project running on latest django version and it works fine. Are you using STATICFILES_STORAGE = "django.contrib.staticfiles.storage.ManifestStaticFilesStorage" ? — Reply to this email directly, view it on GitHub <#246 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFIJVQY5D3DZGT7X7V74YNDXXRX7BANCNFSM6AAAAAAUELTYQU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[fabiocaccamo]

Could you try to set STATICFILES_STORAGE and re-collect static files?

[saymoncoppi]

Same behavior. if I select the text there it appear showing that the element is in the right place.

[fabiocaccamo]

Have you the same problem with all browsers?
Could you paste here the CSS that would solve the issue?

[saymoncoppi]

The same behavior is happening using Chrome and Edge. I haven't fixed it yet. I´ll try here...

[saymoncoppi]

Hello @fabiocaccamo!

I´m just sharing the solution applied here. IDK if is a better one but works fine, ok?

I checked out the source code from both projects and made a custom base_site.html mixing with that content to handle this issue.

I'm proud of this LOL! Take a look...

{% extends "admin/base_site.html" %}
{% load i18n %}
{% block userlinks %}
    {% if site_url %}
        <a href="{{ site_url }}">{% translate 'View site' %}</a> /
    {% endif %}
    {% if user.is_active and user.is_staff %}
        {% url 'django-admindocs-docroot' as docsroot %}
        {% if docsroot %}
            <a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /
        {% endif %}
    {% endif %}
    {% if user.has_usable_password %}
    <a href="{% url 'admin:password_change' %}">{% translate 'Change password' %}</a> /
    {% endif %}
    <form id="logout-form" method="post" action="{% url 'admin:logout' %}">
        {% csrf_token %}
        <button type="submit" style="color:#666">{% translate 'Log out' %}</button>
    </form>

    {% load admin_interface_tags %}
    {% get_admin_interface_theme as theme %}
    {% if theme.language_chooser_active %}
        {% get_admin_interface_languages as languages %}
        {% include "admin_interface/language_chooser.html" %}
    {% endif %}
{% endblock %}

Sources:
https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/base.html
https://github.com/fabiocaccamo/django-admin-interface/blob/main/admin_interface/templates/admin/base_site.html

[fabiocaccamo]

Why you have extended the html template to solve a css problem?

Have you understood/isolated the cause?

[saymoncoppi]

Hello Fabio!

You are right about exploring the reason why I did that. Seems like a bite over to fix a CSS issue.
But since I could not fix the issue earlier I tried this action to help me to go further.
And finally due you're smarter than me about the issues, you forced me to chase another fix using CSS and less content into base_site.

made a css\extra_base_site.css

#logout-form button {
  color: #747474;
}

#logout-form button:hover {
  color: #333333;
}

and apply to template\base_site.html

{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/extra_base_site.css' %}"    />
{%endblock%}

Got it fixed in a smarter way, tks...

But, seems like maybe has another way to fix it, Could you check if the CSS class was missing from:
https://github.com/fabiocaccamo/django-admin-interface/blob/main/admin_interface/static/admin_interface/css/admin-interface.css

Let me know what you discover, ok?
Tks again for all your support.

[fabiocaccamo]

This is was what I needed, thank you for investigating the problem, I will enforce the colors using css variables in the next release.

#logout-form button {
  color: #747474;
}

#logout-form button:hover {
  color: #333333;
}

[saymoncoppi]

Great!!! Now I can be proud. lol

since I was trying to improve the appearance of userlink block I realised that we could also adjust the CSS of language-selector for a better experience on different media sizes. I´ll open a new issue to share there properly,

Tks again!