وردپرس

راهنمای تغییر استایل بخش دانلود در پوسته مگانو

در این مطلب آموزش اعمال تغییرات در استایل بخش دانلود در پوسته مگانو ارائه می شود. اگر شما از قابلیت نمایش لینک دانلود در پوسته مگانو استفاده می کنید، از طریق این آموزش می توانید هر استایل و طرحی را برای این بخش اعمال کنید.

اگر شما از قابلیت نمایش لینک دانلود در پوسته مگانو استفاده می کنید، از طریق این آموزش می توانید هر استایل و طرحی را برای این بخش اعمال کنید.

برای نمایش باکس دانلود در مطلب، از کلید دانلود که در ویرایشگر مطلب قرار داده شده است، استفاده می شود. یا به روش دیگر، هر محتوایی که بین تگ megadl قرار بگیرد، به صورت باکس دانلود نمایش داده می شود.

اعمال تغییرات

برای اعمال تغییرات دلخواه روی این بخش، چند مورد را باید در نظر گرفت. ابتدا، ساختار این بخش در مطالب لازم است به صورت لیست ایجاد شود. بدین معنی که از کلید “لیست نشانه دار” در ویرایشگر مطلب جهت ایجاد لیستی از لینک های دانلود استفاده شود.

در مرحله دوم (فقط یکبار)، لازم است خواص CSS مورد نظر را برای جعبه دانلود در بخش تنظیمات پوسته > شخصی سازی > استایل اضافه، تعریف نمود.

جعبه دانلود در پوسته مگانو بوسیله کلاس “megano-download” شناسایی می شود. پس در بخش استایل اضافه با کد زیر شروع می کنیم:

.megano-download {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: 2px solid #f64f4f;
    color: rgba(0,0,0,.75);
    padding: 0;
    position: relative;
    margin: 40px 0 20px 0;
}

جعبه دانلود دارای عنوان

اگر برای جعبه دانلود یک عنوان تعیین شود، برای مثال: “دانلود فایل“، می توان استایل عنوان را این چنین تعریف نمود:

.megano-download strong {
    font-size: 13px;
    background-color: #f64f4f;
    color: #fff;
    padding: 2px 10px;
    position: absolute;
    top: -28px;
    right: 5px;
}

سپس برای لیست لینک های دانلود چنین استایلی تعریف می کنیم:

.megano-download ul { margin: 0; padding: 0; }
.megano-download p { height: 1px; margin: 0; }
.megano-download ul li {
    border-bottom: 1px solid #eee;
    list-style: none;
    font-size: 12px;
    padding: 4px 15px;
}
.megano-download ul li:last-child {
    border-bottom: none;
}
.megano-download ul li a {
    border-bottom: none!important;
}

استایل بخش توضیحات

تمام موارد ذکر شده برای جعبه دانلود، برای جعبه توضیحات دانلود نیز قابل استفاده است، با این تفاوت که به جای استفاده از کلاس “megano-download” از کلاس “megano-description” استفاده می شود.

.megano-description {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: 2px solid #28a745;
    color: rgba(0,0,0,.75);
    padding: 0;
    position: relative;
    margin: 40px 0 20px 0;
}
.megano-description strong {
    font-size: 13px;
    background-color: #28a745;
    color: #fff;
    padding: 2px 10px;
    position: absolute;
    top: -28px;
    right: 5px;
}
.megano-description ul { margin: 0; padding: 0; }
.megano-description p { height: 1px; margin: 0; }
.megano-description ul li {
    border-bottom: 1px solid #eee;
    list-style: none;
    font-size: 12px;
    padding: 4px 15px;
}
.megano-description ul li:last-child {
    border-bottom: none;
}
.megano-description ul li a {
    border-bottom: none!important;
}

لازم به ذکر است:

۱- تمامی اعداد به کار رفته در کدهای CSS ذکر شده، باید به صورت لاتین استفاده شوند.

۲- رنگ های به کار رفته در کدهای CSS ذکر شده را می توانید به دلخواه تغییر دهید.

برچسب ها

ایرانووب

متولد 1368، طراح و توسعه دهنده وب، عاشق کدنویسی، ایده پردازی دیجیتال و بازی های ویدئویی!!!

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن