بانر البحث المتقدم

[Discourse]

Note

We are planning to deprecate support for this theme component soon and advise you to use the welcome banner feature instead.

	Summary	Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

By default, this banner appears on all top-level topic pages (latest/new/unread/top/categories… anything in the top menu site setting) but it can also be set to only display on a community’s homepage.

Settings

Name	Description
show on	This determines which pages the banner appears
plugin outlet	Where on the page the banner will appear
background image light	Background image for the banner on light color palettes
background image dark	Background image for the banner on dark color palettes
tile background image	Repeat the background image
show for	Who can see the Search Banner (logged in, logged out, or both)
special style	Optional variations that change the appearance of the search banner

Translation	Default
search_banner.headline	Welcome to our community
search_banner.subhead	We’re happy to have you here. If you need help, please search before you post.
search_banner.search_button_text

To omit one from display, leave the field blank.

Custom styling

The HTML element gets a class named .display-search-banner wherever this banner appears, and the banner itself is wrapped with the .custom-search-banner class, so with some CSS you should be able to customize the appearance of this banner however you see fit.

Future enhancements

• Add an option to enable the banner in specific categories

Credits

This very heavily borrows from @angus’ Pavilion Header Search Theme Component

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @Moin 2025-11-10T16:26:58Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

لقد أجريت للتو تحديثًا بسيطًا يضيف نمطًا اختياريًا لهذا المكون، ويمنحك شريط بحث كبير بدون نص عنوان:

يمكن تمكين هذا عن طريق إعداد جديد “نمط خاص”. كل ما يفعله هذا هو تمكين بعض CSS الإضافية.

قد أضيف بعض الخيارات الأخرى هنا في المستقبل أيضًا!

[AndyBr (Andy)]

كيف يمكنني تغيير لون نص الترحيب في هذه الإضافة؟

[Arkshine]

لا يوجد إعداد لذلك. ومع ذلك، يمكنك إضافته باستخدام بعض CSS:

أضف ما يلي إلى السمة الخاصة بك أو إلى مكون سمة جديد، وقم بالتغيير حسب رغبتك.

.search-banner > .custom-search-banner {
    /* title */
    h1 {
        color: #286989;
    }

    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

شكراً جزيلاً!

[RBoy]

هل هناك طريقة لإخفاء أيقونة البحث (باستخدام CSS أو غير ذلك)؟ أواجه مشكلة حيث تتكرر أيقونة البحث عند استخدامها مع هذا المكون: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

يجب عرض أيقونة بحث واحدة فقط. ومع ذلك، فإن استخدام لافتة البحث والبحث في الرأس معًا له بعض الآثار الجانبية السيئة لتجربة المستخدم.

أوصي باستخدام أحدهما أو الآخر فقط.

[RBoy]

شكرًا! مفيد جدًا

@isaac

أود أن أقول مع ذلك، فإن استخدام لافتة البحث والبحث في الرأس معًا له بعض الآثار الجانبية السيئة لتجربة المستخدم.

هل يمكنك توضيح ما هي الآثار الجانبية لتجربة المستخدم؟

[isaac (Isaac Janzen)]

يُظهر الفيديو الذي أشرت إليه أعلاه بعض المشكلات

• قوائم البحث المنسدلة المتداخلة
• حالات فتح وإغلاق غريبة لقوائم البحث المنسدلة
• أيقونة البحث هي رابط للبحث المتقدم في مربع إدخال بحث واحد وليست في الآخر
• إلخ

[RBoy]

حسناً. طالما أنهما ليسا معاً في نفس الصفحة، فلا ينبغي أن تكون هناك مشكلة.

[مباركمبارك (مبارك)]

هل يمكن لأحد مساعدتي؟ لقد قمت بتثبيت هذا القالب على منصة Discourse الخاصة بي ولكن الصورة مقطوعة من الجانب الأيمن، لكي تتناسب الصورة بالكامل يجب عليّ ضبط خط الموقع على “أصغر” لديّ تثبيتان مختلفان لـ Discourse وفي إحداهما عملت الصورة بشكل طبيعي، في الأخرى لماذا الصورة مقطوعة؟

[awesomerobot (Kris)]

هل يمكنك تضمين لقطة شاشة؟ سيؤدي ذلك إلى تسهيل فهم المشكلة بشكل كبير

[ecki (Bernd)]

لدي نفس المشكلة حيث تعرض المتصفحات/الأوضاع المختلفة أجزاء مختلفة من تلك الصورة. لقد قمت بحلها بجعلها عريضة جدًا، بحيث لا يظهر الجانب الأيمن إلا في بعض الظروف. لكن هذا ليس سهلاً جدًا للصور المتماثلة. أعتقد أن المزيد من CSS (دون البحث عن تجاوز لمكون thome) سيساعد في ذلك.

[مباركمبارك (مبارك)]

تمكنت من حل جزء منه، قمت بتعطيل مكون السمة في السمات الأخرى وتركته واحدًا فقط، ومن المدهش أنه يبدو أن الصورة كانت “طبيعية” بحجم الخط “طبيعي” فقط بسبب الهاتف الخلوي الذي يظهر فيه جانب واحد فقط من الصورة، هل هناك أي شيء يمكنني فعله لجعله يظهر بالكامل على هاتفي الخلوي أيضًا؟

[Surbhi_Pal1 (Surbhi)]

مرحباً،

هل هناك طريقة لإزالة المسافة بين شريط البحث والرأس؟

[Arkshine]

مرحباً، يمكنك استخدام CSS هذا في مكون سمة جديد:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

عمل بشكل مثالي، شكرا!

[PT_LB (Paul)]

يبدو أن Discourse لديه نفس المشكلة التي أواجهها في مجتمعي، يستغرق التراكب بعض الوقت لتغطية أي شيء تحت طبقة البحث (Discover):

وهو أكثر وضوحًا في مجتمعي:

أتساءل عما إذا كان أي شخص قد واجه حلاً لذلك، ربما تأخير في عرض التراكب؟ قد يؤدي ذلك إلى تجربة سيئة.