مدیر کل بازنشسته سایت این ارسال پرطرفدار است. سحر شیرازی 1835 ارسال شده در 17 مرداد، ۱۳۹۴ مدیر کل بازنشسته سایت این ارسال پرطرفدار است. اشتراک گذاری ارسال شده در 17 مرداد، ۱۳۹۴ سلام قبل از هر مطلبی باید ذکر کنم این آموزش مخصوص قالب پیشفرض IPS هست. در برخی از قالب ها این قابلیت وجود داره که شما تصویری رو برای زمینه ی هدر انتخاب می کنید اما چون در قالب پیشفرض چنین تنظیماتی وجود نداره با چند کد ساده این قابلیت رو به قالب اضافه می کنیم. در ابتدا تصاویر مربوط به قبل و بعد از تغییرات رو مشاهده بفرمایید: قبل از تغییرات : بعد از تغییرات: خب در ابتدا به مسیر پنل فارسی: " شخصی سازی > ظاهر > پوسته ها " پنل انگلیسسی: " Customization > Appearance > Themes " مراجعه می کنیم.در روبروی قالب پیشفرض یا Default چند آیکون وجود داره که بر روی آیکون فلش کلیک می کنیم تا گزینه ها نمایان بشن، سپس روی گزینه ی "مدیریت منابع" یا "Manage Resources" کلیک می کنیم و کلید " افزودن منبع " یا " Add Resource " رو می زنیم، در صفحه ی جدید گزینه ها رو طبق تاویر زیر تنظیم می کنیم: پنل فارسی : پنل انگلیسی: حتما توجه داشته باشید که گزینه ی " موقعیت های موجود " یا " Existing Location " بر روی global تنظیم بشه. از قسمت " انتخاب فایل... " یا " Choose single file " تصویر مورد نظر رو انتخاب و ذخیره کنید. دقت داشته باشید که نام تصویر رو طوری انتخاب کنید که در فراموش نکنید، چون در مراحل بعدی به نام تصویر نیاز داریم. به عنوان مثال در این آموزش نام تصویر header انتخاب شده. زمانی که ذخیره به درستی انجام پذیرفت شما به صورت اتوماتیک به مرحله ی قبل باز خواهید گشت.در این قسمت با استفاده از کادر جست و جو عنوان تصویری رو که آپلود کرده بودید سرچ کنید، بعد از اتمام جست و جو کدی شبیه به کد زیر روبری تصویر شما به نمایش در خواهد آمد که باید کپی کنید. {resource="header.jpg" app="core" location="global"} حالا به مسیر زیر مراجعه می کنیم : پنل فارسی : Edit HTML & CSS < شخصی سازی > ظاهر > پوسته ها > پوسته ی پیشفرض پنل انگلیسی : Customization > Themes > Default > Edit HTML and CSS سپس به مسیر زیر مراجعه می کنیم: CSS > core > front > custom > custom.css و کدهای زیر رو به ابتدای کدهای فایل custom.css اضافه می کنیم: @media screen and (min-width:980px){ #ipsLayout_header header{ background-image: url('{resource="header.jpg" app="core" location="global"}'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } #elSearchNavContainer{ background: rgba(0,0,0,0.5); } } نکاتی در مورد این کد ها: خط اول کدهای بالا که با @media شروع میشه مخصوص css لپ تاپ و دسکتاپ هاست، در این صورت تصویری که برای هدر اضافه کردید در تبلت و موبایل ها نمایش داده نمیشه.اگر میخواین تصویر مورد نظر شما در همه س دستگاه ها نمایش داده بشه باید کدهای خط اول و { که در پایان کدها وجود داره رو حذف کنید. مقدار background-image که در کدهای بالا قرار داره دقیقا باید همون کدی باشه که هنگام آپلود کردن تصویر سیستم در اختیار شما قرار داده در غیر اینصورت تصویر شما در هدر نمایش داده نمیشه. اگر میخواین تصویر در اندازه ی طبیعی خودش نمایش داده بشه باید خط چهارم یعنی background-size رو حذف کنید که برای زیبایی بیشتر این کار توصیه نمیشه. background-position هم موقعیت تصویر رو در محور های افقی و عمودی مشخص میکنه background-repeat هم که برای تکرار شدن یا نشدن تصویر هست. مواردی که توضیح داده شده میتونه طبق سلیقه ی خودتون تغییر کنه و لی در همین حالت کدها مشکلی ندارن. موفق باشید 13 1 لینک ارسال به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری ...
ارسالهای توصیه شده