آموزشی تغییرات رنگ و تصویر مربوط به گروه کاربری

[محمدیان 1,319]

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

در این تاپیک قصد داریم تا آموزشی جهت تغییرات مربوط به رنگ و تصویر گروه کاربری تعریف شده در انجمن را ارائه نماییم

 

 

 

 

 

- تنظیم رنگ بندی و استایل دهی به گروه های کاربری

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

برای این کار بعد از ورود به پنل مدیریت وارد مسیر ذیل شده

Look & Feel  >> Manage Skin Sets & Templates >> manage Templates  & CSS

سپس از تب Css روی گزینه  ipb_styles.css   کلیک نمایید. در این صفحه کلیه کد های مربوط به تنظیمات Css قالب خود را مشاهده می کنید.

حال باید کد هایی جهت استایل دهی گروه کاربری را در این فایل قرار داده و ذخیره نماییم.

برای نمونه کد هایی که در انجمن ای پی بورد ایران قرار داده شده را بصورت پیش فرض قرار داده ایم.

کاربران بنا به سلیغه خود می توانند تغییرات را در این کد ها اعمال کنند.

.userbarnamenevis {
color: white;
background: #C96D6D;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userMember {
color: white;
background: #0CA389;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userValidating, .userGuest {
color: white;
background: #A8D324;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}
.userManagement {
color: white;
background: #D70000;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userStaff {
color: white;
background: #DB74AB;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userCustomer {
color: white;
background: #8904B1;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

توضیح کد: برای مثال در کد های بالا  کاربرانی که در گروه برنامه نویس قرار دارند کد های قسمت .userserbarnamenevis تعریف شده است

کدها را درآخر فایل  ipb_styles.css   قرار داده و ذخیره نمایید.

حال  اینکه برای کاربرانی که در گروه برنامه نویسی قرار دارند استایل مربوط را که تعیین شده قرار دهیم به مسیر ذیل بروید

Members  >>  Member Groups  >> Manage Member Groups

گروه کاربری که می خواهید استایل دهی نمایید را انتخاب کنید (در اینجا گروه کاربری برنامه نویس مورد بحث است)

 

 

 

وارد تنظیمات این گروه کاربری می شوید در قسمت Group Formatting Prefix می توانید استایل دهی که در فایل سی اس اس انجام داده اید را فراخوانی نمایید ( .userbarnamenevis)

کد مربوط در این قسمت بدین صورت است

<span class="userbarnamenevis">

در کادر مربوط به Group Formatting Suffix این کد را وارد کنید

</span>

 

حال اگر می خواهید برای گروه کاربری خود یک تصویر هم قرار دهید تا این گروه کاربری را متمایز کنید می توانید در قسمت Group Icon Image مسیر تصویر گروه کاربری را وارد نمایید و تنظیماتی که انجام داده را ذخیره کنید.

با این تغییرات استایل دهی به گروه کاربری در انجمن را انجام داده اید.

 

معرفی 2 هوک مربوطه:

 

اگر می خواهید گروه های کاربری که در انجمن تعریف نموده این در پایین انجمن خود نمایش دهید پیشنهاد می کنید از هوک ذیل استفاده کنید.

نام هوک:  Group Name Indicator

 

اگر می خواهید استایل دهی گروه های کاربری در کل انجمن شما از قبیل برنامه چت و ... نمایش داده شود می توانید از هوک ذیل استفاده نمایید.
نام هوک: Group Format

 

موفق و سربلند باشید