html – Setting a CSS variable in Django


I am creating custom user pages where they are able to change basic features like the font, color, or background color of different link boxes. Currently, I am passing the saved variables from the database to the HTML template but I was wondering if I could pass them into the external CSS style sheet. I am having to do inline CSS styling inside the HTML template. I’d like the link hover effect to stay but whenever I set the background color of the link via inline CSS in my HTML template it will break the hover effect.

Note: Only including part of my index.html file

index.html

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

  <div id="links">
        <a class="link" style="color:{{ linkcolor }}; background-color:{{ linkbc }}; font-family:{{ linkfont }};" href="https://www.instagram.com" target="_blank"><Instagram</a>
style.css

#links {
    max-width: 500px;
    width: auto;
    display: block;
    margin: 20px auto;
}

.link {
    display: block;
    box-shadow: 10px 10px black;
    text-align: center;
    margin-bottom: 20px;
    padding: 17px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 300;
    transition: all .25s cubic-bezier(.08, .59, .29, .99);
    border-radius: 10px;
}

.link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #000000;
    border: none;
}
views.py

def index(request):
    editor = cssEditor.objects.get(pk=1)

    return render(
        request,
        "SocialLinks/index.html",
        {
            "linkcolor":editor.link_color,
            "linkfont":editor.link_font,
            "linkbc":editor.link_bc
        }
    )
models.py

from django.db import models

# Create your models here.

class cssEditor(models.Model):
    link_color = models.CharField(max_length=7, default="#000000")
    link_font = models.CharField(max_length=15, default="Brush Script MT")
    link_bc = models.CharField(max_length=7, default="#F5F5F5")





Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here