کادر بندی اطلاعات کاربری به شکل فوق العاده زیبا ( جدید )

MyAriaMv · 31 اردیبهشت، ۱۴۰۰

سلام و خسته نباشید خدمت همه !

خب تو این آموزش قصد دارم بهتون یاد بدم چجوری مثه عکس زیر یه پست بیت توپ و خفن داشته باشین !

یا به صورت زنده میتونید از انجمن بنده ببینید : https://forum.ariamv.ir/topic/105-کادر-بندی-اطلاعات-کاربری-به-شکل-فوق-العاده-زیبا/

قبل از شروع از کدها و... یه بک آپ ( BackUp ) بگیرید ! که اگه مشکلی پیش اومد و... بتونید برگردونید !

به قسمت شخصی سازی / پوسته ها / ویرایش HTML و CSS برید و کلمه postContainer رو جستجو کنید و کدهای زیر رو با کدهای موجود جایگزین کنید !

{{$idField = $comment::$databaseColumnId;}}
{{$itemClassSafe = str_replace( '\\', '_', mb_substr( $comment::$itemClass, 4 ) );}}
{{if $comment->isIgnored()}}
	<div class='ipsComment ipsComment_ignored ipsType_light' id='elIgnoreComment_{$comment->$idField}' data-ignoreCommentID='elComment_{$comment->$idField}' data-ignoreUserID='{$comment->author()->member_id}'>
		{lang="ignoring_content" sprintf="$comment->author()->name"} <a href='#elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu data-ipsMenu-menuID='elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu-appendTo='#elIgnoreComment_{$comment->$idField}' data-action="ignoreOptions" title='{lang="see_post_ignore_options"}' class='ipsType_blendLinks'>{lang="options"} <i class='fa fa-caret-down'></i></a>
		<ul class='ipsMenu ipsHide' id='elIgnoreComment_{$comment->$idField}_menu'>
			<li class='ipsMenu_item ipsJS_show' data-ipsMenuValue='showPost'><a href='#'>{lang="show_this_post"}</a></li>
			<li class='ipsMenu_sep ipsJS_show'><hr></li>
			<li class='ipsMenu_item' data-ipsMenuValue='stopIgnoring'><a href='{url="app=core&module=system&controller=ignore&do=remove&id={$comment->author()->member_id}" seoTemplate="ignore"}'>{lang="stop_ignoring_posts_by" sprintf="$comment->author()->name"}</a></li>
			<li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=ignore" seoTemplate="ignore"}'>{lang="change_ignore_preferences"}</a></li>
		</ul>
	</div>
{{endif}}

<a id='comment-{$comment->$idField}'></a>
<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox ipsResponsive_pull {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}} {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}} {{if ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid )}}ipsComment_solved{{endif}}'>
	{{if $item->isQuestion() and !$comment->new_topic}}
		{template="postRating" group="topics" app="forums" params="$item, $comment, $votes"}
	{{endif}}

	{{if $comment->author()->hasHighlightedReplies() || ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid ) || $comment->isFeatured() || ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) }}
		<div class='ipsResponsive_showPhone ipsComment_badges'>
			<ul class='ipsList_reset ipsFlex ipsFlex-fw:wrap ipsGap:2 ipsGap_row:1'>
				{{if $comment->author()->hasHighlightedReplies()}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_highlightedGroup'>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->name" raw="true"}</strong></li>
				{{endif}}
				{{if ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid )}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_positive ipsBadge_reverse'><i class='fa fa-check'></i> {lang="this_is_a_solved_post"}</strong></li>
				{{endif}}
				{{if $comment->isFeatured()}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_popular'>{lang="this_is_a_featured_post"}</strong></li>
				{{endif}}
				{{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) }}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_popular'>{lang="this_is_a_popular_post"}</strong></li>
				{{endif}}
			</ul>
		</div>
	{{endif}}

	<div class='cAuthorPane_mobile ipsResponsive_showPhone'>
		<div class='cAuthorPane_photo'>
			{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			{{if $comment->author()->modShowBadge()}}
			<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
			{{elseif $comment->author()->joinedRecently()}}
			<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
			{{endif}}
		</div>
		<div class='cAuthorPane_content'>
			<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_break ipsType_blendLinks ipsTruncate ipsTruncate_line'>
				{template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), TRUE"}
				<span class='ipsMargin_left:half'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span>
			</h3>
			<div class='ipsType_light ipsType_reset'>
				<a href='{$comment->item()->url()->setQueryString( array( 'do' => 'findComment', 'comment' => $comment->$idField ) )}' class='ipsType_blendLinks'>{$comment->dateLine()|raw}</a>
				{{if $comment->ip_address and \IPS\Member::loggedIn()->modPermission('can_use_ip_tools') and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'modcp' ) )}}
					&middot; <a class='ipsType_blendLinks ipsType_light ipsType_noUnderline ipsType_noBreak' href="{url="app=core&module=modcp&controller=modcp&tab=ip_tools&ip=$comment->ip_address" seoTemplate="modcp_ip_tools"}" data-ipsMenu data-ipsMenu-menuID='{$comment->$idField}_ip_menu'>{lang="ip_short"} <i class='fa fa-angle-down'></i></a>
				{{endif}}
			</div>
		</div>
	</div>
<aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone'>
         <div class='author_info'>
<div class="ariamv-container" itemscope="" itemtype="http://schema.org/Person">
 
<div class="cAuthorPane_author ipsType_blendLinks ipsType_break user-ariamvxz" class="pContainer_Button">   

{$comment->author()->link( $comment->warningRef() )|raw}

</div>
  
<span class='ariamv-rank'>
{{if $comment->author()->rank['image'] && $comment->author()->member_id}}
<m data-role='rank-image'>{$comment->author()->rank['image']|raw}</m>
{{endif}}
</span>
  
<div class='cAuthorPane_photo'>
  
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</div>
                        

                        

                        
                        


<div class="ariamv-send-topic">
  
  
<div title="تاپیک ها" data-ipsTooltip class="ariamv-send-topic-container">
<div>
<span class="ariamv-send-topic-t"><i class="fa fa-comments" style="background:#3d9aeb;"></i></span>
</div>
<span style="font-size: 12px;color:#a0afce;"> {{if $comment->author()->member_id}}{{$where[] = "starter_id = " . $comment->author()->member_id;}}
{{$author_topics = \IPS\forums\Topic::getItemsWithPermission( $where, NULL, 0 );}}
{{$topics_count = count($author_topics);}} {$topics_count}  {{endif}}</span>
</div>
  
  
<div title="اعتبار" data-ipsTooltip class="ariamv-send-topic-container">
<div>
<span class="ariamv-send-topic-t"><i class="fa fa-heart" style="background:#46cb0b;"></i></span>
</div>
<span style="font-size: 12px;color:#a0afce;">{$comment->author()->member_posts}</span>
</div>
  
<div title="ارسال ها" data-ipsTooltip class="ariamv-send-topic-container">
<div>
<span class="ariamv-send-topic-t"><i class="fa fa-pencil-square-o" style="background:#585afe;"></i></span>
</div>
<span style="font-size: 12px;color:#a0afce;">{$comment->author()->member_posts}</span>
</div>
</div>                      

<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-user-circle"></i> گروه کاربری : </span>
<span class="ariamv-user-right" style="color:#fff">{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->formattedName" raw="true"}
{{if \IPS\Member\Group::load( $comment->author()->member_group_id )->g_icon }}
{{endif}}</span>
</li>
<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-trophy fa-lg"></i> {lang="members_days_won_count"} :</span>
<span class="ariamv-user-right" style="color:#f5d285;font-weight:700;">{number="$comment->author()->getReputationDaysWonCount()"}</span>
</li>
<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-bell-o" aria-hidden="true"></i> وضعیت : </span>
<span class="ariamv-user-right">{{if $comment->author()->isOnline()}}<i title="آنلاین" data-ipsTooltip class="fa fa-toggle-on" style="color:#46cb0b;font-size: 16px;"></i>{{else}}<i title="آفلاین" data-ipsTooltip class="fa fa-toggle-off" style="color:#e74c3c;font-size: 16px;"></i>{{endif}}</span>
</li>
  
{{if $comment->author()->bday_day AND $comment->author()->bday_month AND $comment->author()->bday_year}}
<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-birthday-cake"></i> سن : </span>
<span class="ariamv-user-right">{$comment->author()->age()}</span>
</li>
{{endif}}
  

<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-eye"></i> آخرین فعالیت : </span>
<span class="ariamv-user-right">{{if $comment->author()->last_activity}}{datetime="$comment->author()->last_activity"}{{else}}{lang="never"}{{endif}}</span>
</li>
  

<li class="ariamv-user">
<span class="ariamv-user-left"><i class="fa fa-sign-in"></i> تاریخ عضویت : </span>
<span class="ariamv-user-right">{datetime="$comment->author()->joined" dateonly="true"}</span>
</li>

<div>               
<div>
</div>
</div>
</div>
</div>
{template="customFieldsDisplay" group="global" app="core" params="$comment->author()"}
  <br>
  
           <div class="ariamv-f-pm">
         <div class="ariamv-f-pm-link">
         {{if \IPS\Member::loggedIn()->member_id != $comment->author()->member_id}}
         {{if \IPS\Member::loggedIn()->member_id != $comment->author()->member_id and ( !$comment->author()->members_bitoptions['pp_setting_moderate_followers'] or \IPS\Member::loggedIn()->following( 'core', 'member', $comment->author()->member_id ) )}}
         {{$memberFollowers = $comment->author()->followers();}}
         {{if member.member_id}}
                 {{if member.following( 'core', 'member', $comment->author()->member_id )}}
                 <a href="{url="app=core&module=system&section=notifications&do=follow&follow_app=core&follow_area=member&follow_id={$comment->author()->member_id}"}" title="{lang="following_this_member"}" data-ipsTooltip class="ariamv-f-pm-container" data-role="followButton" data-ipsHover data-ipsHover-cache='false' data-ipsHover-onclick><i class="fa fa-user-times"></i></a>
                 {{else}}
                 <a href="{url="app=core&module=system&section=notifications&do=follow&follow_app=core&follow_area=member&follow_id={$comment->author()->member_id}"}" title="{lang="follow_this_member"}" data-ipsTooltip class="ariamv-f-pm-container" data-role="followButton" data-ipsHover data-ipsHover-cache='false' data-ipsHover-onclick><i class="fa fa-user-plus"></i></a>
                 {{endif}}
         {{endif}}
         {{endif}}
         {{if \IPS\Member::loggedIn()->member_id && !$comment->author()->members_disable_pm and !\IPS\Member::loggedIn()->members_disable_pm and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'messaging' ) )}}
         <a href='{url="app=core&module=messaging&controller=messenger&do=compose&to={$comment->author()->member_id}" seoTemplate="messenger_compose"}' data-ipsDialog data-ipsDialog-title='{lang="compose_new"}' data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="message_sent"}" title="ارسال پیام به کاربر" data-ipsTooltip class='ariamv-f-pm-container'><i class="fa fa-paper-plane"></i></a>
         {{endif}}
         {{endif}}
</div></div>
</aside>
<div class='ipsColumn ipsColumn_fluid'>
{template="post" group="topics" app="forums" params="$item, $comment, $item::$formLangPrefix . 'comment', $item::$application, $item::$module, $itemClassSafe"}
</div>
</article>

دوباره به قسمت شخصی سازی / پوسته ها / ویرایش HTML و CSS برید و کلمه custom.css رو جستجو کنید و کدهای زیر رو بهش اضافه کنید !

.cAuthorPane {
padding: 10px !important;
}
.author_info {
margin-top: 14px
}
aside.IPSComment_author.cAuthorPane.IPSColumn.IPSColumn_medium {
width: 220px;
}
.ariamv-container {
padding: 2px;
background-color: #fff;
margin: -10px 0px 12px 0px;
}
.ariamv-rank img{
margin-bottom:6px;
}
.ariamv-send-topic {
overflow: hidden;
padding: 8px 0;
margin-top: 6px;
border-radius:24px 0px 24px 0px;
border:none
}
.ariamv-send-topic i{
width: 39px;
height: 39px;
line-height: 36px;
text-align: center;
background: #3d9aeb;
border-radius:66px;
display: inline-block;
color: #FFFFFF;
font-size: 20px;margin-bottom:2px;
}
.ariamv-send-topic-container {
width: 33.3333333333%;
float: left;
}
.ariamv-send-topic-t {
color: #384764;
font-weight:500;
text-transform: uppercase;
font-size: 12px;
}
.user-ariamvxz i{
font-size:16px;
margin-top:-8px
}
.ariamv-user {
display: inline-block;
width: 100%;
color:#68799d;
font-weight:500;
padding: 10px 4px;
border-radius: 6px;
border-bottom: 2px solid #ecf0f1;
margin-right:-4px
}
.ariamv-user:hover {
border-bottom: 2px solid #3d9aeb;
}
.ariamv-ups{
display: inline-block;
width: 100%;
margin-top: 4px;
margin-bottom: 10px;
border-radius: 6px;
}
.ariamv-user-left {
font-size: 12px;
float: right;
text-align: right;
margin-right: 3px;
margin-left: 0;
width: auto !important;
}
.ariamv-user-left i{
color:#a0afce;
opacity:.6;
margin-left:2px;
}
.ariamv-user-right {
float: left;
color:#a0afce;
font-size: 11px;
}
.ariamv-on-off{
color:#15e615
}
.ariamv-f-pm-link {
text-align: center;
}
.ariamv-f-pm {
margin: 4px 0;
}
.ariamv-f-pm-container {
width: 34px;
height: 34px;
line-height: 29px;
margin: 0 2px;
text-align: center;
background: #3d9aeb;
border-radius:66px;
display: inline-block;
color: #FFFFFF;
font-size: 15px;
}
.ariamv-f-pm-container:hover {
color: #FFFFFF;
}

ذخیره کنید و تمام !

فقط اینکه تو دمو ما عکس پروفایل رو با استفاده از یه سری کد و... بزرگ کردیم ! ( اگه مورد استقبال قرار گرفت آموزش بزرگ کردن عکس پروفایل بدون افت کیفیت رو میذارم براتون ! )

امیدوارم که مورد استفاده قرار بگیره !

ویرایش شده 3 خرداد، ۱۴۰۰ توسط MyAriaMv

AnswerCenter.ir · 31 اردیبهشت، ۱۴۰۰

سلام و درود. من انجام دادم متاسفانه به هم ریخت.

۴ دقیقه قبل، AnswerCenter.ir گفته است:

سلام و درود. من انجام دادم متاسفانه به هم ریخت.

محمدآبادی · 31 اردیبهشت، ۱۴۰۰

با سپاس

واسه من هم به همین صورت در اومد:

MyAriaMv · 31 اردیبهشت، ۱۴۰۰

10 ساعت قبل، AnswerCenter.ir گفته است:

سلام و درود. من انجام دادم متاسفانه به هم ریخت.

سلام ، نقل قول پایین توضیح دادم !

9 ساعت قبل، محمدآبادی گفته است:

با سپاس

واسه من هم به همین صورت در اومد:

سلام ، ببخشید بنده کد رو اشتباه گذاشته بودم !

برید پست اول کد رو دوباره کپی کنید و ببینید اوکی شده یا نه ! ( تست کردم ایندفه اوکی بود ! )

ویرایش شده 31 اردیبهشت، ۱۴۰۰ توسط MyAriaMv

محمدآبادی · 1 خرداد، ۱۴۰۰

با تشکر

درست شد؛ فقط یک مشکل هست:

وقتی این کدها رو جایگزین می‌کنم، پست‌های مهمان حذف میشه و این ارور رو به‌جاش نمایش میده:

MyAriaMv · 2 خرداد، ۱۴۰۰

۱۲ ساعت قبل، محمدآبادی گفته است:

با تشکر

درست شد؛ فقط یک مشکل هست:

وقتی این کدها رو جایگزین می‌کنم، پست‌های مهمان حذف میشه و این ارور رو به‌جاش نمایش میده:

سلام !

ممنون بابت اطلاع ، این مشکل هم حل شد ! ( کدهایه جدید جایگزین کدهایه قبلی تو پست اول شدن )

محمدآبادی · 3 خرداد، ۱۴۰۰

با سپاس فراوان ok شد

فقط یک مسئله:

وقتی از طریق: کاربران » نمایه‌ها » گزینه‌های نمایه، گزینه‌ای (مثلاً سایت کاربر) رو اضافه کنیم و حالتِ «نمایش با محتوای ارسالی کاربر» رو روی «نمایش به همه» بذاریم، پس از جایگزین‌کردنِ این کد، دیگه نمایش داده نمیشه!

MyAriaMv · 3 خرداد، ۱۴۰۰

۱ ساعت قبل، محمدآبادی گفته است:

با سپاس فراوان ok شد

فقط یک مسئله:

وقتی از طریق: کاربران » نمایه‌ها » گزینه‌های نمایه، گزینه‌ای (مثلاً سایت کاربر) رو اضافه کنیم و حالتِ «نمایش با محتوای ارسالی کاربر» رو روی «نمایش به همه» بذاریم، پس از جایگزین‌کردنِ این کد، دیگه نمایش داده نمیشه!

سلام ! چون خودم از custom field استفاده نمیکنم این مورد رو یادم رفته بود کدشو اضافه کنم !

کدایه پست اول آپدیت شد ! تست کنید ببینید اوکی شده !؟

محمدآبادی · 3 خرداد، ۱۴۰۰

۳۵ دقیقه قبل، MyAriaMv گفته است:

کدایه پست اول آپدیت شد ! تست کنید ببینید اوکی شده !؟

درودها 🌺 بسیار عالی

فقط اگه استایلش هم با سایر گزینه‌ها یکی میشد بهتر بود

الآن رنگش مشکل و وسط‌چین هست و یک نقطه خارج کادر بهشون اضافه میشه

MyAriaMv · 3 خرداد، ۱۴۰۰

۲۱ دقیقه قبل، محمدآبادی گفته است:

درودها 🌺 بسیار عالی

فقط اگه استایلش هم با سایر گزینه‌ها یکی میشد بهتر بود

الآن رنگش مشکل و وسط‌چین هست و یک نقطه خارج کادر بهشون اضافه میشه

خب اونارو دوباره باید واسشون استایل نوشت و...

برای حذف اون دایره هم میتونی از کد زیر استفاده کنی !

.cAuthorPane li {list-style-type: none;color:#000;}

با تغییر 000 هم میتونی رنگ مورد نظرت رو بدی بهش !

ویرایش شده 3 خرداد، ۱۴۰۰ توسط MyAriaMv

ورود

کادر بندی اطلاعات کاربری به شکل فوق العاده زیبا ( جدید )

ارسال‌های توصیه شده

MyAriaMv 3

لینک ارسال

به اشتراک گذاری در سایت های دیگر

AnswerCenter.ir 18

لینک ارسال

به اشتراک گذاری در سایت های دیگر

محمدآبادی 81

لینک ارسال

به اشتراک گذاری در سایت های دیگر

MyAriaMv 3

لینک ارسال

به اشتراک گذاری در سایت های دیگر

محمدآبادی 81

لینک ارسال

به اشتراک گذاری در سایت های دیگر

MyAriaMv 3

لینک ارسال

به اشتراک گذاری در سایت های دیگر

محمدآبادی 81

لینک ارسال

به اشتراک گذاری در سایت های دیگر

MyAriaMv 3

لینک ارسال

به اشتراک گذاری در سایت های دیگر

محمدآبادی 81

لینک ارسال

به اشتراک گذاری در سایت های دیگر

MyAriaMv 3

لینک ارسال

به اشتراک گذاری در سایت های دیگر

کاربران آنلاین در این صفحه 0 کاربر

صفحه اصلی

بخش دریافت

فعالیت ها

فهرست بخش ها

پشتیبانی و پرسش و پاسخ برای حل مشکلات