xF2 Template Modification How to Make a Progress bar widget

[sarvin_pakzad]

Hi Guys, With this tutorial, you can use non-animated progress bar widget in your forum.

Step 1 ) Create template called "progressbar.less" and add the following codes:

.container{
    width:250px;
    display:block;
    line-height: 150%;
}
.progress {
    overflow: hidden;
    height: 20px;
    background-color: #3b3b3b;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
        margin-bottom: 18px;
}
.progress-bar {
    width: 0;
    height: 100%;
    color: #fff;
    text-align: center;
    background-color: #ee303c;
}
.progress-striped .progress-bar {
            background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-size: 40px 40px;
}
.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar.progress-bar-danger.redz {
    background-color: #e44141;
}
.progress-bar.progress-bar-danger.blue {
    background-color: #4e4ef8;
}
.progress-bar.progress-bar-danger.green {
    background-color: #1f931f;
}
.progress-bar.progress-bar-danger.orange {
    background-color: #b4771b;
}
span#mytext {
    line-height: 22pt;
}
.progress-bar.progress-bar-danger.blue, .progress-bar.progress-bar-danger.red, .progress-bar.progress-bar-danger.green, .progress-bar.progress-bar-danger.orange {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

Step 2 ) create a HTML widget and enter the widget key to "progressbar"( Required ). you can enter a title for it ( Optional ).
Step 3 ) choose one of Display positions ( sidebars recommended )
Step 3 ) choose the widget display condition ( you can leave it empty ). but, if you want to show the widget just for registered members,
enter : $xf.visitor.user_id
and if you want to show the widget for guests too,
enter : !$xf.visitor.user_id
Step 4 ) scroll down and enter the following codes in "template"section:

<xf:css src="progressbar.less" />
<div class="container">  
               
                    <span id="mytext">Python</span>
                   
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger redz" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span>40% </span>
                      </div>
                     
                    </div>

     
                    <span id="mytext">Java Script</span>
                   
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger blue" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span>80% </span>
                      </div>
                     
                    </div>



     
                    <span id="mytext">Auto it</span>
                   
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger green" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 58%">
                        <span>58%  </span>
                      </div>
                     
                    </div>


                   
               
                    <span id="mytext">HTML</span>
                   
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger orange" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span>40% </span>
                      </div>
                     
                    </div>
<p></p>
   
</div>

Done ! You can now customize and edit values if you want <3

Result ===>

 

[A_Joycel]

I don´t understand, i do all the steps and i don´t get the result, is any video explaining this?