---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9'
title: 'تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:25:06+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  محتوى DXPR Builder جزء من الصفحة التي يعرضها قالبكم، فيُنسّقه CSS الخاص
  بقالبكم في المحرّر وعلى الصفحة المنشورة. استخدموا هذه الصفحة عندما يجب أن
  يتكرر مظهر عبر عناصر أو صفحات كثيرة، أو عندما تعجز إعدادات العنصر عن إنتاجه.
  وتنتهون بورقة أنماط في قالبكم وفئة يستطيع المحرّرون تطبيقها. ولعنصر واحد،
  استخدموا مربع حوار إعداداته.
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم'
      description: |-
        محتوى DXPR Builder جزء من الصفحة التي يعرضها قالبكم، فيُنسّقه CSS الخاص
        بقالبكم في المحرّر وعلى الصفحة المنشورة. استخدموا هذه الصفحة عندما يجب أن
        يتكرر مظهر عبر عناصر أو صفحات كثيرة، أو عندما تعجز إعدادات العنصر عن إنتاجه.
        وتنتهون بورقة أنماط في قالبكم وفئة يستطيع المحرّرون تطبيقها. ولعنصر واحد،
        استخدموا مربع حوار إعداداته.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:25:06+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9'
      articleSection: 'طابقوا علامتكم'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9'
      description: |-
        محتوى DXPR Builder جزء من الصفحة التي يعرضها قالبكم، فيُنسّقه CSS الخاص
        بقالبكم في المحرّر وعلى الصفحة المنشورة. استخدموا هذه الصفحة عندما يجب أن
        يتكرر مظهر عبر عناصر أو صفحات كثيرة، أو عندما تعجز إعدادات العنصر عن إنتاجه.
        وتنتهون بورقة أنماط في قالبكم وفئة يستطيع المحرّرون تطبيقها. ولعنصر واحد،
        استخدموا مربع حوار إعداداته.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[إدارة الموقع](/ar/hc/documentation/learn-dxpr-builder/manage) /[طابقوا علامتكم](/ar/hc/documentation/learn-dxpr-builder/customization) # تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم.

 تعلّم DXPR Builderإدارة الموقعطابقوا علامتكم

   ## في هذا الدليل

 أدلة ذات صلة

- [فئات الأدوات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%81%D8%A6%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA)
- [استخدام خطوط علامتكم على صفحات المنشئ](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D8%AE%D8%B7%D9%88%D8%B7-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9)
- [إضافة أنماط العلامة وأزرارها إلى محرر النصوص](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%85%D8%AD%D8%B1%D8%B1-%D8%A7%D9%84%D9%86%D8%B5%D9%88%D8%B5)

محتوى DXPR Builder جزء من الصفحة التي يعرضها قالبكم، فيُنسّقه CSS الخاص بقالبكم في المحرّر وعلى الصفحة المنشورة. استخدموا هذه الصفحة عندما يجب أن يتكرر مظهر عبر عناصر أو صفحات كثيرة، أو عندما تعجز إعدادات العنصر عن إنتاجه. وتنتهون بورقة أنماط في قالبكم وفئة يستطيع المحرّرون تطبيقها. ولعنصر واحد، استخدموا [مربع حوار إعداداته](/hc/documentation/learn-dxpr-builder/element-settings).

## قبل أن تبدؤوا

- تحتاجون إلى الوصول إلى ملفات قالبكم وطريقة لنشرها.
- استخدموا قالبًا مخصصًا أو قالبًا فرعيًا. فتحديث قالب مُساهَم به يستبدل ملفاته، ومعها CSS الخاصة بكم.

## الإعداد

1. أنشئوا `css/custom.css` في مجلد قالبكم، مثلًا `themes/custom/mytheme/css/custom.css`.
2. أعلنوا الملف في `mytheme.libraries.yml`:

    ```yaml
    global-styling:
      css:
        theme:
          css/custom.css: {}

    ```
3. حمّلوا المكتبة على كل صفحة من `mytheme.info.yml`:

    ```yaml
    libraries:
      - mytheme/global-styling

    ```
4. اكتبوا قاعدة لاسم فئة من اختياركم:

    ```css
    .brand-hero {
      background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
      color: #ffffff;
    }

    ```
5. امسحوا ذاكرة التخزين المؤقت في **الإعدادات** > **التطوير** > **الأداء** (`/admin/config/development/performance`) باستخدام **مسح كل ذاكرات التخزين المؤقت**، أو شغّلوا `drush cr`.
6. في المنشئ، افتحوا إعدادات **مقطع** وأضيفوا `brand-hero` ضمن **فئات HTML**. يعرض [معرّف HTML والفئات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9) كيفية كتابة فئة من اختياركم.

يستطيع المحرّرون أيضًا اختيار الفئة من قائمة **فئات HTML** متى سردها قالبكم هناك؛ انظر [فئات الأدوات](/ar/hc/documentation/learn-dxpr-builder/customization/utility-classes).

## ما الذي ترونه

يأخذ المقطع التدرج والنص الأبيض فور إضافة الفئة، لأن المحرّر يعمل على الصفحة التي يعرضها قالبكم. ويرى الزوار الشيء نفسه بعد حفظ الصفحة. وتُخزَّن الفئة في HTML الخاص بالصفحة، فتغيير القاعدة لاحقًا يحدّث كل عنصر يحملها.

## الفئات التي يكتبها DXPR Builder

فئتكم الخاصة هي الهدف الأكثر أمانًا. وهذه الفئات في HTML المحفوظ أيضًا:

| المنتقي | يطابق |
|---|---|
| `.az-container` | غلاف كل حقل DXPR Builder؛ وهو يحمل أيضًا `.dxpr-editor` بينما يحرّره شخص ما |
| `.az-section` | كل **مقطع**؛ وداخله يقع `.container`، أو `.container-fluid` عندما يكون **العرض الكامل** مفعّلًا |
| `.row` | كل **صف**؛ يستخدم DXPR Builder فئة Bootstrap نفسها ولا يضيف `az-row` |
| `.col-*` | كل عمود، مثلًا `.col-12.col-md-6`؛ ولا يوجد `az-column` |
| `.az-text`، `.az-image`، `.az-button`، `.az-card` | نوع عنصر واحد: `az-` إضافة إلى اسم العنصر، مثل `.az-separator` للفاصل |
| `.az-element` | معظم عناصر المحتوى، لكن ليس الصورة ولا الأيقونة ولا الزر |

تكتب لوحة **النمط** سمات `style` مضمّنة، التي تتغلب على قاعدة فئة على الخاصية نفسها. وفئات أدوات Bootstrap موسومة بـ `!important` وتتغلب على كليهما.

## إذا لم تروا النمط

- **الفئة على العنصر، لكن لا شيء يتغير.** المكتبة غير محمّلة، أو ما زالت ذاكرة التخزين المؤقت تحمل CSS القديم. تحققوا من أن `mytheme.info.yml` يسرد المكتبة، ثم امسحوا ذاكرات التخزين المؤقت في `/admin/config/development/performance`.
- **تنطبق بعض الخصائص فقط.** تتغلب قيمة لوحة **النمط** على الخاصية نفسها. امسحوا تلك القيمة في لوحة **النمط** الخاصة بالعنصر، أو انقلوا المظهر كله إلى فئتكم.
- **يظهر النمط في المحرّر لكن ليس للزوار.** **تطبيق مرشّحات صيغة النص على محتوى الواجهة** مفعّل، وصيغة نص الحقل تجرّد سمات `class`. أغلقوه ضمن **مرشّحات النصوص** في `/admin/dxpr_studio/dxpr_builder/settings`، أو اسمحوا بالفئات في الصيغة.
- **لا تطابق قاعدة لـ `.az-row` أو `.az-column` أبدًا.** لا يكتب DXPR Builder تلك الفئات. استهدفوا `.row` أو فئات `.col-*` أو فئتكم الخاصة.

## ما الخطوة التالية؟

- [فئات الأدوات](/ar/hc/documentation/learn-dxpr-builder/customization/utility-classes): اسردوا فئاتكم ضمن **فئات HTML** ليختارها المحرّرون.
- [خطوط مخصصة](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D8%AE%D8%B7%D9%88%D8%B7-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9): حمّلوا خطوط العلامة بالطريقة نفسها.
- [محرر النصوص](/ar/hc/documentation/learn-dxpr-builder/customization/text-editor): اعرضوا فئات للفقرات والكلمات في قائمة **الأنماط**.