شرح ربط منتدى زينفورو xenforo مع Google 2020

إذا كنت ترغب في الحفاظ على الأمور بسيطة (وليس لديك أي قدرة على تحرير الرسومات ، مثلي) ، فسيكون شعار النص مناسبًا لك.

لا مزيد من العبث مع برامج الرسومات والخروج بشيء يبدو أنه تم إنشاؤه بواسطة طفل عمره 8 سنوات.

كما أنه من الأسهل بكثير تغيير شعار أنماط متعددة والشعارات الموسمية ، إلخ.
المزيد عن ذلك في وقت لاحق.

هناك خطوتان بسيطتان مطلوبتان لاستبدال شعار الصورة بالنص.

ابحث عن هذا السطر في قالب PAGE_CONTAINER (حول السطر 120):

<img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                        {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />

استبدلها بهذا:

<span class="ctaLogoText">{$xf.options.boardTitle}</span>

ثم ابحث عن هذا السطر (حول السطر 141):

<img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                    {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />

استبدلها بهذا:

<span class="ctaLogoTextSmall">{$xf.options.boardTitle}</span>

النص باللون البرتقالي والأرجواني عبارة عن فصول CSS تستخدم لتصميم شعار الشاشات القياسية والصغيرة.
النص الأخضر هو نص الشعار.

أنا هنا أستخدم عنوان اللوحة من الخيارات ، لكن يمكنك فقط استخدام النص القياسي ، على سبيل المثال:

<span class="ctaLogoText">Clip The Apex</span>

يجب أن تكون النتيجة النهائية عند عرض التغييرات المخصصة على القالب كما يلي:

بعد ذلك ، فقط أضف التصميم الذي تريده إلى القالب extra.less ، مثل ذلك:

.ctaLogoText,
.ctaLogoTextSmall
{
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 800;
    font-family: 'Arial', sans-serif;
    color: #ff9900;
}

.ctaLogoTextSmall
{
    font-size: 14px;
}

.p-nav-smallLogo
{
    max-width: 140px;
}

.p-nav-smallLogo a
{
    text-decoration: none;
}

.p-nav-smallLogo img
{
    display: inline;
}

.p-header-content
{
    padding: 0 0;
}

تحتوي الكتلة الأولى من الشفرة على تصميم مشترك للشعار لجميع أحجام الشاشة.

الإدخالات الأخرى هي في المقام الأول لضمان عرض الشعار بشكل صحيح على أصغر العروض.

النتيجة النهائية هي:

ضبط التصميم والقيم لتناسب.

مع هذا النهج ، يكون تحديث الشعار سريعًا وسهلاً.

إذا كنت ترغب في إضافة بعض الصور لـ Halloween ، على سبيل المثال ، يمكنك القيام بذلك عن طريق تحرير قالب PAGE_CONTAINER مرة أخرى.

هنا سأقوم بإضافة بعض الرموز التعبيرية وأيضًا تغيير العنوان:

<span class="ctaLogoText">{{ '? ? Crypt The Apex ?? ?'|emoji }}</span>



...



<span class="ctaLogoTextSmall">{{ '? Crypt The Apex ?'|emoji }}</span>

| شخصية الأنابيب مرشح. يأخذ القيمة بين '' (السلسلة مع النص والرموز التعبيرية) ويطبق مرشح الرموز التعبيرية.

مرشح الرموز التعبيرية يستبدل الرموز التعبيرية الحقيقية بالصور.

لاستيعاب هذه التغييرات ، يجب أيضًا تحديث الإدخالات في القالب extra.less ولكن عادةً فقط لحجم الخط الصغير والحشو (إذا رغبت في ذلك):

.ctaLogoTextSmall
{
    font-size: 10px;
}

.p-header-content
{
    padding: 2px 0;
}

والنتيجة هي هذه:

مرة أخرى ، تغيير التصميم لتناسب.

إليك نسخة أخرى لعيد الميلاد ، استغرقت ثوانٍ فقط:

من الواضح أن هذه أمثلة بسيطة للغاية.
الشعارات الأكثر تعقيدًا ممكنة من خلال استخدام CSS بفعالية.