آموزش ایجاد باکس اطلاعیه ساده و زیبا

سلام دوستان
شما با استفاده از این آموزش میتونین یک باکس اطلاعیه ساده و زیبا ایجاد کنین.
برای انجام اینکار ابتدا باید کد زیر رو به قالب Extra.less اضافه کنین.

/*xenforo */
.xengentr-text {
    color: @xf-chromeTextColor;
    margin-left: 85px;
    text-align: center;
    margin-top: 20px;
    width: 87.5%;
}

.xengentr-i{
    float: left;
    margin-top: 9px;
    width: 60px;
    height: 60px;
    text-align: center;
    display: block;
    border-radius: 50%;
    background-color: @xf-paletteColor5;
    border: @xf-paletteColor5 3px solid;
}
.xengentr-i i{
    line-height: 60px;
    font-size: 26px;
}

.xengentr-t{
    margin-left: 74px;
    padding: 8px;
    border-radius: 4px;
    background-color: @xf-paletteColor5;
    position: relative;
    border: @xf-paletteColor5 1px solid;
}
.xengentr-t:before{
    top: 10px;
    left: -18px;
    position: absolute;
    display: block;
    content: '';
    border-style: solid;
    border-width: 18px 0 0 18px;
    border-color: @xf-paletteColor5 transparent;
}
.xengentr-t h3,.xengentr-t p{
    margin: 0;

}
.xengentr-t h3{
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 5px;
}
.xengentr-t p{
    font-size: 14px;
    line-height: 21px;
}
/*xffa.ir*/

و بعد از این که قالب "PAGE_CONTAINER" رو پیدا کردین، این کد رو سرچ کنین <div class="p-body"> و کد زیر رو بالای همین کد قرار بدین.

<!--XenGENTR DUYURU ALANI-->
     
        <div class="xengentr-text">
            <span class="xengentr-i"><i class="fad fa-bullhorn"></i></span>
            <div class="xengentr-t">
                <h3>What is Lorem Ipsum?</h3>
                <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
             
            </div>
        </div>

 

[XF Father]

سلام
قابلیت بسیار کاربری و مفیدیه.
اما متاسفانه با زنفورو 2.2 مشکل داره.
اگر میتونید یا کسی دیگه بلده ، این رو برای 2.2 ارتقا بده.
سپاس