آموزش تغییر نماد pre-loader به تصویر در وردپرس

این آموزش به شما نشون میده که چطور یک نماد pre-loader رو در پوسته وردپرستون به یک تصویر تغییر بدین.

برای تغییر نماد pre-loader، باید مراحل زیر رو انجام بدین:

با مشخصات ورودتون وارد پنل مدیریت وردپرس بشین.
به قسمت Appearance -> Editor برین. فایل style.css رو از زیر پوسته فعال شده باز کنین – در مثال ما، یک پوسته King News هست.

قانون css زیر رو به پایین این فایل style.css اضافه کنین:

.tm-folding-cube .tm-cube {
  display:none!important;
}
.tm-folding-cube {
  width: 400px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -200px;
  position: relative;
  background:url('your_full_image_link') no-repeat center center;
  background-size:contain;
  -webkit-transform: rotateZ(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  transform: rotateZ(0deg) !important;
}

.tm-folding-cube .tm-cube {

display:none!important;

}

.tm-folding-cube {

width: 400px;

height: 100px;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -200px;

position: relative;

background:url('your_full_image_link') no-repeat center center;

background-size:contain;

-webkit-transform: rotateZ(0deg) !important;

-ms-transform: rotate(0deg) !important;

transform: rotateZ(0deg) !important;

}

لینک تصویرتون رو به جای your_full_image_link در قانون وارد کنین و روی Update File کلیک کنین.
میتونین اندازه دلخواه تصویر رو با تنظیم مقادیر ویژگی‌های width و height مدیریت کنین. بالا و چپ باید با 50% باقی بمونن تا موقعیت مرکزی تصویر رو فراهم کنن. همین کار برای ویژگی‌های margin-top و margin-left هم انجام میشه، بنابراین اونها با مقدار نصف width و height تنظیم میشن.

پست پیشنهادی : آموزش استفاده از فرم تماس برای ایجاد لیست ایمیل در وردپرس