این ارسال پرطرفدار است. sarvin_pakzad 170 ارسال شده در 5 اردیبهشت، ۱۳۹۹ این ارسال پرطرفدار است. اشتراک گذاری ارسال شده در 5 اردیبهشت، ۱۳۹۹ سلام. میخوام براتون ایجاد یه همچین user info panel ( اطلاعات کاربری ) پیشرفته و زیبا رو آموزش بدم. با من همراه باشید. قدم اول ) به ویرایش html/css قالبتون برید . و کلمه postContainer رو جستجو و واردش بشید. تمام کدهای postContainer رو پاک کنید. بله درست شنیدید / بهم اعتماد کنید. CTRL+A بزنید و همشو Delete کنید. من فکر همه جاش کردم. قبل از پاک کردن حتما حتما از کدهاش backup بگیرید که خدای نکرده کدی رو اشتباه وارد کرده باشم یا یادم رفته باشه قالبتون بهم نخوره. قدم دوم ) کد زیر را جایگزین کدهای پاک کردتون بکنید. در واقع همه کدهای زیر رو به 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 {{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 $item->isQuestion() and !$comment->new_topic}} {template="postRating" group="topics" app="forums" params="$item, $comment, $votes"} {{endif}} <div class='cAuthorPane cAuthorPane_mobile ipsResponsive_showPhone ipsResponsive_block'> <h3 class='ipsType_sectionHead cAuthorPane_author ipsResponsive_showPhone ipsResponsive_inlineBlock ipsType_break ipsType_blendLinks ipsTruncate ipsTruncate_line'> {template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), $comment->author()->group['g_id']"} <span class='ipsResponsive_showPhone ipsResponsive_inline'> {template="reputationBadge" group="global" app="core" params="$comment->author()"}</span> </h3> <div class='cAuthorPane_photo'> {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"} </div> </div> <aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone'> <div class='author_info'> <div class="wa_pContainer" itemscope="" itemtype="http://schema.org/Person"> <div class="pContainer_b1" > {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"} </div> {{$coverPhoto = $comment->author()->coverPhoto();}} {{if $coverPhoto->file}} <div class="pc_coverphoto" style="background-image: url('{$coverPhoto->file->url}') !important;"> </div> {{else}} {{endif}} <div class="uipmaster2 cAuthorPane_author ipsType_blendLinks ipsType_break" title="نام کاربری" data-ipsTooltip class="pContainer_Button"> <h> <strong>{$comment->author()->link( $comment->warningRef() )|raw}</strong> </h> </div> <div class="wa_pContainer_b4"> <div class="wa_pContainer_lnk"> {{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§ion=notifications&do=follow&follow_app=core&follow_area=member&follow_id={$comment->author()->member_id}"}" title="{lang="following_this_member"}" data-ipsTooltip class="pContainerLink" 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§ion=notifications&do=follow&follow_app=core&follow_area=member&follow_id={$comment->author()->member_id}"}" title="{lang="follow_this_member"}" data-ipsTooltip class="pContainerLink" 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='pContainerLink'><i class="fa fa-paper-plane"></i></a> {{endif}} {{endif}} </div></div> <div class="wa_pContainer_b2"> <div class="wa_pContainer_b2_1"> <div> <span class="wa_pContainer_b2_m">تاپیک ها</span> </div> <span style="font-size: 15px;">{{$where[] = "starter_id = " . $comment->author()->member_id;}} {{$author_topics = \IPS\forums\Topic::getItemsWithPermission( $where, NULL, 0 );}} {{$topics_count = count($author_topics);}} {$topics_count}</span> </div> <div class="wa_pContainer_b2_1"> <div> <span class="wa_pContainer_b2_m">ارسال ها</span> </div> <span style="font-size: 15px;">{$comment->author()->member_posts}</span> </div> </div> <div class='uipmaster' title="گروه کاربری" data-ipsTooltip class="pContainer_Button">{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 }} <img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'> {{endif}} </div> <li class="userpa"> <span class="leftinfo"><i class="fa fa-heart"></i> اعتبار : </span> <span class="rightinfo" style="color:#fff">{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span> </li> <li class="userpa"> <span class="leftinfo" style="color:#f5d285"><i class="fa fa-trophy fa-lg"></i> {lang="members_days_won_count"} </span> <span class="rightinfo" style="color:#f5d285">{number="$comment->author()->getReputationDaysWonCount()"}</span> </li> <li class="userpa"> <span class="leftinfo"><i class="fa fa-bell"></i> وضعیت : </span> <span class="rightinfo">{{if $comment->author()->isOnline()}}<span class='ifonline'>آنلاین</span>{{else}}<span style='color:#ea5c5c'>آفلاین</span>{{endif}}</span> </li> <li class="userpa"> <span class="leftinfo"><i class="fa fa-exclamation-triangle"></i> اخطارها : </span> <span class="rightinfo">{number="$comment->author()->warn_level"}</span> </li> <li class="userpa"> <span class="leftinfo"><i class="fa fa-eye"></i> آخرین فعالیت : </span> <span class="rightinfo">{{if $comment->author()->last_activity}}{datetime="$comment->author()->last_activity"}{{else}}{lang="never"}{{endif}}</span> </li> <li class="userpa"> <span class="leftinfo"><i class="fa fa-sign-in"></i> تاریخ عضویت : </span> <span class="rightinfo">{datetime="$comment->author()->joined" dateonly="true"}</span> </li> {{if $comment->author()->member_id}} {{if $comment->author()->reputationImage()}} <li class='ipsPad_half'> <img src='{file="$comment->author()->reputationImage()" extension="core_Theme"}' title='{{if $comment->author()->reputation()}}{$comment->author()->reputation()}{{endif}}' alt=''> </li> {{endif}} {template="customFieldsDisplay" group="global" app="core" params="$comment->author()"} {{endif}} <div> <div> </div> </div> </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> قدم سوم ) خوب . بعد از ذخیره تغییرات، وارد custom.css بشید و کدهای زیر رو اضافه کنید. .cAuthorPane { padding: 10px !important; margin-top: 57px } aside.ipsComment_author.cAuthorPane.ipsColumn.ipsColumn_medium { width: 245px; } .wa_pContainer { padding: 2px; background-color: #fff; margin: -10px 2px 15px 2px; } .pContainer_b1 { margin-top: 0px; margin-bottom: 5px; text-align: center; } .pContainer_b1 img { border-radius: 500px; height: 100px; width: 100px; } .pc_coverphoto { margin-bottom: 5px !important; background-color: #FFFFFF !important; background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100% !important; height: 114px; width: 216px; border-radius: 10px; margin: -98px 0 0 0; } .wa_pContainer_b2 { background-color: #6fa066; background-image: url({resource="" app="core" location="global"}); overflow: hidden; padding: 8px 0; border-radius:7px; } .wa_pContainer_b2_1 { width: 50%; float: left; } .wa_pContainer_b2_1 .ipsRepBadge { font-size: 15px; font-weight: normal; } .wa_pContainer_b2_m { color: #f5f5f5; text-transform: uppercase; font-size: 12px; } .wa_pContainer_lnk { text-align: center; } .wa_pContainer_b3 { margin: 5px 0; } .wa_pContainer_b4 { margin: 5px 0; } .pContainerLink { width: 104px; height: 28px; line-height: 28px; margin: 0 1px; text-align: center; background: #3d94bd; border-radius: 5px; display: inline-block; color: #FFFFFF; font-size: 15px; } .pContainerLink:hover { color: #FFFFFF; } .pContainer_Button { width: 60px; height: 28px; line-height: 28px; text-align: center; background: #2ac392; border-radius: 2px; display: inline-block; color: #FFFFFF; font-size: 15px; } .pContainer_Button:hover { color: #FFFFFF; } .userpa { display: inline-block; width: 100%; color: #fefffe; padding: 5px 10px; margin-top: -2px; border-radius: 5px; background: #282828; border: 1px #282828 solid; } .userpa:hover { background: #000; } .uipmaster{ display: inline-block; width: 100%; color: #fefffe; padding: 5px 10px; margin-top: 4px; margin-bottom: 6px; border-radius: 5px; background: #282828; border: 1px #282828 solid; } .uipmaster:hover { background: #000; } .uipmaster2{ display: inherit; width: 100%; color: #fefffe; padding: 5px 10px; margin-top: 4px; margin-bottom: 6px; border-radius: 5px; background: #282828; border: 1px #282828 solid; } .uipmaster2:hover { background: #000; } .leftinfo { font-size: 12px; float: right; text-align: right; margin-right: 3px; margin-left: 0; min-width: 60px; width: auto !important; } .rightinfo { float: left; color: #CCC; font-size: 11px; } .ifonline{color:#15e615} /*------------ By Sarvin Pakzad ------------*/ تغییرات رو ذخیره کنید. تمام. لازم به ذکره که نیاز به هیچ افزونه و پلاگینی نیست. من فقط تاریخ شمسی رو نصب و کمی ویرایشش کردم تا تاریخ رو بصورت عددی بیاره. همچنین شما میتونید کدهارو به سلیقه دلخواهتون تغییر بدید. در صورت بهم ریختن قالبتون بهم گزارش بدید تا اصلاحش کنم. در صورت نیاز به اطلاعات کاربری پیشرفته تر و تخصصی برای انجمنتون بهم پیام ارسال کنید. هزینه ایی نمیگیرم. منتظر آموزش های پیشرفته تری باشید. امیدوارم آموزش مفیدی بوده باشه. موفق باشید. سروین پاکزاد 10 4 1 لینک ارسال به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری ...
ارسالهای توصیه شده