Easy Responsive Footer

مكون السمة
,
1

||||\n-|-|-|\n:discourse2: | ملخص | Easy Responsive Footer سيمكنك من بناء تذييل متجاوب بالكامل باستخدام نص عادي فقط.\n| : eyeglasses: | معاينة | معاينة على منشئ سمات Discourse |\n:hammer_and_wrench: | رابط المستودع | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e\n:open_book: | جديد في سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse\n\n\nتثبيت مكون السمة هذا\n\n\n[quote]\n\n:discourse2: نظرًا لأن هذا مكون سمة #رسمي تتم صيانته بواسطة فريق Discourse، يمكن تقديم طلبات #الدعم، #الأخطاء، #تجربة_المستخدم، و #الميزات في الفئات المعنية هنا على Meta، ووضع علامة عليها بعلامة مكون السمة المناسبة. انقر على رابط أدناه لبدء أحدها. :+1: \n\n\u003ckbd\u003e :question:\u0026nbsp;الدعم \u003c/kbd\u003e \u003ckbd\u003e :bug:\u0026nbsp;خطأ \u003c/kbd\u003e \u003ckbd\u003e :eyes:\u0026nbsp;تجربة المستخدم \u003c/kbd\u003e \u003ckbd\u003e :bulb:\u0026nbsp;ميزة\u003c/kbd\u003e\n\n[/quote]\n\n\n\n### الميزات\n\nسطح المكتب\n\n1 \n\nالهاتف المحمول\n\n2 \n\n### الإعدادات\n\n| الاسم | الوصف\n|-|-|\n| heading | نص العنوان في التذييل - يمكنك استخدام اسم موقعك على سبيل المثال - الحد الأقصى للطول 25 حرفًا\n| blurb | أدخل وصفًا موجزًا لمجتمعك - الحد الأقصى للطول 180 حرفًا\n| sections | الأقسام التي سيتم عرضها في التذييل | روابط صغيرة\n| social links | روابط التواصل الاجتماعي التي ترغب في إضافتها إلى التذييل\n| show footer on login required page | حدد هذا الإعداد إذا كنت تريد عرض التذييل على صفحة تسجيل الدخول المطلوبة (ينطبق فقط إذا كان موقعك خاصًا)\n| svg icons | قائمة أيقونات FontAwesome 5 المستخدمة في إعداد روابط التواصل الاجتماعي أعلاه.\n\nهناك ستة إعدادات في هذا المكون ستساعد في تكوينه بسهولة\n\n1. العنوان\n\n نص العنوان في التذييل - يمكنك استخدام اسم موقعك على سبيل المثال - الحد الأقصى للطول 25 حرفًا\n 3 \n\n2. الوصف المختصر \n\n وصف موجز لمجتمعك - الحد الأقصى للطول 180 حرفًا\n 4 \n\n3. أقسام الروابط\n\n أضف أقسام روابط. العدد المثالي للأقسام هو ستة. عنصر واحد في كل سطر بهذا الترتيب: النص، العنوان\n النص: ما يظهر في التذييل\n العنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق العنصر.\n 5 \n\n4. الروابط\n\nأضف روابط إلى أقسام الروابط. عنصر واحد في كل سطر بهذا الترتيب:\nالأب، النص، الرابط، الهدف، العنوان\nمن الجيد إبقاء عدد الروابط تحت كل قسم متشابهًا\nالأب: اسم القسم الأب الذي يظهر تحته هذا الرابط. استخدم قيمة النص من القائمة أعلاه\nالنص: النص الذي يظهر لهذا الرابط\nالرابط: المسار الذي يشير إليه هذا العنصر. يمكنك استخدام مسارات نسبية أيضًا.\nالهدف: اختر ما إذا كان هذا العنصر سيفتح في علامة تبويب جديدة أو في نفس علامة التبويب. استخدم blank لفتح الرابط في علامة تبويب جديدة، أو استخدم self لفتحه في نفس علامة التبويب.\nالعنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق الرابط.\n\n6 \n\n5. الروابط الصغيرة\n\nيمكنك إضافة روابط صغيرة في أسفل التذييل مثل شروط الخدمة والخصوصية. عنصر واحد في كل سطر بهذا الترتيب:\nالنص، الرابط، الهدف\nالنص: النص الذي يظهر للرابط الصغير\nالرابط: المسار للرابط\nالهدف: استخدم blank لفتح الرابط في علامة تبويب جديدة واستخدم self لفتحه في نفس علامة التبويب\n\n7 \n\n6. روابط التواصل الاجتماعي\n\nأدخل روابط التواصل الاجتماعي التي ترغب في إضافتها إلى التذييل بهذا التنسيق:\nالموفر، العنوان، الرابط، الهدف\nالموفر: اسم الموفر مثل فيسبوك أو تويتر\nالعنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق الرابط\nالرابط: المسار الذي ترغب في أن يكون للرابط\nالهدف: استخدم blank لفتح الرابط في علامة تبويب جديدة واستخدم self لفتحه في نفس علامة التبويب\n\n8 \n\n### ملاحظات\n\n1. تركت العناصر النائبة كإعدادات افتراضية للمكون حتى تتمكن من رؤية شكل إعداداتك بسهولة.\n\n2. سيستخدم هذا المكون مخطط ألوان السمة الخاص بك لتوليد الألوان المستخدمة للعناصر فيه. ولكن تم إضافة فئات فريدة لجميع العناصر في حال كنت ترغب في تجاوز شيء ما.\n\n3. نظرًا لأن هذا المكون يستخدم إعدادات السمة، فهذا يعني أنه يمكنني تحديثه في المستقبل لإصلاحه أو تحسينه ولن تضيع البيانات التي تدخلها :tada:\n\n\u003cbr\u003e\n\n\u003e:discourse2: مستضاف من قبلنا؟ مكونات السمة متاحة للاستخدام على خططنا Pro و Business و Enterprise.

110 إعجابات
109

I pushed some fixes.

Key changes:

  • the component now uses CSS variables, so it’s dark-mode compatible

  • some fixes to media queries to fix the bug @mbauman reported

  • added a setting that allows you to control whether or not the footer is displayed on login-required pages

    image
    image1102×307 37.7 KB

The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use
  }
}

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.

7 إعجابات
112

I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

1_1
1_11168×604 29.2 KB

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated :relaxed:

إعجابَين (2)
113

اعتمادًا على ما تريد القيام به، يمكنك ببساطة تجربة شيء مثل هذا:

  • في إعدادات سمة التذييل المتجاوب السهل (Easy responsive footer)، احذف النص الموجود داخل إعداد Blurb. إذا أردت، يمكنك حتى حذف النص الموجود داخل إعداد Heading.

  • أنشئ مكون سمة جديدًا وأضف في علامة التبويب Common > CSS

    .custom-footer .first-box .blurb::before {
    background-image: url(LOGO-URL);
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    /* قم بتغيير الإعدادات أدناه بناءً على حجم شعارك */
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
}

وستكون النتيجة شيئًا كهذا:

image

14 إعجابًا
114

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

4 إعجابات
122

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

4 إعجابات
123

hello Joe, can weadd more widget same here

image
image1518×420 31.4 KB

126

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

إعجاب واحد (1)
132

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

إعجابَين (2)
136

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

إعجاب واحد (1)
137

@bekircem
Going beyond the character limit may break some things, but you can try:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}
5 إعجابات
138

Is that possible to add texts to link sections without href attribute?

إعجاب واحد (1)
139

Just add an # where the url goes

4 إعجابات
140

In this case it still appears as a clickable url. Is there a way to add without getting the a tag?

إعجاب واحد (1)
142

يمكنك إضافة هذا الـ CSS إلى السمة الخاصة بك في مكان ما

.custom-footer a[href="#"] {
  pointer-events: none;
}
3 إعجابات
149

لقد قدمت هذا:

والذي يجب أن يصلح إهمالًا مع puginId مفقود. لم أختبره ، ولكنه يبدو صحيحًا لي.

تحرير: ولكنه ليس صحيحًا على الإطلاق.

3 إعجابات
160

ملاحظة: خطأ <<< إذا أضفت ما يلي… “Community, Tags List, /tags, self, List of all Tags” … يتم عرض خط أفقي في الواجهة الأمامية. إذا قمت بإزالة المسافة بين “Tags List” وتغييرها إلى “TagsList”، يختفي الخط الأفقي.

إعجاب واحد (1)
161

مرحباً، لدي مشكلتان مع الروابط الاجتماعية وأيقونات Fontawesome.

  1. أحاول إعداد أيقونات Fontawesome 5 أخرى في منطقة التواصل الاجتماعي، لكنها لا تظهر.
    أريد <i>fad fa-home</i>

  2. قمت بإعداد رابط GitHub وهو يظهر الأيقونة بالفعل على الصفحة، على الرغم من أنني لم أضف الأيقونة فعليًا في قائمة أيقونات svg.

Bildschirmfoto 2022-02-12 um 11.11.18
Bildschirmfoto 2022-02-12 um 11.11.18480×519 45.2 KB

تحديث: تم حل المشكلة بمجرد استخدام اسم الأيقونة “home”

إعجابَين (2)
162

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

يمكن إجراء الاختبار هنا: https://forum.tzm.community/

تأكد من فتحه على هاتف (أو استخدم خيار التصحيح في متصفحك، في فايرفوكس يمكنك تشغيل الخطأ باستخدام ملف تعريف Linux لجهاز Galaxy Note 20).

إعجابَين (2)
163

تم إصلاح المكون. تحتاج إلى تحديثه.

4 إعجابات