رفتن به مطلب
ای پی بورد ایران

Image Description از تمامی ویژگی های منحصر بفرد سیستم بهره ببرید!!!

اضافه کردن تصویر پس زمینه به هدر انجمن



با سلام 

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

قبل از تغییر 

header1.png

بعد از تغییر 

header2.png

1-وارد این مسیر شوید 

بخش شخصی سازی > قالب 

 

از قمست رو به روی قالب مورد نظر خود از منو باز شوند بر روی مدیریت منابع کلیک کنید 

2-از قسمت سمت چپ بر روی اضافه کردن منابع کلیک کنید 

3-موارد را این گونه تنظیم کنید 

موقعیت :اضافه کردن به موقعیت های موجود 

محل موجود :global 

پوشه :اضافه کردن به پوشه های موجود 

پوشه های موجود :    /

برنامه :بخش سیستم

 

ipb tutorials.png

 

4-برای بخش منابع بر روی انتخاب فایل کلیک کنید تصویر مورد نظر خود را اپلود کنید توجه کنید نام این تصویر نام کد انتخابی ما خواهد بود در این مقاله من از header.jpg استفاده می کنم شما هر نامی توانید انتخاب کنید اما در صورتی تغییر نام توجه کنید که هر جا header.jpg در کد های زیر مشاده کردید با نام مورد نظر خود تغییر دهید 

پس از اپلود فایل بر روی ذخیره تغییرات کلیک کنید 

5-حال پس از اپلود مجددا به صفحه مدیریت  منابع برگشت داده خواهید شد از بخش جست وجو سمت چپ  عبارتی که برای نام تصویر انتخاب کردید را جست وجو کنید که در این اموزش عبارت header.jpg را باید جست وجو کنیم پس از یافتن تصویر در بخش برچسب قالب کدی را مشاهده خواهید کرد این کد را کپی کنید نمونه کد این گونه خواهد بود 

{resource="header.jpg" app="core" location="global"}	

6-وارد این مسیر شوید 

 

بخش شخصی سازی > قالب 

 

از قسمت رو به روی قالب مورد نظر خود بر روی این علامت </> کلیک کندی تا وارد تنظیمات کد های قالب شوید 

سپس از سر بخش css وارد این مسیر شوید 

core >front >custom >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% %;
      background-repeat: no-repeat;
    }
 
    #elSearchNavContainer{ background: rgba(0,0,0,0.5); }
 
}

موفق باشید


 گزارش این آموزش

×