XenForo Hover efektli kullanıcı postbit tasarımı
Uyumlu XF Sürümleri- 2.3.X
Hover efektli tasarım ile kullanıcı postbit alanını özelleştirin.
Description:
Customize user postbit area with hover effect design.
Öncelikle kullandığınız temanın message_macros şablonuna girin ve aşağıdaki kod bloğunu bulun:
PHP:
<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.solutions AND $user.question_solution_count">
<dl class="pairs pairs--justified">
<dt>{{ phrase('solutions') }}</dt>
<dd>{$user.question_solution_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_display('host', phrase('visit_site'))}</a></dd>
</dl>
</xf:if>
<xf:if is="$extras.custom_fields">
<xf:macro id="custom_fields_macros::custom_fields_values"
arg-type="users"
arg-group="personal"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified" />
<xf:if is="$user.canViewIdentities()">
<xf:macro id="custom_fields_macros::custom_fields_view"
arg-type="users"
arg-group="contact"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified" />
</xf:if>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:if>
<span class="message-userArrow"></span>
</section>
</xf:macro>Aşağıdaki kod ile değiştirin:
PHP:
<xf:if is="$user.user_id">
<xf:set var="$extras" value="{{ property('messageUserElements') }}" />
<xf:if contentcheck="true">
<div class="trxf-userExtras message-userExtras">
<xf:contentcheck>
<xf:if is="$extras.register_date">
<dl class="pairs pairs--justified trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fa fa-calendar" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fa fa-calendar" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ phrase('joined') }}
</dt>
<dd>{{ date($user.register_date) }}</dd>
</dl>
</xf:if>
<xf:if is="$extras.message_count">
<dl class="pairs pairs--justified trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fa fa-comment" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fa fa-comment" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ phrase('messages') }}
</dt>
<dd>{$user.message_count|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.solutions AND $user.question_solution_count">
<dl class="pairs pairs--justified trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fa fa-check-double" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fa fa-check-double" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ phrase('solutions') }}
</dt>
<dd>{$user.question_solution_count|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.reaction_score">
<dl class="pairs pairs--justified trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fa fa-heart" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fa fa-heart" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ 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 trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fa fa-star" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fa fa-star" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ 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 trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fas fa-birthday-cake" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fas fa-birthday-cake" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ phrase('age') }}
</dt>
<dd>{$user.Profile.age}</dd>
</dl>
</xf:if>
<xf:if is="$extras.location && $user.Profile.location">
<dl class="pairs pairs--justified trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fas fa-location" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fas fa-location" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ 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 trxf-pairs-extras">
<dt>
<span class="trxf-icon">
<xf:fa icon="fas fa-sitemap" class="original-icon" aria-hidden="true"></xf:fa>
<xf:fa icon="fas fa-sitemap" class="hover-icon" aria-hidden="true"></xf:fa>
</span>
{{ phrase('website') }}
</dt>
<dd>
<a href="{$user.Profile.website}" rel="nofollow" target="_blank">
{$user.Profile.website|url_display('host', phrase('visit_site'))}
</a>
</dd>
</dl>
</xf:if>
<xf:if is="$extras.custom_fields">
<xf:macro id="custom_fields_macros::custom_fields_values"
arg-type="users"
arg-group="personal"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified trxf-pairs-extras" />
<xf:if is="$user.canViewIdentities()">
<xf:macro id="custom_fields_macros::custom_fields_view"
arg-type="users"
arg-group="contact"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified trxf-pairs-extras" />
</xf:if>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:if>
<span class="message-userArrow"></span>
</section>
</xf:macro>Son olarak aşağıda verdiğim kodu, kullandığınız temanın extra.less şablonuna ekleyin:
Less:
//////////* Hover efektli kullanıcı postbit tasarımı TRXF *///////////
.stats-container:hover {
background-color: var(--color-ebebeb);
}
.stats-container {
display: flex;
align-items: center;
justify-content: space-around;
background: var(--color-white);
border-radius: 10px;
padding: 6px 8px;
margin: 0 auto;
width: 100%;
border: 1px solid var(--color-ebebeb);
padding-top: 6px;
padding-bottom: 6px;
margin-top: 7px;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
color: var(--color-white);
width: 0;
}
.message-userExtras dl {
background-color: #ffffff;
padding: 6px 10px 6px 0;
border: 1px solid #ececec;
border-radius: 4px;
margin-bottom: 3px;
width: 100%;
margin: 0 auto;
margin-top: 2px;
}
.message-userExtras {
font-weight: 600;
}
.original-icon,
.hover-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.25s cubic-bezier(.6, .6, 0, 1);
font-size: 14px;
}
.hover-icon {
color: var(--theme-main-color);
transform: translate(-50%, 150%);
opacity: 0;
}
.trxf-icon:hover .original-icon {
opacity: 0;
transform: translate(-50%, -150%);
}
.trxf-icon:hover .hover-icon {
transform: translate(-50%, -50%);
opacity: 1;
}
.stat-icon {
font-size: 16px;
color: var(--color-6b6b6b);
border: 1px solid var(--color-ebebeb);
}
.stat-indicator {
width: 6px;
height: 6px;
background: var(--theme-success-color);
border-radius: 50%;
margin-top: 5px;
}
.trxf-icon {
position: relative;
display: inline;
padding: 16px;
background: var(--color-f5f5f5);
border-radius: 4px;
text-align: center;
font-size: 13px;
overflow: hidden;
margin-right: 5px;
}
:root {
--color-f5f5f5: #f5f5f5;
--color-white: #ffffff;
--color-ebebeb: #ebebeb;
--color-6b6b6b: #6b6b6b;
--color-727272: #727272;
}
.stat-title {
font-size: 13px;
color: var(--color-6b6b6b);
font-weight: 600;
}
.stat-value {
font-size: 13px;
font-weight: bold;
color: var(--theme-success-color);
font-weight: 600;
}
.stat-value:nth-of-type(2) {
color: var(--color-727272);
}
[data-variation="alternate"] {
.message-userExtras dl {
background-color: #1c1c1c;
border: 1px #1c1c1c;
}
}
[data-variation="alternate"] {
.trxf-icon {
background: #141414;
}
}
/////////////***********///////////////AdminCP - Görünüm ve Diller - Tema özellikleri - Mesajlar bölümünden Mesaj kullanıcı bilgisi blok genişliği ayarını kendinize göre yapılandırmayı unutmayın. (Örn; 170px)
