CODEWITHSUNDEEP
pythonhtmlcssdjango
Daniel Smith
Daniel Smith

Reputation: 39

Can I use Django in a way that I can change CSS variables?

I am creating a personal website and I have a progress bar that has been done in css and html.

in order to control the progress bars all I need to do is change a variable(width). This is the code for one bar:

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

This is the corresponding html that is affected by this css:

<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">

    </div>
    <div class="bar-percent">65%</div>
  </div>
  </div>

How would I use Django to change the variable width?

I have looked through documentation and tutorials but I cannot seem to work it out.

Upvotes: 1

Views: 180

Answers (3)

Pulath Yaseen
Pulath Yaseen

Reputation: 415

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

Upvotes: 1

Nealium
Nealium

Reputation: 2268

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.

Upvotes: 0

Tanjid
Tanjid

Reputation: 16

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

Upvotes: 0

Related Questions