رفتن به مطلب

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


 اشتراک گذاری

ارسال های توصیه شده

سلام دوستان.

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

قبل:

before.thumb.png.67e7ade91cccf37df5819ce9135cfa37.png.74bf549aff89d26d4874cbabbda8aba2.png

بعد:

coverphoto.thumb.png.5ae55796596fbfdf2bb01728e4d8afbe.png.3a570aefdd7bb3d6215a97e8c090f036.png

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

ادمین > شخصی سازی > پوسته ها > ویرایش پوسته مورد نظر > از تب 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 رو هم متناسب با اون تغییر بدید تا بهم ریختگی پیش نیاد.

 

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

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

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

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

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

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

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

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

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

  • Arash.Ranjbar عنوان را به .::|>آموزش تغییر ارتفاع کاور پروفایل<|::. تغییر داد
 اشتراک گذاری

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...

اطلاعات مهم

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