Django - Template tags inside css file

Question

I'm trying to modify the css of a page based on the PageSetting model that I'm using. I'm allowing the user the ability to change how the theme of a page looks like based on some of the PageSetting attributes.

class PageSettings(SingletonModel):
    theme = models.IntegerField(choices=THEMES,
                                verbose_name=_("Theme"),
                                default=0)
    base_color = RGBColorField(blank=False,
                               verbose_name=_("Base color"),
                               default="bc0000")

    ...

What I would like to do is change some values in my css depending on base_color. Pretty much something like this:

# inside my_theme.css
.side-bar {
  background: {{ pagesetting.base_color }};
  float:left;
  width: {{ pagesetting.sidebar_width}}%

  ...

}

is this acheivble in Django? I know I can do

<div class="sidebar" style='background-color:#{{pagesetting.base_color}};'>

but this makes my html ugly and harder to debug.

You could do it within a <style> tag, but I'm not sure if that's best practice — wpercy
– wpercy, Commented Dec 21, 2015 at 23:45

wpercy · Accepted Answer · 2015-12-21 23:50:27Z

1

You could do it within a <style></style> tag in your view file

<style>
    .side-bar {
       background: {{ pagesetting.base_color }};
       float:left;
       width: {{ pagesetting.sidebar_width }};

       ...

    }
</stlye>

answered Dec 21, 2015 at 23:50

wpercy

10.2k4 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriel Ilharco · Accepted Answer · 2015-12-22 00:05:52Z

1

There is no way to modify the css itself, you'll have to set the properties in the html. I believe a good way to do so is to add a predefined css class to your element. That is, in your css, you'll have one class for each style you want, and you'll add the one you want in your html.

Code example:

<div class={{ my_style_class_red }}>
 ....
</div>

Edit: if you have a large number of options (for example, if you want to customize the size of an element), you should use the <style> tag and modify its parameters with your python variables.

Code example:

<style>
   h1 {color:{{my_color}};}
   p {color:blue;font-size:{{my_font_size}};}
</style>

edited Dec 22, 2015 at 0:05

answered Dec 21, 2015 at 23:53

Gabriel Ilharco

1,6751 gold badge22 silver badges34 bronze badges

3 Comments

wpercy Over a year ago

I thought about this too, but if one of the settings (namely sidebarwidth) is completely customizable then you'd need a semi-infinite number of classes which seems bizarre to me. This would work if you had like four or five different options though.

Gabriel Ilharco Over a year ago

In that case, you should modify the <style> tag, and set the parameters you want using your python variables. In my previous answer, I was assuming you wanted to do change only simple values with a very small number of options.

Gabriel Ilharco Over a year ago

You could also modify the style within the element tag, such as <div style='color:{{my_color}};'>, but as pointed out by @wilbur, you already said you didn't want to use that.

Juan Diego Ramirez · Accepted Answer · 2021-05-23 18:00:28Z

1

do it in label <style> but use "var" in css, so your html does not detect errors

<style>
  :root {
    --color: {{object.color}};
  }
  li:before{
    content: "\2022";
    color: var(--color);

  }
</style>

answered May 23, 2021 at 18:00

Juan Diego Ramirez

5095 silver badges16 bronze badges

Comments

Ragy · Accepted Answer · 2022-02-08 15:48:42Z

0

Had the same issue, for me I had to use style tag inside base.html

<style>
@font-face {
    font-family: "Booter - Zero Zero";
    src: url('../static/fonts/Booter\ -\ Zero\ Zero.woff') format('woff'), url('../static/fonts/Booter\ -\ Zero\ Zero.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

.main-header {
    background-color: rgba(0, 0, 0, .6);
    background-image: url(static/images/header_background.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    padding-bottom: 30px;
}

answered Feb 8, 2022 at 15:48

Ragy

1

Collectives™ on Stack Overflow

Django - Template tags inside css file

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related