سحر شیرازی

سلام نوع آیکون از FontAwsome به صورت خودکار انتخاب میشه که از قبل تعریف شده. این کدها فقط برای منوی ناوبری هست که فونت آیکون رو از سایت مربوطه با توجه به app فراخوانی میکنه. اگر میخواین دستتون بازتر باشه برای آیکون ها از افزونه ی معرفی شده استفاده کنید

با سلام برای افزودن آیکون به منو های انجمن می توانید از افزونه ی Navigation Icons by IPS Themes استفاده کنید اما اگر مایل نیستید از افزونه های زیادی در انجمن خود استفاده کنید می توانید به روش زیر برای منوی انجمن خود آیکون قرار دهید. در کنترل پنل انجمن خود به بخش شخصی سازی > ظاهر > پوسته ها و قسمت ویرایش HTML و CSS قالب خود مراجعه کنید. در بخش CSS وارد قسمت Custom.css شوید و کدهای زیر را به این قسمت اضافه کنید : #ipsLayout_mainNav a:before, #elNavMore_menu a:before{ content: "\f02b"; font-family: "FontAwesome"; font-size: 14px; font-weight: normal; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; {prefix="transform" value="translate(0,0)"} } html[dir="rtl"] #ipsLayout_mainNav a:before{ margin-right: 0; margin-left: 3px; } #ipsLayout_mainNav a:before{ margin-right: 3px; opacity: 0.6; } #ipsLayout_mainNav a:hover:before, #ipsLayout_mainNav a.ipsNavActive:before{ opacity: 1; } #ipsLayout_mainNav a[id*="elNavigation_app_downloads"]:before{ content: "\f0ed" } #ipsLayout_mainNav a[id*="elNavigation_app_gallery"]:before{ content: "\f03e" } #ipsLayout_mainNav a[class*="nexus_Store"]:before{ content: "\f07a" } #ipsLayout_mainNav a[class*="nexus_Support"]:before{ content: "\f1cd" } #ipsLayout_mainNav a[class*="blog"]:before { content: "\f02d" } #ipsLayout_mainNav a[id*="elNavigation_app_calendar"]:before{ content: "\f073" } #ipsLayout_mainNav a[class*="cms"]:before{ content: "\f0f6" } #ipsLayout_mainNav a[id*="elNavigation_app_forums"]:before{ content: "\f086" } #ipsLayout_mainNav a[class*="core_Core"]:before{ content: "\f015" } #ipsLayout_mainNav a[class*="chat"]:before{ content: "\f022" } #ipsLayout_mainNav a#elNavigationMore_dropdown:before{ content: "\f0fe"; display: none; } #ipsLayout_mainNav .fa-caret-down{ font-size: 12px; } موفق باشید.

با سلام بعضا دوستانی هستن که میخوان ناوبار انجمنشون در بالای صفحه ثابت باشه و موقع حرکت به پایین صفحه ناوبار ثابت باشه و همیشه در دسترس باشه که خب یک امکان خوبی هست که منو ها در تمام صفحه برای کاربر در دسترس هست و مثلا زمانی که صفحه اسکرول عمودی زیادی خورده و کاربر در حال مشاهده پایین صفحه هست و برای رفتن به بخش دانلود ، گالری یا ... نیازی نیست که به بالای صفحه برگرده. ساده ترین راه ممکن استفاده از افزونه ی Fixed Navbar هست که می تونید از بخش دانلود دریافت کنید. اما خب اگه نخوایم از افزونه اسفاده کنیم هم کار سختی نیست.ابتدا به قسمت globalTemplate در مسیز زیر مراجعه می کنیم: پنل فارسی: Edit HtML & CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی مورد نظر پنل انگلیسی: Customization > Theme > Edit HTML & CSS > Templates > GlobalTemplate کد های زیر رو پیدا می کنیم: {template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""} بعد از کدهای بالا کدهای زیر رو اضافه می کنیم : <script> $('#elSearchNavContainer').addClass('original').clone().insertAfter('#elSearchNavContainer').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide(); $('.cloned #elSearch').remove(); $(document).ready(function() { var stickyNavTop = $('#elSearchNavContainer').offset().top; window.addEventListener("resize", clone); function clone() { var test = document.getElementById('elSearchNavContainer').offsetWidth; $('.cloned').css('width',test); } var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.cloned').css('display', 'inline'); $('.original').css('visibility', 'hidden'); $('.original #elSearch').appendTo('.cloned'); } else { $('.cloned').css('display', 'none'); $('.original').css('visibility', 'visible'); $('.cloned #elSearch').appendTo('.original'); } }; stickyNav(); clone(); $(window).scroll(function() { stickyNav(); }); }); </script>

با سلام قبلا در 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); } } موفق باشید.

با سلام برای اینکه بتونیم لینک های دلخواه رو در سایدبار اضافه کنیم ابتدا باید افزونه ی IPS4 php Text Widget رو نصب کنیم.افزونه ی مذکور رو از لینک زیر دریافت کنید. بعد از نصب و فعال نمودن افزونه به مسیر زیر مراجعه می کنیم : Edit HTML and CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی مورد نظر و در بخش زیر CSS > core > front > custom > custom.css کد های زیر رو به انتهای کددهای قسمت ذکر شده اضافه می کنیم: .rublcon_fg { background-color: #009A57; border-radius: 4px; box-shadow: 0 4px 0 #009855, 0 5px 5px 1px rgba(0, 0, 0, 0.4); color: #000; display: block; font-size: 21px; height: 44px; line-height: 44px; text-align: center; text-decoration: none; transition: all 0.15s ease-in-out 0s; } .rublcon_fg:hover { background-color: #262c34; box-shadow: 0 4px 0 #1a1e24, 0 5px 5px 1px rgba(0, 0, 0, 0.4); color: #fff; } .rublcon_fg:active { box-shadow: none; margin-top: -18px; } بعد از دخیره سازی به انجمن مراجعه می کنیم و از قسمت مدیریت بلوک ها طبق تصویر زیر بلوک Custom Text رو به ساید بار اضافه می کنیم. و کدهای زیر رو طبق تصویر در بلوکی که اضافه کردین ، وارد کنید: <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> <a class="rublcon_fg" href='link morede nazar'> عنوان مورد نظر</a> <br> موفق باشید.

با سلام همونطور که می دونید زیر انجمن ها به صورت خطی و پشت سر هم نمایش داده میشه به این صورت : برای نمایش منظم و ستونی زیر انجمن ها باید کد زیر رو به قسمت custom.css قالب اضافه کنید : .ipsDataItem_subList{ overflow: hidden; } html[dir="ltr"] .ipsApp .ipsDataItem_subList, html[dir="rtl"] .ipsApp .ipsDataItem_subList{ background: none; line-height: 220%; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 4px; } .ipsDataItem_subList li{ float: right; width: calc(100% / 3 - 5px); } html[dir="rtl"].ipsDataItem_subList li{ float: right; } .ipsDataItem_subList li a:after{ display: none; } html[dir="rtl"] .ipsDataItem_subList.ipsList_inline > li{ margin-left: 0; } که زیر انجمن ها بعد از افزودن کدهای بالا به صورت زیر نمایش داده میشه : در کدهای بالا عدد 3 که در [ width: calc(100% / 3 - 5px) ] وجود داره مربوط به تعداد ستون هاست و با تغییر عدد می تونید زیرانجمن ها رو در تعداد ستون های دلخواه نمایش بدین. در تصاویر بالا این عدد یکبار 3 و یکبار 2 تنظیم شده.

مشاهده فایل Required Info توسط این افزونه می توانید تنظیماتی اعمال نمایید که کاربران انجمن تا زمان تکمیل نکردن اطلاعات پروفایل خود به انجمن دسترسی کامل نداشته باشند. از امکانات این افزونه می توان به : مجبور نمودن کاربران به انتخاب تصویر پروفایل تصویر کاور، طلاعات کاربری از جمله : جنسیت ، محل سکونت و ... اشاره نمود. هر دو نسخه ی انگلیسی و فارسی قرار داده شده است. قیمت صرفا جهت اطلاع : 8 دلار آمریکا ارسال کننده سحر شیرازی ارسال شنبه, 17 مرداد 1394 دسته امکانات مدیریتی نام فارسی اطلاعات مورد نیاز نوع

سلام مجددا مثل آموزش اضافه کردن تصویر زمینه برای هدر انجمن قبل از هر مطلبی باید ذکر کنم این آموزش مخصوص قالب پیشفرض IPS هست. در برخی از قالب ها این قابلیت وجود داره که شما تصویری رو برای زمینه ی انجمن انتخاب می کنید اما چون در قالب پیشفرض چنین تنظیماتی وجود نداره با چند کد ساده این قابلیت رو به قالب اضافه می کنیم. در ابتدا تصاویر مربوط به قبل و بعد از تغییرات رو مشاهده بفرمایید: خب در ابتدا به مسیر پنل فارسی: " شخصی سازی > ظاهر > پوسته ها " پنل انگلیسسی: " Customization > Appearance > Themes " مراجعه می کنیم.در روبروی قالب پیشفرض یا Default چند آیکون وجود داره که بر روی آیکون فلش کلیک می کنیم تا گزینه ها نمایان بشن، سپس روی گزینه ی "مدیریت منابع" یا "Manage Resources" کلیک می کنیم و کلید " افزودن منبع " یا " Add Resource " رو می زنیم، در صفحه ی جدید گزینه ها رو طبق تاویر زیر تنظیم می کنیم: پنل فارسی : پنل انگلیسی: حتما توجه داشته باشید که گزینه ی " موقعیت های موجود " یا " Existing Location " بر روی global تنظیم بشه. از قسمت " انتخاب فایل... " یا " Choose single file " تصویر مورد نظر رو انتخاب و ذخیره کنید. دقت داشته باشید که نام تصویر رو طوری انتخاب کنید که در فراموش نکنید، چون در مراحل بعدی به نام تصویر نیاز داریم. زمانی که ذخیره به درستی انجام پذیرفت شما به صورت اتوماتیک به مرحله ی قبل باز خواهید گشت.در این قسمت با استفاده از کادر جست و جو عنوان تصویری رو که آپلود کرده بودید سرچ کنید، بعد از اتمام جست و جو کدی شبیه به کد زیر روبری تصویر شما به نمایش در خواهد آمد که باید کپی کنید. {resource="header.jpg" app="core" location="global"} حالا به مسیر زیر مراجعه می کنیم : پنل فارسی : Edit HTML & CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی پیشفرض پنل انگلیسی : Customization > Themes > Default > Edit HTML and CSS سپس به مسیر زیر مراجعه می کنیم: CSS > core > front > custom > custom.css و کدهای زیر رو به کدهای فایل custom.css اضافه می کنیم: body{ background-image: url('{resource="image_name.jpg" app="core" location="global"}'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; background-attachment: fixed; } موفق باشید

سلام قبل از هر مطلبی باید ذکر کنم این آموزش مخصوص قالب پیشفرض IPS هست. در برخی از قالب ها این قابلیت وجود داره که شما تصویری رو برای زمینه ی هدر انتخاب می کنید اما چون در قالب پیشفرض چنین تنظیماتی وجود نداره با چند کد ساده این قابلیت رو به قالب اضافه می کنیم. در ابتدا تصاویر مربوط به قبل و بعد از تغییرات رو مشاهده بفرمایید: قبل از تغییرات : بعد از تغییرات: خب در ابتدا به مسیر پنل فارسی: " شخصی سازی > ظاهر > پوسته ها " پنل انگلیسسی: " Customization > Appearance > Themes " مراجعه می کنیم.در روبروی قالب پیشفرض یا Default چند آیکون وجود داره که بر روی آیکون فلش کلیک می کنیم تا گزینه ها نمایان بشن، سپس روی گزینه ی "مدیریت منابع" یا "Manage Resources" کلیک می کنیم و کلید " افزودن منبع " یا " Add Resource " رو می زنیم، در صفحه ی جدید گزینه ها رو طبق تاویر زیر تنظیم می کنیم: پنل فارسی : پنل انگلیسی: حتما توجه داشته باشید که گزینه ی " موقعیت های موجود " یا " Existing Location " بر روی global تنظیم بشه. از قسمت " انتخاب فایل... " یا " Choose single file " تصویر مورد نظر رو انتخاب و ذخیره کنید. دقت داشته باشید که نام تصویر رو طوری انتخاب کنید که در فراموش نکنید، چون در مراحل بعدی به نام تصویر نیاز داریم. به عنوان مثال در این آموزش نام تصویر header انتخاب شده. زمانی که ذخیره به درستی انجام پذیرفت شما به صورت اتوماتیک به مرحله ی قبل باز خواهید گشت.در این قسمت با استفاده از کادر جست و جو عنوان تصویری رو که آپلود کرده بودید سرچ کنید، بعد از اتمام جست و جو کدی شبیه به کد زیر روبری تصویر شما به نمایش در خواهد آمد که باید کپی کنید. {resource="header.jpg" app="core" location="global"} حالا به مسیر زیر مراجعه می کنیم : پنل فارسی : Edit HTML & CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی پیشفرض پنل انگلیسی : Customization > Themes > Default > Edit HTML and CSS سپس به مسیر زیر مراجعه می کنیم: CSS > core > front > custom > custom.css و کدهای زیر رو به ابتدای کدهای فایل custom.css اضافه می کنیم: @media screen and (min-width:980px){ #ipsLayout_header header{ background-image: url('{resource="header.jpg" app="core" location="global"}'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } #elSearchNavContainer{ background: rgba(0,0,0,0.5); } } نکاتی در مورد این کد ها: خط اول کدهای بالا که با @media شروع میشه مخصوص css لپ تاپ و دسکتاپ هاست، در این صورت تصویری که برای هدر اضافه کردید در تبلت و موبایل ها نمایش داده نمیشه.اگر میخواین تصویر مورد نظر شما در همه س دستگاه ها نمایش داده بشه باید کدهای خط اول و { که در پایان کدها وجود داره رو حذف کنید. مقدار background-image که در کدهای بالا قرار داره دقیقا باید همون کدی باشه که هنگام آپلود کردن تصویر سیستم در اختیار شما قرار داده در غیر اینصورت تصویر شما در هدر نمایش داده نمیشه. اگر میخواین تصویر در اندازه ی طبیعی خودش نمایش داده بشه باید خط چهارم یعنی background-size رو حذف کنید که برای زیبایی بیشتر این کار توصیه نمیشه. background-position هم موقعیت تصویر رو در محور های افقی و عمودی مشخص میکنه background-repeat هم که برای تکرار شدن یا نشدن تصویر هست. مواردی که توضیح داده شده میتونه طبق سلیقه ی خودتون تغییر کنه و لی در همین حالت کدها مشکلی ندارن. موفق باشید

مشاهده فایل Sidebar profile آمار پروفایل شما خلاصه و در دسترس است! 😎👉👉 * همچنین شامل فعالیت های اخیر ارسال کننده سحر شیرازی ارسال جمعه, 16 مرداد 1394 دسته امکانات کاربری نام فارسی نوع افزونه/Plugin ورژن پشتيبانی شده

سلام افزودن تب و منوهای دلخواه به IPS از دو روش امکان پذیر هست : 1- از طریق برنامه ی Page که امکانات و مزایای بسیاری داره. 2- از طریق ویرایش کدهای قالب روش اول از طریق برنامه ی Page در این برنامه می تونیم منوهای دلخواه را به صورت سادده و آبشاری اضافه کنیم. منوهای ساده برای این کار به مسیر زیر مراجعه می کنیم : پنل فارسی: صفحه ها > مدیریت صفحه ها > منو پنل انگلیسی: Pages > Page Management > Menu از گزینه ی " جدید " یا " Create New " جهت ساخت منوی جدید استفاده می کنیم. در پنجره ی باز شده موارد خواسته شده را وارد می نماییم : 1- نوع یا type : این گزینه نوع منو را مشخص می کند. { برای ساخت یک منو یا تب ساده این گزینه را بر روی آدرس URL تنظیم می کنیم. } 2- آدرس URL یا URL : لینک مورد نظر ما می باشد باید با http:// و یا https:// وارد شود. 3- عنوان یا Title : عنوان تب و یا منو را به فارسی وارد می کنیم. 4- گزینه ی " مادر " یا " parent " را برای منو و تب های ساده بر روی " بدون مادر" یا " No Parent " تنظیم می کنیم. 5- دسترسی یا Permissions : در این قسمت هم مشخص می کنیم که کدام یک از گروه ها با این منو دسترسی داشته باشند. منوی آبشاری برای این کار به مسیر زیر مراجعه می کنیم : پنل فارسی: صفحه ها > مدیریت صفحه ها > منو پنل انگلیسی: Pages > Page Management > Menu برای ساختن منوی آبشاری ابتدا باید منوی والد یا مادر ساخته شود سپس زیر مجموعه ها ، برای این کار طبق روش قبل اقدام می کنیو با این تفاوت که برای ساخت منوی مادر باید " نوع یا type " روی " پوشه یا Folder " تنظیم شود و منوی مادر ساخته شود سپس طبق روش بالا اقدام به ساخت منوهای دیگر می کنید و مادر یا parent منوهای جدید را پوشه یا folder ساخته شده قرار می دهید. در اینجا تصویری از منوی آبشاری و تنظیمات آن مشاهده می کنید: همانگونه ک مشاهده می کنید در این تصویر منوی آبشاری در حالت راستچین قرار دارد و همچنین پشت هر کادر سایه ای قرار دارد.برای ویرایش موارد ذکر شده طبق روش زیر عمل می کنیم. ابتدا تغییر مکان زیر مجموعه های منوی آبشاری : به مسیر زیر مراجعه می کنیم : در مسیر زیر : css > core > global > framework > menus.css کدهای زیر را جست و جو کنید } html[dir="rtl"] .ipsMenu_item { text-align: right; } و مقدار right رو به محل مورد نظر خودتون مثلا center تغییر بدین. حذف سایه ی پشت زیر منوها: در همین قسمت کد های زیر رو سرچ کنید : .ipsMenu { background: #F5F5F5; box-shadow: 0px 15px 110px rgba(0,0,0,0.2); border-radius: 3px; z-index: 10000; position: absolute; } و مقادیر background و box- shadow رو به مقادیر دلخواهتون تغییر بدین. برای حذف سایه می تونید box-shadow: none; رو قرار بدین. تصویری بعد از تغییرات بالا: همونطور که مشاهده می کنید در این تصویر سایه (shadow-box) حذف و (background) تغییر کرده. افزودن منو و تب با ایجاد تغییرات در کدهای قالب. برای این کار به مسیر زیر مراجعه می کنیم : پنل فارسی : شخصی سازی > ظاهر > پوسته ها > انتخاب پوسته ی مورد نظر > ویرایش HTML و CSS پنل انگلیسی : Customization > Appearance > Themes > انتخاب پوسته ی مورد نظر > Edit HTML and CSS در قسمت زیر : قالب > core > front > global > NavBar کدهای زیر را جست و جو کنید : در برخی قالب ها : <ul id='ipsLayout_mainNav' class='ipsPos_left'> و در برخی دیگر : <ul id='ipsLayout_mainNav'> و بعد از کد های بالا کد زیر را اضافه کنید : <li data-role="navItem" data-originalwidth="83"> <a href="لینک مورد نظر" class="elNavigation_app">عنوان</a> </li> موفق باشید.