با سلام برای اضافه کردن پیشرفت پروژه ها یا همون ( Progress Bar ) ابتدا باید افزونه ی IPS4 php Text Widget رو نصب و فعال کنید. بعد از فعال سازی به قسمت زیر برید
Edit HTML and CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی مورد نظر
و در فایل custom.css در مسیر
CSS > core > front > custom > custom.css
این کدها رو به انتهای اون اضافه کنید.
.container{
width:250px;
display:block;
line-height: 150%;
font-family: comic sans ms,cursive;
}
.progress {
overflow: hidden;
height: 20px;
background-color: #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
margin-bottom: 20px;
}
.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.blue {
background-color: #2D2DC3;
}
.progress-bar.progress-bar-danger.green {
background-color: green;
}
.progress-bar.progress-bar-danger.orange {
background-color: rgb(230, 155, 17);
}
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;
}
ذخیر کنید . و در قسمت مد یریت بلوک ها Custom Text رو به سابد بار اضافه میکنیم در قسمت Widget Contents کد زیر رو وارد میکنیم
<div class="container">
<span id="mytext">نسخه تست متن شماره یک</span>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger red" 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>
و ذخیره میکنیم. برای تغییر عرض باید wide اون رو به در صد وارد کنیم ( مثلا 40 درصد )
style="width: 40%
و در قسمت
<span> Complate 40% </span>
هم متن برای نمایش رو تعیین می کنیم ( مثلا Complate 40% ) و در سر اخر
موفق باشید.