بیاموزید چگونه جنبههایی از ظاهر اپلیکیشن Obsidian را بدون نیاز به [ساختن پوسته](https://docs.obsidian.md/Themes/App+themes/Build+a+theme) تغییر دهید.
> [!tip] اگر به دنبال راهنمایی درباره مدیریت CSS برای [[مقدمهای بر Obsidian Publish|Obsidian Publish]] هستید، حتماً [[سفارشیسازی وبگاه]] را بررسی کنید.
CSS زبانی است که ظاهر HTML را کنترل میکند. با افزودن تکهکدهای CSS، میتوانید بخشهایی از رابط کاربری Obsidian را تغییر دهید، مانند اندازه و رنگ سرفصلها. Obsidian دارای [متغیرهای CSS](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables) است که به شما کمک میکنند رابط کاربری را بهراحتی سفارشی کنید.
Obsidian تکهکدهای CSS را در [[پوشه پیکربندی|پوشه پیکربندی]] گاوصندوق جستجو میکند.
## افزودن تکهکد
برای افزودن تکهکد CSS در **دسکتاپ** ![[lucide-monitor-check.svg#icon]]، مراحل زیر را دنبال کنید:
1. **[[تنظیمات]]** ![[lucide-settings.svg#icon]] را بگشایید.
2. در **ظاهر ← تکهکدهای سیاساس**، **گشودن پوشهی تکهکدها** ![[lucide-folder-open.svg#icon]] را انتخاب کنید.
3. در پوشه تکهکدها، یک فایل CSS حاوی تکهکد خود بسازید.
4. در Obsidian، در **ظاهر ← تکهکدهای سیاساس**، **بازگیری تکهکدها** ![[lucide-refresh-cw.svg#icon]] را انتخاب کنید تا تکهکد در فهرست نمایان شود.
5. تکهکد را با کلیک روی دکمه تغییر وضعیت فعال کنید.
برای افزودن تکهکد CSS در **موبایل/تبلت** ![[obsidian-icon-smartphone.svg#icon]]، میتوانید مراحل زیر را دنبال کنید:
1. یک مدیر فایل بگشایید و گاوصندوق خود را پیدا کنید. میتوانید مسیر گاوصندوق را در _مدیریت گاوصندوقها…_ با ضربه زدن روی گاوصندوق و مشاهده مسیر بررسی کنید.
2. [[پوشه پیکربندی]] را بگشایید و اگر پوشهای به نام `snippets` وجود ندارد، آن را بسازید.
3. تکهکد CSS خود را به این پوشه اضافه کنید.
4. **[[تنظیمات]]** ![[lucide-settings.svg#icon]] Obsidian را بگشایید.
5. **ظاهر** را از سمت چپ انتخاب کنید.
6. به بخش **تکهکدهای سیاساس** پیمایش کنید.
7. روی **بازگیری تکهکدها** ![[lucide-refresh-cw.svg#icon]] ضربه بزنید تا فهرست ریفرش شود.
8. روی دکمه تغییر وضعیت ضربه بزنید تا تکهکد فعال شود.
همچنین میتوانید:
- هر تغییری را با سرویس همگامسازی خود [[همگامسازی یادداشتها در دستگاهها|همگامسازی]] کنید.
- از یک افزونهٔ انجمن برای ساختن تکهکد از درون Obsidian استفاده کنید.
پس از فعالسازی، Obsidian بهطور خودکار تغییرات تکهکدهای CSS را شناسایی کرده و هنگام ذخیره فایل آنها را اعمال میکند.
> [!tip] نیازی به راهاندازی مجدد Obsidian برای اعمال تغییرات نیست. با این حال، ممکن است لازم باشد از دستور [[فرماندان|پالت فرمانها]] برای بارگذاری مجدد Obsidian بدون ذخیرهسازی استفاده کنید تا تغییرات در پوسته یا یادداشت فعلی اعمال شود.
## نوشتن CSS برای Obsidian
Obsidian چندین روش ارائه میدهد که نوشتن CSS را آسانتر و قدرتمندتر میکند.
مجموعهای از [متغیرهای CSS](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables) برای تغییر آسان بخشهایی از Obsidian و یک [[ویژگیها#نوع ویژگی|نوع ویژگی]] داخلی برای تغییر ظاهر یک یا چند یادداشت دارد.
> [!example] متغیرها
> فایلی به نام `headers.css` با محتوای زیر بسازید تا رنگ شش [[سینتکس قالببندی پایه#سرفصلها|سطح سرفصل]] را به رنگینکمان تغییر دهید:
>
> ```css
> body {
> --h1-color: red;
> --h2-color: orange;
> --h3-color: yellow;
> --h4-color: green;
> --h5-color: blue;
> --h6-color: pink;
> }
> ```
> [!example] کلاسهای CSS
> نام یک کلاس CSS سفارشی (یا فهرستی از کلاسهای CSS) را به [[ویژگیها|ویژگی]] از پیش تعریفشده `cssclasses` اختصاص دهید تا یک یا چند یادداشت ظاهری متفاوت از بقیه داشته باشند.
>
> **CSS**:
> ```css
> .red-border img {
> border-color: #ff0000;
> border-style: solid;
> }
> ```
>
> **YAML/ویژگیها**:
> ```yaml
> cssclasses:
> - red-border
> ```
>
> در هر یادداشتی که مقدار `red-border` را در ویژگی `cssclasses` داشته باشد، تصاویر با حاشیه قرمز نمایش داده میشوند.
برای اطمینان از معتبر و قالببندی صحیح بودن فایل CSS، توصیه میکنیم آن را با ابزاری مانند [CSS Validation Service](https://jigsaw.w3.org/css-validator/) اعتبارسنجی کنید، زیرا CSS نامعتبر کار نخواهد کرد.
## اطلاعات بیشتر
- اگر تازهکار CSS هستید، [آموزش استایلدهی HTML با CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS) از Mozilla را بررسی کنید.
- برای اطلاعات بیشتر درباره استایلدهی Obsidian، ببینید:
- [درباره استایلدهی](https://docs.obsidian.md/Reference/CSS+variables/About+styling)
- [ساختن پوسته](https://docs.obsidian.md/Themes/App+themes/Build+a+theme)
- [ساختن پوسته Publish](https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Build+a+Publish+theme)
- [گردش کار CSS Inspector در Obsidian](https://forum.obsidian.md/t/obsidian-css-inspector-workflow/58178)