How do I align my profile pictue correctly in the y-axis?

Using Django The Admin
1

Greeting everyone!

I am trying to add user profile pictue in django admin
Django admin site header with profile picture

So what I did is created a o2o field with BASE_AUTH_USER named Userprofile

So now I am overriding the django default admin template
by this approach

base.html

{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
<!-- IGNORE THE HEAD PART -->
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
  data-admin-utc-offset="{% now "Z" %}">
<a href="#content-start" class="skip-to-content-link">{% translate 'Skip to main content' %}</a>
<!-- Container -->
<div id="container">

    {% if not is_popup %}
    <!-- Header -->
    {% block header %}
    <div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
      </div>
      {% block usertools %}
      {% if has_permission %}
      <div id="user-tools">
        {% if user.userprofile %}
        <img src="{{user.userprofile.avatar.url}}" width="30px" style="border-radius: 100px;" />
        {% endif %}
        {% block welcome-msg %}
        {% translate 'Welcome,' %}
        <strong>{% firstof user.get_short_name user.get_username %}</strong>.
        {% endblock %}
        {% 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">{% translate 'Log out' %}</button>
        </form>
        {% include "admin/color_theme_toggle.html" %}
        {% endblock %}
        </div>
        {% endif %}
        {% endblock %}
        {% block nav-global %}{% endblock %}
    </div>
    {% endblock %}
    <!-- END Header -->
    {% block nav-breadcrumbs %}
      <nav aria-label="{% translate 'Breadcrumbs' %}">
        {% block breadcrumbs %}
          <div class="breadcrumbs">
            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
            {% if title %} &rsaquo; {{ title }}{% endif %}
          </div>
        {% endblock %}
      </nav>
    {% endblock %}
    {% endif %}
<!-- IGNORE THE REST BODY PART -->
</body>
</html>

So how can I center my image in y-axis

I know this is a css issue but still someone please help me.

1 Like
2

Well I fixed it by overriding the css class for #user-tools
Here is the css deceleration

#user-tools{
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

Just add this in a style tag somewhere in the html and the image will be centered

Here is the result

django admi navbar with profile picture

1 Like