XenForo آموزش ساخت ابزارک پروژه ها در زنفورو

XenForo · Jan 25, 2021

با عرض سلام و احترام

برای انجام این فرآیند مراحل فوق همانند تصویر با ما همراه باشید

1 . progressbar.less : انتخاب نام قالب و الگوی مورد نظر خودمون
2 . کدهای فوق رو در این بخش پیوست کنید

CSS:

.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;
}

3 . کلیک بر روی عبارت ذخیره

لطفا با توجه به تصویر موارد رو اجراء کنیم

6 . در این بخش کد پایین رو در بخش قالب ها بزارید

HTML:

<xf:css src="progressbar.less" />
<div class="container"> 
              
                    <span id="mytext">XnForo.ir</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">انجمن زنفورو</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">مرجع زنفورو رسمی </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">پشتیبانی رسمی زنفورو</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>

سپس بر روی ذخیره کلیک کرده و در صفحه ی اصلی خود ویجت ساخته شده ی خودتون رو می تونید به این شکل مشاهده کنید

امیدواریم این آموزش هم راحت و آسوده بوده باشه برای شما عزیزان
به امید سربلندی و خوشنودی ، با قلبی از آرامش