Pass variable to stylesheet to change background color

Using Django Templates & Frontend
1

I have a flexbox with a number of shapes:

CleanShot 2024-09-11 at 09.24.05@2x
CleanShot 2024-09-11 at 09.24.05@2x1098×372 10.4 KB

The background color initially is white, set by a static css file, and changes based on a calculated score from the survey when the results page is entered. I can do that with if statements but it is rather inelegant since each area would require its own set of if statements:

<style>
  {% if shade == 1 %}
    div.item_leadership {
      background-color: rgb(255,0,0);}
  {% elif shade == 2 %}
    div.item_leadership {
      background-color: rgb(255,255,0);}
  {% elif shade == 3 %}
    div.item_leadership {
      background-color: rgb(0,255,0);}
  {% endif %}
</style>

I would like to simply pass the color as a variable so I could use something like:

    div.item_leadership {
      background-color: {{ color }};}

via:

        color = "red" #Some Variable to set color to red, yellow or green
        return render(request, "ISO22301/results.html",context, color)

where “red” would in the final code be a variable set by the score. I used red just to test using a variable in the HTML file to override the static file background color. Instead of rendering ISO22301/results.html it POSTs the data but saves the HTML code to a file.

By looking at the file it downloads it is returning the proper HTML for the ISO22301/results.html page but is not using the variable to apply the new background color; instead something triggers a d/l of the HTML code:

<style>
    div.item_leadership {
      background-color: ;}
</style>

Static File relevant code:

  .item_leadership, .item_context, .item_policy, .item_planning, .item_support, .item_operation, .item_management, .item_improvement {
    width: 8vw;
    height: 14vh;
    padding: 10px;
    align-content: center;
    background-color: white;
    border: 2px solid black;
    
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 2vh;
    border-radius: 15px;
    box-sizing: border-box;
  }
2

You need to do one of a couple of things:

  • Add that css to your page template as a <style> element so that it gets rendered within the context of the page. In this case, you would add the color variable to the context - that’s where the rendering engine gets the data it needs for rendering. (This is the easiest solution.)
  • If you have a more complex situation, you could change your css file to be a template and render it as a template, changing your reference to that css to either be an include or even a reference to a separate url for it instead of accessing it as a static file.
3

Thanks. I just realized I needed to add color variable value to context, not try to pass it via

return render(request, "ISO22301/results.html",context, color)

Sometimes I just default to stupid, as we said in submarines. Now it works.

Oddly, passing a value called color as shown in the code above starts the d/l behavior in Safari or displays the HTML code in Chrome on the Mac, instead of rendering the page.

4

It makes sense if you look at the source for the render function in django.shortcuts

The fourth positional argument in the render call is the content_type attribute for the HttpResponse being generated.

5

Thanks. I’ll take a look. These last 4 months learning python and django have been fun, and your help was great; I really appreciate all your help. I’ve got my project to the point where we can pretty much demo it for feedback,

All that’s left for now is logging the user out after the results are displayed. I never logged myself out to make it easier to troubleshoot.

Next up, learn more about forms. I’ve done the tutorial here and at djangogirls but still need to figure out how to properly render all the table elements and use the radio button widget.