این آموزش به شما نشون میده که چطور یک نماد pre-loader رو در پوسته وردپرستون به یک تصویر تغییر بدین.
برای تغییر نماد pre-loader، باید مراحل زیر رو انجام بدین:
- با مشخصات ورودتون وارد پنل مدیریت وردپرس بشین.
- به قسمت Appearance -> Editor برین. فایل style.css رو از زیر پوسته فعال شده باز کنین – در مثال ما، یک پوسته King News هست.
- قانون css زیر رو به پایین این فایل style.css اضافه کنین:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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 تنظیم میشن.
برای بررسی نتیجهها بخش کاربری سایتتون رو ریفرش کنین.