[Answered ]-Can I use Django in a way that I can change CSS variables?

by

1👍

✅

You can use inline CSS to change width, like

<div class="container">
  <h2 class="my-skills">My Skills</h2>
  <div class="bar-1">
  <div class="title">HTML5</div>
  <div class="bar" data-width="65%">
    <div class="bar-inner1" style="width: {{ progress|default:0 }}%;">

    </div>
    <div class="bar-percent">{{ progress|default:0 }}%</div>
  </div>
  </div>

Here you should need to set the width of the parent div in some ‘px’ and the progress’s background colour will be correct according to its percentage

.bar{
  width: 500px;
  height: 35px;
  background: #acacac;
  border-radius: 5px 0 0 5px;
}
.bar-inner1 {
  height: 35px;
  background: #db3a34;
  border-radius: 5px 0 0 5px;
}

If that progress variable is not passed in the context then the value there should be None to replace that with 0 I used a predefined template tag default

👤Pulath Yaseen

0👍

You can use inline CSS for that. Just use in inline css same you use in HTML.

👤Tanjid

0👍

You can use Django to generate the initial width of the progress bar, using Context data and Template logic, but once the page is sent to the client Django can’t influence it anymore..
You’d have to use Javascript/Jquery and if you really need some value from Django you’d ping the server with Ajax or refresh the page.

👤Nealium

Leave a comment