مدیر کل بازنشسته سایت این ارسال پرطرفدار است. سحر شیرازی 1835 ارسال شده در 21 مرداد، ۱۳۹۴ مدیر کل بازنشسته سایت این ارسال پرطرفدار است. اشتراک گذاری ارسال شده در 21 مرداد، ۱۳۹۴ با سلام قبلا در IPB چنین امکانی رو مشاهده کردیم که پروفایل کاربر به سایدبار انجمن منتقل میشد. الان تصمیم داریم این کار رو برای ips4 انجام بدیم. خب ابتدا بهترین مکان رو برای قرار گیری پروفایل انتخاب می کنیم. که در این آموزش محل مناسب رو در قسمت پایین ایزارک افزونه ی چت باکس انتخاب کردیم. ابتدا تصاویری از نتیجه ی کار رو با هم می بینیم: همونطور که مشاهده می کنید در تصیویر اول تصویر پروفایل کاربر به سایدبار منتقل شده و ظاهرا فقط تصویر پروفایل هست اما تصاویر دوم و سوم مربوط به زمانی هست که موس بر روی تصویر و یا اطراف تصویر میره گزینه هایی ک مشاهده می کنید نمایان میشه و زمانی ک نشانگر موس به محل دیگه ای بره به حالت اول برمیگرده خب نحوه ی اجرایی کردن این کار: ابتدا به مسیر زیر مراجعه می کنیم: Edit HTML and CSS < شخصی سازی > ظاهر > پوسته ی مورد نظر سپس مسیر زیر: main < chat < front < bimchatbox < قالب ها در کدهای قسمت بالا قبل از آخرین تگ <div/> کدهای زیر رو اضافه می کنیم: <br> <asidebg class="profile-card"> <!-- ::: ::: --> <headerbg> <div style='margin-top:14px;'>{template="userPhoto" group="global" app="core" params="\IPS\Member::loggedIn(), 'xlarge'"}</div> <h1>{member="name"}</h1> </headerbg> <div class="profile-bio"> <ul id='elUserLink_menu' class='ipsMenu_normal' style='list-style: none;'> <li class='ipsMenu_title'style='padding: 7px 10px;'>{lang="menu_content"}</li> {{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members', 'front' ) )}} <li class='ipsMenu_item'><a href='{member="url()"}' title='{lang="view_my_profile"}'>{lang="menu_profile"}</a></li> {{endif}} {{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'messaging' ) )}} {{if \IPS\Member::loggedIn()->members_disable_pm AND \IPS\Member::loggedIn()->members_disable_pm != 2}} <li class='ipsMenu_item'><a href='{url="app=core&module=messaging&controller=messenger&do=enableMessenger" seoTemplate="messaging"}' title='{lang="go_to_messenger"}' data-confirm data-confirmMessage='{lang="messenger_disabled_msg"}'>{lang="menu_messages"}</a></li> {{else}} <li class='ipsMenu_item'><a href='{url="app=core&module=messaging&controller=messenger" seoTemplate="messaging"}' title='{lang="go_to_messenger"}'>{lang="menu_messages"}</a></li> {{endif}} {{endif}}{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members', 'front' ) )}} {{$member = \IPS\Member::loggedIn();}} <li class='ipsMenu_item'><a href='{url="app=core&module=members&controller=profile&do=content&id=$member->member_id" base="front" seoTemplate="profile_content" seoTitle="$member->members_seo_name"}' title='{lang="userbar_my_content"}'>{lang="userbar_my_content"}</a></li> {{endif}} <li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=followed" seoTemplate="followed_content"}'>{lang="menu_followed_content"}</a></li> {{if \IPS\Member::loggedIn()->group['g_attach_max'] != 0}} <li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=attachments" seoTemplate="attachments"}'>{lang="my_attachments"}</a></li> {{endif}} <li class='ipsMenu_title'>{lang="menu_settings_title"}</li> <li class='ipsMenu_item' id='elAccountSettingsLink'><a href='{url="app=core&module=system&controller=settings" seoTemplate="settings"}' title='{lang="edit_account_settings"}'>{lang="menu_settings"}</a></li> {{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}} <li class='ipsMenu_item'><a href='{expression="\IPS\Member::loggedIn()->url()->setQueryString( 'do', 'edit' )"}' data-ipsDialog data-ipsDialog-modal='true' data-ipsDialog-title='{lang="profile_edit"}'>{lang="profile_edit"}</a></li> {{endif}} <li class='ipsMenu_item'><a href='{url="app=core&module=members&controller=ignore" seoTemplate="ignore"}'>{lang="menu_manage_ignore"}</a></li> <li class='ipsMenu_item'><a href="{url="app=core&module=system&controller=notifications&do=options" seoTemplate="notifications_options"}">{lang="notification_options"}</a></li> </ul> <div style=' position: relative;bottom: 427px;text-align: center;'> {expression="\IPS\Member\Group::load( $member->member_group_id )->formattedName" raw="true"} </div> </div> <ul class="profile-social-links"> <li> <a href="http://www.stumbleupon.com/" target="_blank"> <i class="fa fa-stumbleupon"></i> </a> </li> <li> <a href="https://www.facebook.com/" target="_blank"> <i class="fa fa-facebook"></i> </a> </li> <li> <a href="https://plus.google.com/s" target="_blank"> <i class="fa fa-google-plus"></i> </a> </li> </ul> </asidebg> <br> سپس به مسیر زیر مراجعه می کنیم : CSS > core > front > custom > custom.css و کدهای زیر رو به custom.css اضافه می کنیم: headerbg img { border-radius: 50%; display: block; width: 120px; border: 5px solid #fff; } asidebg { border-top: 0px solid #26A69A; border-bottom: 0px solid #00695C; border-radius: 50%; margin: 0 auto; display: block; height: 150px; width: 150px; background: url('bg_pattern.gif') repeat, url('bg.jpg') no-repeat; background-size: auto auto, 100% 100%; overflow: hidden; box-shadow: 0 0 100px 10px #fff; transition: all ease 0.3s; } asidebg:hover { height: 620px; width: 320px; box-shadow: 0 0 70px 10px #fff; border-radius: 0; } asidebg:hover header img { animation: profile_image 2000ms linear both; animation-delay: 0.5s; } headerbg { text-align: center; } headerbg h1 { position: relative; text-align: center; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.5); font-size: 25px; line-height: 25px; display: inline-block; padding: 10px; transition: all ease 0.250s; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } asidebg:hover headerbg h1 { margin-top: 0px; outline: 0 solid #fff; border-top: 0px solid #fff; border-bottom: 1px solid #fff; } headerbg h2 { text-align: center; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.5); font-size: 17px; font-weight: normal; line-height: 0px; margin: 0; } .profile-bio { margin-top: 20px; transition: all linear 1.5s; color: #4e5059; font-size: 14px; opacity: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 49%, rgba(0, 0, 0, 0.61) 100%); } .profile-bio li a{ color:#fff; } .profile-bio li a:hover{ color:#4e5059; } asidebg:hover .profile-bio { opacity: 1; } .profile-bio p:first-child { text-align: center; font-size: 16px; } .profile-social-links { position: relative; margin-top: -620px; ; list-style-type: none; width: 100px; opacity: 0; transition: all ease 0.5s; } asidebg:hover .profile-social-links { ; opacity: 1; } .profile-social-links i { width: 30px; height: 30px; line-height: 18px; background: #fff; border-radius: 50%; padding: 6px; text-align: center; } /*PROFILE IMAGE ANIMATE */ @keyframes profile_image { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.81% { transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.21% { transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.61% { transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.52% { transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.32% { transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.23% { transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.03% { transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.74% { transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.44% { transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.86% { transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.28% { transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.69% { transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /*NAME ANIMATE */ asidebg:hover headerbg h1 { animation: name_and_job 1500ms linear both; animation-delay: 0.4s; } @keyframes name_and_job { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); } 1.3% { transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1); } 2.55% { transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1); } 4.1% { transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1); } 5.71% { transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1); } 8.11% { transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1); } 8.81% { transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1); } 11.96% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1); } 12.11% { transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1); } 15.07% { transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1); } 16.12% { transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1); } 27.23% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1); } 27.58% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1); } 38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1); } 40.09% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1); } 50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1); } 60.56% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); } 82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } asidebg:hover ul li:first-child { animation: social_animation 2000ms ease-in-out both; animation-delay: 0.75s; padding: 1px; } asidebg:hover ul li:nth-child(2) { animation: social_animation 2000ms ease-in-out both; animation-delay: 1s; padding: 1px; } asidebg:hover ul li:nth-child(3) { animation: social_animation 2000ms ease-in-out both; animation-delay: 1.25s; padding: 1px; } asidebg:hover ul li:nth-child(4) { animation: social_animation 2000ms ease-in-out both; animation-delay: 1.50s; } @keyframes social_animation { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); } 1.3% { transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1); } 2.55% { transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1); } 4.1% { transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1); } 5.71% { transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1); } 8.11% { transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1); } 8.81% { transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1); } 11.96% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1); } 12.11% { transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1); } 15.07% { transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1); } 16.12% { transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1); } 27.23% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1); } 27.58% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1); } 38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1); } 40.09% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1); } 50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1); } 60.56% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); } 82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } موفق باشید. 10 لینک ارسال به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری ...
aranesh 11 ارسال شده در 8 مهر، ۱۳۹۴ اشتراک گذاری ارسال شده در 8 مهر، ۱۳۹۴ به این شکل نا مطلوب در میاد ، ایراد از کجاس؟ 1 لینک ارسال به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری ...
مدیر کل بازنشسته سایت علی مددی 1689 ارسال شده در 8 مهر، ۱۳۹۴ مدیر کل بازنشسته سایت اشتراک گذاری ارسال شده در 8 مهر، ۱۳۹۴ سلام لینک انجمن داخل پروفایلتون قرار دهید تا قابل بررسی باشد. رنگ پس زمینه پروفایل احتمالا از قاب میگیره پس باید زحمت بکشید کدهارو بررسی کنید و شاید نیاز باشه خودتون استایل اضافه کنید... 2 1 لینک ارسال به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری ...
ارسالهای توصیه شده