.::|>آموزش تغییر ارتفاع کاور پروفایل<|::.

[Arash.Ranjbar 11]

سلام دوستان.

تو این آموزش می خوام بهتون یاد بدم که چطور می تونین بدون افزونه اندازه ارتفاع کاور پروفایل رو تغییر بدین.

قبل:

بعد:

اول از همه وارد مسیر زیر بشید:

ادمین > شخصی سازی > پوسته ها > ویرایش پوسته مورد نظر > از تب css وارد مسیر زیر بشین:

core > front > styles > profile.css

در این بخش کد زیر رو پیدا کنین:

#elProfileHeader {
    padding-bottom: 0;
    padding-top: 125px;
    position: relative;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4) inset;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    font-size: 16px;
    {prefix="transition" value="all 0.3s ease-in-out"}
}

با کد زیر جایگزین کنین:

#elProfileHeader {
    padding-bottom: 0;
    padding-top: 235px;
    position: relative;
    height: 310px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4) inset;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    font-size: 16px;
    {prefix="transition" value="all 0.3s ease-in-out"}
}

تغییرات رو ذخیره کنید و یکبار انجمنتون رو رفرش کنید.

توجه: اگه ارتفاع رو روی هر مقداری تنظیم کنید باید قسمت padding-top رو هم متناسب با اون تغییر بدید تا بهم ریختگی پیش نیاد.

 

..::|امیدوارم خوشتون بیاد|::..

ویرایش شده 17 آذر، ۱۳۹۸ توسط quickle

[CHRIS-7 1009]

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

[Arash.Ranjbar 11]

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

[CHRIS-7 1009]

در 2 ساعت قبل، quickle گفته است :

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

درسته اما به دیگر دستگاه ها فکر کرده اید دستگاه هایی مثل لپ تاپ ، تبلت ، موبایل ، تغییرات اضافی که در قسمت های css که اعمال می کنید ممکن است بر روی رزولوشن های بالا مشکلی به وجود نیاورد اما در نسبت تصویر و رزولوشن های پایین تاثیر گذار هست بخصوص اگه در آخر هر تغییر important! اضافه نمایید - برای تغییرات در رزولوشن های پایین باید از @media screen and (max-width: xxxpx)

قبل از کلاس یا دیویژن های مربوطه قرار دهید که باز هم باید از این کد چند تا بنویسید مثلا در پیکسل های دستگاه ها و یکمی بالا پایین کنید اعداد رو تا المان های مربوطه به درستی ست شوند و روی هم دیگر نمی افتند !