[vBulletin3.8] تركيب شريط بحث أنيق أعلى المنتدى

[ناصر]

إضافة مربع بحث واضح أعلى المنتدى

يمكن إضافة مربع بحث أعلى المنتدى لتسهيل الوصول إلى المواضيع، مع عبارة توضيحية مثل «ابحث عن خط، سكرابز أو صورة…» وأيقونة بحث SVG داخل الخانة.
الكود مخصص لاستايل الكمبيوتر في vBulletin 3.8، ويستخدم نظام البحث الموجود في المنتدى دون تركيب إضافة أو إجراء تعديلات على قاعدة البيانات.

مميزات مربع البحث

• أيقونة SVG خفيفة لا تحتاج إلى تحميل صورة خارجية.
• زر البحث يأخذ ألوان فئة button من الاستايل الحالي.
• عرض مرن بحد أقصى 500 بكسل.
• النص الإرشادي بحجم 13 بكسل، وكتابة المستخدم بحجم 16 بكسل.
• عرض نتائج البحث على شكل مواضيع.
• لا يحتاج إلى JavaScript.

طريقة التركيب

احتفظ بنسخة من محتوى القالب قبل التعديل.
من لوحة تحكم المنتدى، انتقل إلى الاستايلات والقوالب ← البحث في القوالب، ثم ابحث عن:

ad_header_logo

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

<!-- START DESKTOP HEADER SEARCH -->
<style type="text/css">
.forum-header-search {
    width: 100%;
    max-width: 500px;
    min-width: 0;
    margin: 10px auto;
    padding: 0 8px;
    box-sizing: border-box;
    direction: rtl;
}

.forum-header-search form {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.forum-header-search .forum-search-field {
    position: relative;
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
}

.forum-header-search .forum-search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #687589;
    pointer-events: none;
}

.forum-header-search .forum-search-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 5px 36px 5px 10px;
    border: 1px solid #cbd3df;
    border-radius: 3px;
    background: #ffffff;
    color: #222222;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
}

.forum-header-search .forum-search-input::placeholder {
    color: #687589;
    opacity: 1;
    font-size: 13px;
}

.forum-header-search .forum-search-input:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.forum-header-search .forum-search-button {
    flex: 0 0 auto;
    min-height: 36px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
}

.forum-header-search .forum-search-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media screen and (max-width: 480px) {
    .forum-header-search {
        padding: 0 4px;
    }

    .forum-header-search .forum-search-button {
        padding: 5px 10px;
    }
}
</style>

<div class="forum-header-search">
    <form action="search.php?do=process"
          method="post"
          role="search"
          aria-label="البحث في المنتدى">

        <input type="hidden"
               name="s"
               value="$session[sessionhash]" />

        <input type="hidden"
               name="securitytoken"
               value="$bbuserinfo[securitytoken]" />

        <input type="hidden" name="do" value="process" />
        <input type="hidden" name="showposts" value="0" />
        <input type="hidden" name="quicksearch" value="1" />

        <div class="forum-search-field">
            <input type="text"
                   name="query"
                   class="forum-search-input"
                   placeholder="ابحث عن خط، سكرابز أو صورة…"
                   aria-label="كلمات البحث"
                   enterkeyhint="search"
                   required="required" />

            <svg class="forum-search-icon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 aria-hidden="true"
                 focusable="false">
                <circle cx="10.5" cy="10.5" r="6.5"></circle>
                <path d="M16 16l5 5"></path>
            </svg>
        </div>

        <button type="submit"
                class="button forum-search-button">بحث</button>

    </form>
</div>
<!-- END DESKTOP HEADER SEARCH -->

تخصيص مربع البحث

لتغيير العبارة داخل الخانة، عدّل النص الموجود في:

placeholder="ابحث عن خط، سكرابز أو صورة…"

لتغيير الحد الأقصى لعرض المربع، عدّل القيمة التالية داخل قاعدة forum-header-search:

max-width: 500px;

لتغيير حجم النص الإرشادي فقط، عدّل font-size داخل قاعدة :laceholder:

.forum-header-search .forum-search-input::placeholder {
    color: #687589;
    opacity: 1;
    font-size: 13px;
}

ملاحظات بعد التركيب

• احفظ القالب، ثم جرّب البحث بكلمة موجودة في أحد مواضيع المنتدى.
• صلاحيات البحث وإعداداته تبقى كما هي؛ الكود لا يتيح البحث للزوار إذا كانت مجموعتهم ممنوعة منه.
• مكان ظهور المربع يعتمد على موضع استدعاء قالب ad_header_logo في الاستايل، وقد يظهر في الرئيسية وصفحات المواضيع والأقسام.
• إذا لم يظهر المربع، تأكد من تعديل الاستايل المستخدم ومن وجود المتغير $ad_location[ad_header_logo] في قالب header.
• قد يحتاج موضع المربع إلى ضبط إضافي إذا كان الاستايل يستخدم ترتيبًا مخصصًا للشعار أو مساحة ضيقة بجانبه.