زیبا سازی قسمت اطلاعات کاربری در کنار پست ها |ساده و زیبا|

[anylove 11]

در این پس میخوام یکی از روش های زیبا سازی اطلاعات کاربری رو که در کنار پست های انجمنتون قرار داره رو خیلی ساده به شما آموزش بدم.

1. به قسمت کنترل پنل مدیریت سایت خود بروید.

2. look & feel >> Manage Skin Sets & Templates >>chose our them >>css >>ipb_style.css رو کلیک کنید با کلیک کردن روی این گزینه در طرف مقابل کد های مخصوص این بخش به نمایش گذاشته میشوند شما میتونید کد زیر رو در قسمت ابتدا یا انتهای این کد ها درج کنید.

کد css:

.author_info ul li{
text-shadow:1px 1px 5px white !important;color :#6d685e;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;border-left:0px solid #dbe1e6;border-right:0px solid #731a8b;
 border-radius:7px;-webkit-border-radius:7px;text-shadow:#b2b2b2 0 0 7px;
   background: -webkit-gradient(linear, left top, left bottom, from(#fbfdfd), to(#eaf1db));
   background: -moz-linear-gradient(top,  #fbfdfd, #eaf1db); /* for firefox 3.6+ */
   background: -o-linear-gradient(top,  #fbfdfd, #eaf1db); /* for firefox 3.6+ */
 border-color:#DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
 -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);
border-top:3px solid #6B8E23;border-bottom:3px solid #6B8E23;
 direction:rtl;
 font-family:Tahoma;
 font-size:11px;
 margin:4px 7px;
 padding:5px;
 text-align:center;
   }
.author_info ul li:hover{
background:none;
}

save رو که بزنیدو تمام

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

اگه مشکلی بود بگید در خدمتم.

[imaniy 8]

خیلی ممنون ولی ای کاش زیباتر بود مثل خود این سایت کاش مدیر سایت کد این سایت رو برای ما میذاشت.

[STALKER 328]

درود و سلام

 

دوستانی که از کد سر در میارن یه نگاه بندازن چجوری میشه پهنارو بیشتر کرد .الان برای اینکه اواتر تو کادر بره تو تنظیمات اصلب رو 130 باید قرار بگیره..ولی اگه بشه کاری کرد بیشتر بشه خیلی زیبا میشه...تا اگه اواتار بزرگ قرار دادیم بره تو کادر ..

 

لطفا اساتید یه نگاه بندازند

 

[سحر شیرازی 1835]

 

درود و سلام

 

دوستانی که از کد سر در میارن یه نگاه بندازن چجوری میشه پهنارو بیشتر کرد .الان برای اینکه اواتر تو کادر بره تو تنظیمات اصلب رو 130 باید قرار بگیره..ولی اگه بشه کاری کرد بیشتر بشه خیلی زیبا میشه...تا اگه اواتار بزرگ قرار دادیم بره تو کادر ..

 

لطفا اساتید یه نگاه بندازند

 

 

در User Profile امکان تغییر سایز آواتار وجود داره.

در این قسمت با استفاده از Show users full photo in topic view; maximum width  می تونید اندازه ی پهنا رو تغییر بدین

[STALKER 328]

در User Profile امکان تغییر سایز آواتار وجود داره.

در این قسمت با استفاده از Show users full photo in topic view; maximum width  می تونید اندازه ی پهنا رو تغییر بدین

 

 

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

[سحر شیرازی 1835]

شما با گزینه کلا عرض رو تغییر میدین ارتفاع هم که متاسب با عکس آپلود شده تنظیم میشه

[STALKER 328]

شما با گزینه کلا عرض رو تغییر میدین ارتفاع هم که متاسب با عکس آپلود شده تنظیم میشه

 

 

من کلا بزرگ و کوچک کردن اواتر در سیستم مد نظرم نیست..

 

منظور من کدهایی است که برای این کادربندی ..در اول پست دادن..تو این کدها ..پهنا در یک حدی بسته شدن..و من میخوام این پهنا بزرگتر بشه..در کد زیر

.author_info ul li{
text-shadow:1px 1px 5px white !important;color :#6d685e;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;border-left:0px solid #dbe1e6;border-right:0px solid #731a8b;
	 border-radius:7px;-webkit-border-radius:7px;text-shadow:#b2b2b2 0 0 7px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfdfd), to(#eaf1db));
    background: -moz-linear-gradient(top,  #fbfdfd, #eaf1db); /* for firefox 3.6+ */
    background: -o-linear-gradient(top,  #fbfdfd, #eaf1db); /* for firefox 3.6+ */
	 border-color:#DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
	 -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);
border-top:3px solid #6B8E23;border-bottom:3px solid #6B8E23;
	 direction:rtl;
	 font-family:Tahoma;
	 font-size:11px;
	 margin:4px 7px;
	 padding:5px;
	 text-align:center;
    }
.author_info ul li:hover{
background:none;
}

[علی مددی 1689]

شما این تغییر بدین ببینید درست کار میکنه 

border-top:3px solid #6B8E23;border-bottom:3px solid #6B8E23;
	 direction:rtl;
	 font-family:Tahoma;
	 font-size:11px;
	 margin:4px 7px;
	 padding:5px;
	 text-align:center;
    }

فقط همون یک خط کدی که معلوم کردم(margin) به این کد تغییر بدین

margin: 4px auto;

برای من که درست شد 

ویرایش شده 1 شهریور، ۱۳۹۲ توسط alisky