[تمت اللإفادة] توسيط اسم القسم

[Abdo Hassn]

السلام عليكم ورحمة الله
اريد توسيط اسماء الاقسام وقطعة الادارة وقطعة اخر المشاركات وقطعة اخر المواضيع

 

[Abdo Hassn]

اقتباس من: Abdo Hassn

السلام عليكم ورحمة الله
اريد توسيط اسماء الاقسام وقطعة الادارة وقطعة اخر المشاركات وقطعة اخر المواضيع

وإضافة زر اسفل المنتدي لان لدي زر واحد لاعلي المنتدي

 

[النوميدي]

اقتباس من: Abdo Hassn

السلام عليكم ورحمة الله
اريد توسيط اسماء الاقسام وقطعة الادارة وقطعة اخر المشاركات وقطعة اخر المواضيع

لتوسيط **أسماء الأقسام (Node Titles) و قطعة الإدارة
و قطعة آخر المشاركات و قطعة آخر المواضيع في XenForo 2.3.4 ،
تحتاج تعديلات بسيطة في القوالب أو عبر CSS.

1. توسيط أسماء الأقسام (Node Titles)
اذهب إلى: Admin CP → Appearance → Templates
ابحث عن قالب: `node_list_forum` أو `node_list_category` (حسب ما تريد تعديله).

أو أسهل: استخدم CSS.​

.p-node-title {
    text-align: center;
}

2. توسيط قطعة الإدارة (Admin Block)
لو تقصد الشريط اللي يظهر فيه أدوات الإدارة داخل المنتدى (مثل أدوات المشرف)، هذا غالبًا الكلاس يكون:​

.blockMessage.blockMessage--important {
    text-align: center;
}

أو لو تستخدم `staffBar` (الشريط العلوي):​

.p-staffBar {
    text-align: center;
}

3. توسيط "آخر المشاركات" (في قائمة الأقسام)

افتح القالب:`node_forum`
وعدل التنسيق أو أضف CSS مثل:​

.node-extra {
    text-align: center;
}

4. توسيط "آخر المواضيع" (في الصفحة الرئيسية أو widgets)

لو عندك Widget فيه "آخر المواضيع"، استخدم الكلاس الخاص بالويدجت:​

.block-body .structItem-title {
    text-align: center;
}

ولو تستخدم "Latest Posts" widget الرسمي من XF:​

.widget--latestPosts .contentRow-title {
    text-align: center;
}

وين تضع الـ CSS؟

اذهب إلى: Appearance → Styles → Your Style → Templates → EXTRA.less
وألصق الأكواد .


هل تستخدم قالب معدل أو ستايل خاص؟ لو نعم، أعطني اسمه أو رابط حي وشوف وش تحتاج تحديدًا.​

 

[النوميدي]

اقتباس من: Abdo Hassn

وإضافة زر اسفل المنتدي لان لدي زر واحد لاعلي المنتدي

تمام، إذا عندك زر للذهاب لأعلى المنتدى
فقط (عادة يكون في الزاوية اليمنى السفلية باسم `go-to-top`)،
وتريد تضيف زر ثاني لأسفل الصفحة ، فالموضوع بسيط ويتم من خلال تعديل القالب وإضافة كود JS بسيط.

✅ الخطوات لإضافة زر "للأسفل":

1. افتح قالب `PAGE_CONTAINER`
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
ثم ابحث عن هذا الجزء غالبًا يكون في الأسفل:​

<xf:include template="scroll_button" />

أضف الكود التالي تحته مباشرة:​

<a href="javascript:void(0);" class="scroll-button scroll-button--down" title="الذهاب لأسفل">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>

2. أضف CSS للزر الجديد
اذهب إلى:Appearance → Templates → EXTRA.less
وأضف التالي:​

.scroll-button--down {
    position: fixed;
    bottom: 70px; /* فوق زر الأعلى */
    right: 20px;
    z-index: 999;
    background: @xf-linkColor;
    color: white;
    padding: 10px 12px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background 0.3s;
}

.scroll-button--down:hover {
    background: darken(@xf-linkColor, 10%);
}

> لو ما تستخدم Font Awesome، غير `<i class="fa fa-arrow-down">` إلى أيقونة SVG أو حتى نص عادي.

3. أضف JavaScript للتمرير لأسفل
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
وتحت `</footer>` مباشرة (أو في آخر الصفحة قبل `</body>`) أضف:​

<script>
document.addEventListener("DOMContentLoaded", function () {
    var scrollDownBtn = document.querySelector(".scroll-button--down");
    if (scrollDownBtn) {
        scrollDownBtn.addEventListener("click", function () {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        });
    }
});
</script>

يمكنك التعديل على أكواد CSS حسب ذوقك​

 

[Abdo Hassn]

اقتباس من: النوميدي

تمام، إذا عندك زر للذهاب لأعلى المنتدى
فقط (عادة يكون في الزاوية اليمنى السفلية باسم `go-to-top`)،
وتريد تضيف زر ثاني لأسفل الصفحة ، فالموضوع بسيط ويتم من خلال تعديل القالب وإضافة كود JS بسيط.

✅ الخطوات لإضافة زر "للأسفل":

1. افتح قالب `PAGE_CONTAINER`
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
ثم ابحث عن هذا الجزء غالبًا يكون في الأسفل:​

<xf:include template="scroll_button" />

أضف الكود التالي تحته مباشرة:​

<a href="javascript:void(0);" class="scroll-button scroll-button--down" title="الذهاب لأسفل">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>

2. أضف CSS للزر الجديد
اذهب إلى:Appearance → Templates → EXTRA.less
وأضف التالي:​

.scroll-button--down {
    position: fixed;
    bottom: 70px; /* فوق زر الأعلى */
    right: 20px;
    z-index: 999;
    background: @xf-linkColor;
    color: white;
    padding: 10px 12px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background 0.3s;
}

.scroll-button--down:hover {
    background: darken(@xf-linkColor, 10%);
}

> لو ما تستخدم Font Awesome، غير `<i class="fa fa-arrow-down">` إلى أيقونة SVG أو حتى نص عادي.

3. أضف JavaScript للتمرير لأسفل
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
وتحت `</footer>` مباشرة (أو في آخر الصفحة قبل `</body>`) أضف:​

<script>
document.addEventListener("DOMContentLoaded", function () {
    var scrollDownBtn = document.querySelector(".scroll-button--down");
    if (scrollDownBtn) {
        scrollDownBtn.addEventListener("click", function () {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        });
    }
});
</script>

يمكنك التعديل على أكواد CSS حسب ذوقك​

كفيت ووفيت ياطيب

 

[Abdo Hassn]

اقتباس من: النوميدي

1. افتح قالب `PAGE_CONTAINER`
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
ثم ابحث عن هذا الجزء غالبًا يكون في الأسفل:​

<xf:include template="scroll_button" />

هل هذة النقطة موجودة في Page_CONTAINER لأنني لم أراه للعلم النسخة ٢.٣.٤

 

[الداعية أبوعبدالله]

السلام عليكم ورحمة الله وبركاته

حياك الله أخي الكريم​

Abdo Hassn​

وبارك الله بأخونا


النوميدي


لسيعيه لايجاد حال لمشكلتك , ان لم تتم الفائدة فما عليك الا بالتواصل من أخونا , ملاحظة أرجوزا منك متابعة مشكلتك حتى لايغلق الموضوع بسبب عدم المتابعة..!! كما أرجوا منك ان تمت الفائدة تخبرنا وجزاك الله خير

والله الموفق













​

 

[Abdo Hassn]

اقتباس من: الداعية أبوعبدالله

السلام عليكم ورحمة الله وبركاته

حياك الله أخي الكريم​

Abdo Hassn​

وبارك الله بأخونا


النوميدي


لسيعيه لايجاد حال لمشكلتك , ان لم تتم الفائدة فما عليك الا بالتواصل من أخونا , ملاحظة أرجوزا منك متابعة مشكلتك حتى لايغلق الموضوع بسبب عدم المتابعة..!! كما أرجوا منك ان تمت الفائدة تخبرنا وجزاك الله خير

والله الموفق













​

جزاك الله خيرا اخي
تمت الفائدة في اشياء كثيرة ما عدا زر النزول الي الأسفل

 

[النوميدي]

اقتباس من: Abdo Hassn

هل هذة النقطة موجودة في Page_CONTAINER لأنني لم أراه للعلم النسخة ٢.٣.٤

تمام، هذا طبيعي. في XenForo 2.3.x ، زر الرجوع للأعلى غالبًا مدموج عبر JavaScript
وليس مضمّن يدويًا في `PAGE_CONTAINER`. ما عندك مشكلة،
بنضيف زر النزول لأسفل يدويًا بدون ما نعتمد على كود قديم.

✅ نفّذ التالي حرفيًا:
1. افتح قالب: `PAGE_CONTAINER`
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
ابحث عن نهاية القالب، قرب سطر `</body>`.
قبل هذا السطر مباشرة، ألصق الكود التالي:​

<a href="javascript:void(0);" class="scroll-button scroll-button--down" title="الذهاب لأسفل">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const downBtn = document.querySelector(".scroll-button--down");
    if (downBtn) {
        downBtn.addEventListener("click", function () {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        });
    }
});
</script>

2. افتح قالب: `extra.less`
اذهب إلى: Appearance → Templates → extra.less
وأضف الكود التالي لتنسيق الزر:​

.scroll-button--down {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 1000;
    background: @xf-linkColor;
    color: #fff;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: background 0.3s ease;
}
.scroll-button--down:hover {
    background: darken(@xf-linkColor, 10%);
}

⚠️ إذا الزر ما طلع، تأكد إن القالب ما فيه خطأ بعد اللصق.
إذا ما تستخدم Font Awesome، استبدل `<i class="fa fa-arrow-down">` بـ:​

↓

⚠️ أو استخدم SVG لأي سهم تريده.​

 

[Abdo Hassn]

اقتباس من: النوميدي

تمام، هذا طبيعي. في XenForo 2.3.x ، زر الرجوع للأعلى غالبًا مدموج عبر JavaScript
وليس مضمّن يدويًا في `PAGE_CONTAINER`. ما عندك مشكلة،
بنضيف زر النزول لأسفل يدويًا بدون ما نعتمد على كود قديم.

✅ نفّذ التالي حرفيًا:
1. افتح قالب: `PAGE_CONTAINER`
اذهب إلى:Admin CP → Appearance → Templates → PAGE\_CONTAINER
ابحث عن نهاية القالب، قرب سطر `</body>`.
قبل هذا السطر مباشرة، ألصق الكود التالي:​

<a href="javascript:void(0);" class="scroll-button scroll-button--down" title="الذهاب لأسفل">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const downBtn = document.querySelector(".scroll-button--down");
    if (downBtn) {
        downBtn.addEventListener("click", function () {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        });
    }
});
</script>

2. افتح قالب: `extra.less`
اذهب إلى: Appearance → Templates → extra.less
وأضف الكود التالي لتنسيق الزر:​

.scroll-button--down {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 1000;
    background: @xf-linkColor;
    color: #fff;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: background 0.3s ease;
}
.scroll-button--down:hover {
    background: darken(@xf-linkColor, 10%);
}

⚠️ إذا الزر ما طلع، تأكد إن القالب ما فيه خطأ بعد اللصق.
إذا ما تستخدم Font Awesome، استبدل `<i class="fa fa-arrow-down">` بـ:​

↓

⚠️ أو استخدم SVG لأي سهم تريده.​

جزاك الله خيرا اخي الغالي تمت الإفادة اخي الكريم شكرا لك

 

[النوميدي]

تمت الفائدة
يغلق الموضوع بعد إذنكم​