added ability to change colors of the site

forms.py

@@ -6,3 +6,23 @@ class LogoForm(forms.Form):
     namesystem = forms.CharField(max_length=30, label="Название системы", required=False)
     logo = forms.FileField(label="Логотип")
     logo.widget.attrs.update({'accept':'.png, .svg, .ico'})
+
+class ColorsForm(forms.Form):
+    btnBg = forms.CharField(label='Цвет кнопок', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    btnTxt = forms.CharField(label='Цвет текста кнопок', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    btnSuccessBg = forms.CharField(label='Цвет кнопок успеха', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    
+    btnSuccessTxt = forms.CharField(label='Цвет текста кнопок успеха', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    btnDangerBg = forms.CharField(label='Цвет текста кнопок предупреждения', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    
+    btnDangerTxt = forms.CharField(label='Цвет текста кнопок предупреждения', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    
+    pillsBg = forms.CharField(label='Цвет плашек в меню', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    pillsTxt = forms.CharField(label='Цвет текста плашек в меню', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    linksTxt = forms.CharField(label='Цвет текста ссылок', max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+

static/design_template/colors.css

@@ -0,0 +1,42 @@
+:root{
+  --btn-bg-color: #479FF8;
+  --btn-txt-color: white;
+  --pills-bg-color: #0d6efd;
+  --pills-txt-color: white;
+  --links-txt-color: #0d6efd;
+  --btn-success: #198754;
+  --btn-success-txt: white;
+  --btn-danger: #dc3545;
+  --btn-danger-txt: white;
+}
+
+.btn-primary, .btn-outline-primary{
+  background-color: var(--btn-bg-color);
+  color: var(--btn-txt-color);
+  border-color: var(--btn-bg-color);
+}
+
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
+  background-color: var(--pills-bg-color);
+  color: var(--pills-txt-color);
+}
+
+a{
+ color: var(--links-txt-color); 
+}
+
+.nav-link{
+  color: var(--links-txt-color)
+}
+
+.btn-success, .btn-outline-success{
+  color: var(--btn-txt-color);
+  background-color: var(--btn-success);
+  border-color: var(--btn-success);
+}
+
+.btn-danger, .btn-outline-danger{
+  color: var(--btn-danger-txt);
+  background-color: var(--btn-danger);
+  border-color: var(--btn-danger);
+}

templates/admin/base.html

@@ -104,8 +104,6 @@
                 {% endfor %}
             {% endif %}
 
-            {% block site-settings %}{% endblock %}
-
             <ul class="navbar-nav ml-auto">
 
                 {% if jazzmin_settings.show_ui_builder %}
@@ -312,13 +310,25 @@
                             {% endfor %}
                         {% endblock messages %}
                         <div class="row">
-                            {% block content %} {% endblock %}
+                          <div class="col-lg-9 col-12">
+                            <div class="row">
+                              <div class="col-md-6 col-sm-12">
+                                <div class="card text-center">
+                                  <div class="card-header">
+                                    <h5 class="m-0">Дополнительные настройки системы</h5>
+                                  </div>
+                                  <div class="card-body">
+                                    {% block site-settings %}{% endblock %}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          {% block content %} {% endblock %}
                         </div>
                     </section>
                 </div>
             </div>
-
-
         {% endblock %}
     </div>
 

templates/admin/base_site.html

@@ -8,6 +8,7 @@
 		<link rel="shortcut icon" href="{% static 'SharixAdmin/static/SharixAdmin/img/logo.ico' %}" />
 {% endblock %}
 {% block site-settings %}
-<a class="nav-link active" href="{% url 'design:settings' %}">Настроить систему</a>
+<a class="btn btn-outline-info" href="{% url 'design:settings' %}">Загрузить логотип</a>
+<a class="btn btn-outline-info" href="{% url 'design:colors' %}">Настроить цвета</a>
 {% endblock %}
 

templates/admin/change_colors.html

@@ -0,0 +1,37 @@
+{% extends 'admin/base_site.html' %}
+
+{% block title %}Настройка цвета{% endblock %}
+
+{% block content %}
+  <form method="POST" action="">
+    {% csrf_token %}
+    <div class="input-group mb-3">
+      <label for="{{form.btnBg.id_for_label}}">{{form.btnBg.label}}: </label>{{form.btnBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnTxt.id_for_label}}">{{form.btnTxt.label}}: </label>{{form.btnTxt}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnSuccessBg.id_for_label}}">{{form.btnSuccessBg.label}}: </label>{{form.btnSuccessBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnSuccessTxt.id_for_label}}">{{form.btnSuccessTxt.label}}: </label>{{form.btnSuccessTxt}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnDangerBg.id_for_label}}">{{form.btnDangerBg.label}}: </label>{{form.btnDangerBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnDangerTxt.id_for_label}}">{{form.btnDangerTxt.label}}: </label>{{form.btnDangerTxt}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.pillsBg.id_for_label}}">{{form.pillsBg.label}}: </label>{{form.pillsBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.pillsTxt.id_for_label}}">{{form.pillsTxt.label}}: </label>{{form.pillsTxt}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.linksTxt.id_for_label}}">{{form.linksTxt.label}}: </label>{{form.linksTxt}}
+    </div>
+    <button type="submit" class="btn btn-primary">Отправить</button>
+  </form>
+{% endblock %}

urls.py

@@ -8,4 +8,5 @@ app_name = "design"
 urlpatterns = [
     path("", views.upload, name="settings"),
     path("logo.ico", lambda _ : redirect('SharixAdmin/img/logo.ico', permanent=True)),
+    path("colors", views.change_colors, name="colors"),
 ]

views.py

@@ -2,7 +2,7 @@ from django.shortcuts import render
 from django.contrib import messages
 from django.http import HttpResponseRedirect
 from design_template.utils import handle_uploaded_file
-from design_template.forms import LogoForm 
+from design_template.forms import ColorsForm, LogoForm 
 from core import settings
 
 def upload(request): 
@@ -16,4 +16,63 @@ def upload(request):
             return HttpResponseRedirect("/admin") 
     else: 
         form = LogoForm() 
-    return render(request,"admin/upload_logo.html",{'form':form}) 
+    return render(request,"admin/upload_logo.html",{'form':form}) 
+
+def change_colors(request):
+    if request.method == 'POST':
+      form = ColorsForm(request.POST)
+      if form.is_valid():
+        btnBg = request.POST.get('btnBg')  
+        btnTxt = request.POST.get('btnTxt')  
+        btnSuccessBg = request.POST.get('btnSuccessBg')
+        btnSuccessTxt = request.POST.get('btnSuccessTxt')
+        btnDangerBg = request.POST.get('btnDangerBg')
+        btnDangerTxt = request.POST.get('btnDangerTxt')
+        pillsBg = request.POST.get('pillsBg')  
+        pillsTxt = request.POST.get('pillsTxt')  
+        linksTxt = request.POST.get('linksTxt')
+        css = f'''
+:root{{
+  --btn-bg-color: {btnBg};
+  --btn-txt-color: {btnTxt};
+  --pills-bg-color: {pillsBg};
+  --pills-txt-color: {pillsTxt};
+  --links-txt-color: {linksTxt};
+  --btn-success: {btnSuccessBg};
+  --btn-success-txt: {btnSuccessTxt};
+  --btn-danger: {btnDangerBg};
+  --btn-danger-txt: {btnDangerTxt};
+}}
+
+.btn-primary, .btn-outline-primary{{
+  background-color: var(--btn-bg-color);
+  color: var(--btn-txt-color);
+  border-color: var(--btn-bg-color);
+}}
+
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link{{
+  background-color: var(--pills-bg-color);
+  color: var(--pills-txt-color);
+}}
+
+a{{
+color: var(--links-txt-color); 
+}}
+
+.btn-success, .btn-outline-success{{
+  color: var(--btn-txt-color);
+  background-color: var(--btn-success);
+  border-color: var(--btn-success);
+}}
+
+.btn-danger, .btn-outline-danger{{
+  color: var(--btn-danger-txt);
+  background-color: var(--btn-danger);
+  border-color: var(--btn-danger);
+}}
+'''
+        with open("design_template/static/design_template/colors.css", 'r+', encoding='utf-8') as file:
+          file.write(css)
+    else:    
+      form = ColorsForm()
+    return render(request,"admin/change_colors.html", {'form':form})