رفتن به مطلب
شعبان زاده

آموزشی آموزش کادر بندی مشخصات کاربری

پست های پیشنهاد شده

با سلام 

برای کادر بندی مشخصات ابتدا وارد این آدرس شوید 

Look & Feel  >  Manage Skin Sets & Templates  

سپس بر روی قالب مورد نظر خود کلیک کنید 

در صفحه باز شده از قسمت بالایی css را انتخاب کنید و در صفحه جدید بر روی  ipb_styels.css کلیک کنید 

حال باید یک کد css برای ایجاد کادربندی بسازیم 

بنده یک نمونه کد را به صورت اماده قرار می دهم این کد مناسب قالب های روشن است 

/********************************************************/
/* Post info bit										*/
.invisionpower_Button {
	cursor: default;
width: 165px;
line-height: 30px;
font-size: 13px;
word-wrap: break-word;
padding: 00px;
margin: 2px 0px;
background: #f6f6f6;
background: -moz-linear-gradient(top,#f6f6f6 0%,#e5e5e5 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f6f6f6),color-stop(100%,#e5e5e5));
border: 1px solid #dbdbdb;
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #616161;
display: inline-block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
-moz-box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
}

سپس از قسمت templateها وارد user info pane شوید 

و حالا کافی است است class های بخش ها را تغییر دهید 

به صورت مثال برای کادر دادن به اواتار این عبارت را جست وجو کنید 

<li class='avatar'>

و تغییر دهید به

<li class='invisionpower_Button'>

به هیمن صورت بخش ها را پیدا کنید و عبارت بعد از li را تغییر دهید 

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

یک نمونه کد برای قالب های تیره نیر اماده کرده ام 

برای استفاده از قالب های تیره از این کد css استفاده کنید 

/********************************************************/
/* Post info bit                                        */
.invisionpower_Button {
cursor: default;
width: 165px;
line-height: 30px;
font-size: 13px;
word-wrap: break-word;
padding: 00px;
margin: 2px 0px;
background: #0D0D0D;
background: -moz-linear-gradient(top,#f6f6f6 0%,#e5e5e5 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0D0D0D),color-stop(100%,#474646));
border: 1px solid #736363;
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(255,255,255,1) inset,0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #616161;
display: inline-block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
-moz-box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
box-shadow: inset rgba(0,0,0,0.25) 0px 0px 0px 1px;
color: #fff;
}

موفق باشید

به اشتراک گذاری این ارسال


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

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • افزودن...