ویژه کادر بندی پست بیت ساده(اختصاصی زنفورو)

[XFFA.IR Bot]

سلام دوستان

همنطور که میدونید روی اکثر قالب ها پست بیت استایل خاصی نداره و بصورت ساده نمایش داده میشه ولی ما قراره یاد بگیریم چطور پست بیت خودمون رو کادر بندی کنیم و زیبایی خاصی بهش ببخشیم

ابتدا وارد الگوی message_macros میشم و این کد هارا جستجو میکنیم

        <xf:if is="$user.user_id">
            <xf:set var="$extras" value="{{ property('messageUserElements') }}" />
            <xf:if contentcheck="true">
                <div class="message-userExtras">
                <xf:contentcheck>
                    <xf:if is="$extras.register_date">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('joined') }}</dt>
                            <dd>{{ date($user.register_date) }}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.message_count">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('messages') }}</dt>
                            <dd>{$user.message_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.reaction_score">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('reaction_score') }}</dt>
                            <dd>{$user.reaction_score|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('points') }}</dt>
                            <dd>{$user.trophy_points|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.age && $user.Profile.age">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('age') }}</dt>
                            <dd>{$user.Profile.age}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.location && $user.Profile.location">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('location') }}</dt>
                            <dd>
                                <xf:if is="$xf.options.geoLocationUrl">
                                    <a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
                                <xf:else />
                                    {$user.Profile.location}
                                </xf:if>
                            </dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.website && $user.Profile.website">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('website') }}</dt>
                            <dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
                        </dl>
                    </xf:if>

و با این کد جایگزین میکنیم
[HIDESHOWTOGROUPS=6,5,7]

        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
        </div>
        <xf:if is="$user.user_id">
            <xf:set var="$extras" value="{{ property('messageUserElements') }}" />
            <xf:if contentcheck="true">
                <div class="message-userExtras">
                <xf:contentcheck>
                    <xf:if is="$extras.register_date">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-calendar" />{{ phrase('joined') }}</dt>
                            <dd>{{ date($user.register_date) }}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.message_count">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-comments" />{{ phrase('messages') }}</dt>
                            <dd>{$user.message_count|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.reaction_score">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-thumbs-up fa-flip-horizontal" />{{ phrase('reaction_score') }}</dt>
                            <dd>{$user.reaction_score|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-trophy" />{{ phrase('points') }}</dt>
                            <dd>{$user.trophy_points|number}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.age && $user.Profile.age">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-birthday-cake" />{{ phrase('age') }}</dt>
                            <dd>{$user.Profile.age}</dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.location && $user.Profile.location">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-map-marker" />{{ phrase('location') }}</dt>
                            <dd>
                                <xf:if is="$xf.options.geoLocationUrl">
                                    <a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
                                <xf:else />
                                    {$user.Profile.location}
                                </xf:if>
                            </dd>
                        </dl>
                    </xf:if>
                    <xf:if is="$extras.website && $user.Profile.website">
                        <dl class="pairs pairs--justified">
                            <dt><xf:fa icon="fa-globe" />{{ phrase('website') }}</dt>
                            <dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank"><!-- {$user.Profile.website|url('host', phrase('visit_site'))} --><i class="fa fa-link"></i></a></dd>
                        </dl>
                    </xf:if>

[/HIDESHOWTOGROUPS]

سپس این کد را در قالب extra.less قرار میدیم
[HIDESHOWTOGROUPS=6,5,7]

body .message-cell.message-cell--user {
  flex: 0 0 180px
}
.message-userExtras dl .fa{{ fa_weight() }}{
    //background-color: @xf-paletteAccent2;  
}
.message-userExtras dl{
  padding: 3px 6px 3px 28px;
  margin: 0 0 4px;
  position: relative;
  /*.xf-blockBorder();
  border-radius: 13px;
  background: linear-gradient(0deg, @xf-majorHeadingBg, mix(@xf-majorHeadingBg, @xf-contentBg, 50%));*/
  background-color: @xf-contentBg;
    //border-bottom: @xf-borderSize @xf-borderColorHeavy solid;border-radius: 13px;
}

.message-userExtras dl .fa{{ fa_weight() }},.u-info-style li a i {
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 23px;
  font-size: 13px;
  color: @xf-borderColorFeature;
}

.f-website dd a {
  padding-top: 3px;
  display: inline-block;
}

.userBanner {
  margin-bottom: 10px;
}

.message-main time.u-dt:before {
  .m-faBase();
  display: inline-block;
  .m-faContent(@fa-var-clock);
  margin-right: 3px;
}

[/HIDESHOWTOGROUPS]

نتیجه: