CSS سفارشی
ظاهر نوار استوری و نمایشگر را با CSS خودت تغییر بده. این‌جا کلاس‌های ثابت پلک، متغیرهای رنگ و چند نمونه‌ی آماده را می‌بینی.
اگر تنظیمات ظاهر برای چیزی که می‌خواهی کافی نیست، می‌توانی برای نوار استوری و نمایشگر CSS بنویسی. کد را در استوری‌ها › پیشرفته و کارت CSS سفارشی بنویس و ذخیره کن. این کد فقط روی پلک اثر دارد، نه روی بقیه‌ی سایت.
CSS پلک چطور اعمال می‌شود
پلک نوار استوری و نمایشگر را داخل Shadow DOM می‌کشد. یعنی CSS قالب به داخل پلک نمی‌رسد و ظاهر پلک را خراب نمی‌کند. CSS سفارشی تو هم داخل همین فضا و بعد از استایل‌های پلک قرار می‌گیرد. چند نتیجه‌ی مهم دارد:
- فقط کلاس‌های پلک را هدف بگیر. انتخاب‌گرهایی مثل
body .pelk-titleیا کلاس‌های قالب کار نمی‌کنند، چونbodyداخل پلک نیست. بنویس.pelk-title. - از
!importantاستفاده کن. استایل‌های خود پلک!importantدارند؛ برای تغییر یک ویژگی، کنار مقدارش!importantبگذار. متغیرهای رنگ (پایین‌تر) به آن نیاز ندارند. - فقط کلاس‌هایی که با
pelk-شروع می‌شوند ثابت‌اند. کلاس‌هایی که باpk-شروع می‌شوند ابزار داخلی پلک‌اند و ممکن است در هر نسخه عوض شوند؛ به آن‌ها تکیه نکن. - نتیجه را در خود سایت ببین. پیش‌نمایش‌های پنل پلک CSS سفارشی را نشان نمی‌دهند.
- تگ HTML ننویس. کد را بدون
<style>بنویس. اگر کد تگی داشته باشد ذخیره نمی‌شود و پلک شماره‌ی خطش را نشان می‌دهد.
رنگ‌ها با متغیرها
ساده‌ترین راه برای عوض کردن رنگ‌ها، متغیرهای CSS پلک است:
| متغیر | چه چیزی را رنگ می‌کند |
|---|---|
--pelk-story-ring | حلقه‌ی استوری‌هایی که هنوز دیده نشده‌اند. پیش‌فرض: رنگ برند. |
--pelk-story-ring-seen | حلقه‌ی استوری‌های دیده‌شده. |
--pelk-story-text | عنوان استوری‌های تازه، زیر دایره. |
--pelk-story-text-muted | عنوان استوری‌های دیده‌شده. |
--pelk-story-icon | آیکن کاور، وقتی کاور آیکن است. |
--pelk-story-icon-bg | پس‌زمینه‌ی آیکن کاور. |
--pelk-story-nav-bg | پس‌زمینه‌ی فلش‌های دو طرف نوار در دسکتاپ. |
--pelk-story-nav-border | حاشیه‌ی همان فلش‌ها. |
--pelk-story-nav-icon | رنگ خود فلش. |
--pelk-story-nav-shadow | سایه‌ی فلش‌ها. |
متغیرها را روی یکی از این‌ها تعریف کن:
.pelk.pelk-listبرای نوار استوری،.pelk-viewerبرای نمایشگر،.pelkبرای هر دو.
.pelk.pelk-list {
--pelk-story-ring-seen: #94a3b8;
--pelk-story-text-muted: #64748b;
}نواری که تم آن تیره است data-theme="dark" دارد. برای رنگ‌هایی که فقط در تم تیره عوض شوند، .pelk.pelk-list[data-theme="dark"] بنویس.
کلاس‌های نوار استوری
ساختار هر سکشن در سایت این است؛ جدول زیرش می‌گوید هر کلاس چیست:
.pelk-section
└─ .pelk-list
├─ .pelk-track
│ └─ .pelk-story (.is-seen)
│ ├─ .pelk-avatar
│ │ ├─ .pelk-cover
│ │ ├─ .pelk-new
│ │ └─ .pelk-pin
│ └─ .pelk-title
└─ .pelk-nav (.pelk-nav--prev, .pelk-nav--next)| انتخاب‌گر | چه چیزی را هدف می‌گیرد |
|---|---|
:host(.pelk-section) | جعبه‌ی هر سکشن در صفحه (.pelk-section)؛ مثلاً برای فاصله‌ی بالا و پایین. |
:host([data-pelk-section="shop"]) | فقط سکشنی که کلیدش shop است. کلید هر سکشن در شورت‌کدش آمده. |
.pelk-list | خود نوار. |
.pelk-track | ردیف دایره‌ها. |
.pelk-story | هر استوری. استوری دیده‌شده کلاس is-seen هم دارد. |
.pelk-avatar | دایره‌ی استوری با حلقه‌اش. |
.pelk-cover | تصویر یا آیکن داخل حلقه. |
.pelk-icon | آیکن کاور. |
.pelk-new | نقطه‌ی «تازه». |
.pelk-pin | نشان استوری سنجاق‌شده. |
.pelk-title | عنوان زیر دایره. |
.pelk-nav | فلش‌های دو طرف نوار در دسکتاپ. |
کلاس‌های نمایشگر
نمایشگر یک بار برای کل صفحه ساخته می‌شود و همان CSS سفارشی را دارد.
| انتخاب‌گر | چه چیزی را هدف می‌گیرد |
|---|---|
.pelk-viewer | کل نمایشگر. در گوشی data-layout="mobile" دارد و در دسکتاپ data-layout="desktop". |
.pelk-backdrop | پس‌زمینه‌ی پشت استوری. تیرگی‌اش در دسکتاپ در ظاهر تنظیم می‌شود. |
.pelk-card | کارت هر استوری. |
.pelk-progress | نوارهای پیشرفت بالای استوری. |
.pelk-bar-fill | بخش پرشونده‌ی هر نوار پیشرفت. |
.pelk-header | بالای استوری: نام و دکمه‌ها. |
.pelk-name | نام استوری. |
.pelk-pause، .pelk-sound، .pelk-close | دکمه‌های مکث، صدا و بستن. |
.pelk-heading | عنوان روی اسلاید. |
.pelk-footer | پایین استوری: دکمه‌ی لینک، پسند و اشتراک. |
.pelk-cta | دکمه‌ی لینک. |
.pelk-like | دکمه‌ی پسند. وقتی بازدیدکننده پسندیده، کلاس pelk-liked هم دارد. |
.pelk-like-count | شمار پسندها. |
.pelk-share | دکمه‌ی اشتراک. |
چند نمونه‌ی آماده
فاصله‌ی همه‌ی سکشن‌ها با بالا و پایینشان:
:host(.pelk-section) {
margin-block: 24px !important;
}عنوان‌های کوچک‌تر و پررنگ‌تر:
.pelk-title {
font-size: 12px !important;
font-weight: 700 !important;
}عنوان استوری‌های دیده‌شده کم‌رنگ‌تر:
.pelk-story.is-seen .pelk-title {
opacity: 0.6 !important;
}عنوان‌ها فقط در دسکتاپ (در گوشی پنهان):
@media (max-width: 767px) {
.pelk-title {
display: none !important;
}
}حلقه‌ی سبز فقط برای سکشنی که کلیدش shop است:
:host([data-pelk-section="shop"]) .pelk {
--pelk-story-ring: #16a34a;
}دکمه‌ی لینک با گوشه‌های کمتر گرد:
.pelk-cta {
border-radius: 10px !important;
}CSS اثر نکرد؟
- کنار ویژگی‌ها
!importantگذاشته‌ای؟ - انتخاب‌گر فقط کلاس‌های
pelk-دارد، نه کلاس‌های قالب یاpk-؟ - نتیجه را در خود سایت دیده‌ای، نه در پیش‌نمایش پنل؟ اگر هاست یا CDN سایتت صفحه‌ها را کش می‌کند، آن کش را پاک کن.
- برای پیدا کردن کلاس درست، ابزار توسعه‌دهنده‌ی مرورگر را باز کن (کلیک راست، Inspect). کلاس‌های پلک زیر
#shadow-root (open)داخل.pelk-sectionهستند.