ثيم Discourse Vincent

[Johani (Joe)]

This post is a WIP

Beta testers needed for a new theme.

---

Theme repo:

GitHub - discourse/discourse-vincent-theme: v0.77 · GitHub

Compressed Screenshots:

will look much better on your screen, image compression cases artifacts / blur. Also, I will update the screenshots as the theme takes shape

Homepage

Composer

Topic page

Topic replies

---

Color schemes

Vincent Dark Blue

Vincent Dark Red

Vincent Dark Green

Vincent Dark Magenta

Vincent Dark Orange

Vincent Dark Teal

---

custom backgrounds

(these are samples only, you need to provide your own background images)

---

Installation:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Don’t forget to set the color scheme to one of the color schemes that come with the theme

---

The thin header is optional. If you want the thin header you need to add a theme component which you can find here:

Thin Header

Summary Thin Header reduces the height of the default Discourse header. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-thin-header-theme-component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Before [Default Discourse header] After [Modified Discourse header] It reduces the header height by about …

---

This is a beta theme. Kindly report any issues in this post.

Feedback / suggestions welcome

[schap]

هل يواجه أي شخص مشاكل في إنشاء الفئات؟ في كل مرة أضغط فيها على قائمة الهامبرغر، يتم إضافة علامة " + " بالأسفل ولا تنقلني إلى أي مكان.

[cjk77 (Chris Klugewicz)]

نفس السلوك هنا

لم ألاحظ ذلك، حيث لم أنشئ فئة جديدة منذ فترة.

[simon]

@schap

هل يواجه أي شخص مشاكل في إنشاء التصنيفات؟

لقد اختبرت هذا للتو وواجهت نفس المشكلة. يبدو أن الكود المستخدم لإنشاء قائمة منسدلة لمسؤول التصنيفات قد تغير في Discourse. يبدو أن تحديث المظهر لاستخدام الكود التالي لإنشاء القائمة المنسدلة يحل المشكلة:

{{#if showCategoryAdmin}}
    {{categories-admin-dropdown
    onChange=(action "selectCategoryAdminDropdownAction")
  }}
{{/if}}

سنقوم بإصلاح هذا قريبًا جدًا.

[schap]

@سيمون، منشور: 263، موضوع: 76662

{{#if showCategoryAdmin}} {{categories-admin-dropdown onChange=(action “selectCategoryAdminDropdownAction”) }} {{/if}}

سؤال للمبتدئين، لكن أين يمكنني تطبيق هذا؟

[simon]

@schap

أين يمكنني تطبيق هذا؟

طبّقت ذلك عن طريق تحرير قسم /head في المظهر. قمت باستبدال كتلة الكود هذه:

  {{#if showCategoryAdmin}}
    {{categories-admin-dropdown
      create=createCategory
      reorder=reorderCategories}}
  {{/if}}

بـ:

  {{#if showCategoryAdmin}}
      {{categories-admin-dropdown onChange=(action "selectCategoryAdminDropdownAction") }}
  {{/if}}

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

[Anatolia]

كيف يمكنني تغيير لون النص الرئيسي لهذا السمة؟

كما أن هذه المشكلة لا تزال مستمرة:

@InceptionTime

أثناء التواجد في فئة ما، لا يتم محاذاة الشريط العلوي بشكل صحيح، ويظهر زر بشكل معطوب بصريًا:

يجب أن تكون قوائم “جديد” و"غير مقروء" مخفية ما لم يكن هناك موضوع جديد، كما هو الحال في سمة Discourse الأصلية.

@Johani

أخيرًا، بدأت العمل على Vincent Light ( غير مضمن في المستودع بعد)، وسأقوم بالتحديث عندما يكون جاهزًا للإصدار.

هل لا يزال العمل جارٍ؟

[Bill]

نعم، نفس الشيء بالنسبة لي. قمت بإصلاحه من خلال التبديل إلى سمة مختلفة، وإنشاء الفئة، ثم العودة إلى سمة فينسنت.

[Bill]

كيف أحصل على الوصول إلى مخططات الألوان الإضافية المعروضة في الموضوع الأصلي؟ أريد التبديل إلى

[CaZsm]

بما أن هذا الموضوع قد نُقل إلى #customization:theme:broken-theme، فمن المرجح أن هذا الثيم لم يعد يُصان بعد الآن. لدي مجموعة من التعديلات التي أستخدمها على منتدانا باستخدام إضافة متصفح (chrome extension)، حيث كان عمل فينسنت (vincent) كافياً بمفرده، لكننا لم نكن نملك الموارد لصيانة فرع خاص بنا (fork). هذه التعديلات تحمل بعض الآراء الشخصية، وتُجرى بعض التغييرات وفقاً للذوق الشخصي، ولا تغطي كل شيء، وقد تكون قديمة بعض الشيء أو مُصممة لإصلاح أخطاء تم حلها رسمياً الآن، لكنها ربما تكون مفيدة لشخص ما.

/************************************ 
إصلاحات/تعديلات خاصة بالجوال
************************************/

/* إصلاح مشكلة الحشو (padding) السيئ */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* إصلاح قص شعار الرأس من الأسفل */
.d-header #site-logo {
    max-height: 2.6em;
}

/* إصلاح الرسائل ذات الحجم غير المتسق لقفل/إلغاء القائمة، وإصلاح المساحة الغامضة في الجانب الأيمن من المواضيع */
.small-action {
    width: 100%;
}

/* إصلاح عدم توسيط تضمينات يوتيوب */
.lazyYT-container {
    margin: 12px 20px;
}

/* إصلاح حشو قائمة المواضيع على الأجهزة اللوحية */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
إصلاحات/تعديلات عامة وخاصة بأجهزة سطح المكتب
************************************/

/* إصلاح تجاوز الخط بواسطة .font-helvetica على html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* جعل شارات ألوان الفئات مربعة */
span.badge-category-bg, span.badge-category-parent-bg, span.badge-category-parent-bg+.badge-category-bg {
    border-radius: 0;
}

.badge-wrapper.bullet .badge-category-parent-bg,
.badge-wrapper.bullet .badge-category-parent-bg+.badge-category-bg,
.extra-info-wrapper .badge-wrapper.bullet .badge-category-parent-bg {
    width: 4px;
    min-width: 4px;
}

span.badge-category-parent-bg {
    border-right: 1px solid rgba(0,0,0,0.2);
}

span.badge-category-parent-bg+.badge-category-bg {
    border-left: 1px solid rgba(0,0,0,0.2);
}

/* إصلاح المواضيع التي تكون ضيقة جداً وذات محاذاة غريبة مع عناصر التحكم في أسفل الصفحة */
.topic-post {
    max-width: 758px;
}

.topic-post .embedded-posts {
    width: 758px;
}

#topic-title .title-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 758px;
}

#topic-title, .posts-wrapper {
    margin: 0;
    width: 758px;
}

html.desktop-view.not-mobile-device .topic-body {
    max-width: 758px;
}

.topic-body {
    width: 100%;
}

/* إصلاح التباين الضعيف في تسميات ترتيب قائمة المواضيع عند ظهور لافتة الموضوع الجديد */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

.alert.alert-info {
    background: rgba(19,20,24,1);
}

/* جعل كتل الكود تندمج بشكل أفضل */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* إصلاح عدم وجود حشو لتضمينات يوتيوب */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* إصلاح الخطوط الملونة اليسرى للفئات التي لا تصل إلى أسفل حاوية الفئة */
.category-list tbody .category {
    display: table-cell;
}

/* تخطيط أفضل للفئات الفرعية (لأجهزة سطح المكتب فقط) */
.not-mobile-device .category-list .subcategories {
    display: flex;
    flex-direction: column;
}

.not-mobile-device .category-list .subcategories .subcategory .badge.new-posts {
    display: inline-block;
    margin: 0 5px;
}

.not-mobile-device .category-list .subcategories .subcategory {
    height: 21px;
    align-items: center;
}

/* تمييز المواضيع المثبتة */
.topic-list-item.pinned  {
    background: rgba(200,200,255,0.06);
}

.topic-list tbody tr:nth-of-type(even).pinned {
    background: rgba(200,200,255,0.04);
}

/* مظهر وتباين أفضل لزر "موضوع جديد" المعطل */

.list-controls #create-topic[disabled],
.list-controls #create-topic.disabled {
    background-color: rgba(255,255,255,0.04);
    color: #888
}

.list-controls #create-topic[disabled]:hover,
.list-controls #create-topic.disabled:hover {
    background-color: rgba(255,255,255,0.06);
}

.list-controls #create-topic[disabled] svg,
.list-controls #create-topic.disabled svg {
    color: inherit;
}

/* تباعد أحرف أكبر لتحسين القراءة */
* {
    letter-spacing: 0.2px;
}

/* خطوط أكبر لتحسين القراءة */
a {
    font-size: 95%; /* الثيم يحدد 90% */
}

.search-link .blurb {
    font-size: 1em;
}

/* إصلاح الألوان الخاطئة لواجهة المستخدم في صفحة البحث */
.search-container .search-advanced-sidebar .search-advanced-title,
.search-container .search-advanced-sidebar .search-advanced-filters {
    background: rgba(255,255,255,0.04);
}

.search-container .search-advanced-sidebar .search-advanced-title.btn {
    background: rgba(255,255,255,0.04);
}

.search-advanced-options {
    background: rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

/* إصلاح الحدود العائمة حول محرر النصوص لسيرة الملف الشخصي */
.user-preferences .bio-composer {
    border: none;
}

/* إصلاح خروج زر الطي خارج الإطار في صفحة الملف الشخصي */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* إصلاح حجم إشعار المنشور ولون الحدود */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* إصلاح حجم حاوية روابط المنشور */
.post-links-container {
    margin-left: 0;
}

/* إصلاح عدم وجود شريط التمرير للسيرة الذاتية على اليمين */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* تمييز روابط الفئات */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

.category-list .subcategories .subcategory .badge-wrapper .category-name {
    transition: color 0.3s;
}

/* إصلاح المنشورات المخفية التي تنقسم أفقياً بواسطة رابط "إظهار" */
.post-hidden {
    position: relative;
}

.post-hidden .expand-hidden {
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 1;
}

.post-hidden .post-menu-area,
.post-hidden .expand-hidden {
    opacity: 0.5;
}
}

[P2W (Mike Riddick)]

أحب أن أجرب هذا عندما يتم إصلاحه.

[TotalSoft]

واحد من أجمل السمات.

لماذا توقفت عن تطوير السمة @Johani؟ يمكنني المساعدة بمبلغ مالي إذا كنت أنت أو شخص آخر قادرًا على مواصلة العمل لصالحنا جميعًا.

[jsha (Jacob Hoffman-Andrews)]

للعلم، لقد وجدنا مشكلة عرض حديثة ظهرت باستخدام هذا المظهر: Hosted: Message body resizing while scrolling.

أرى أنه تم دفع التزامات إلى مستودع المظهر قبل 21 يومًا، لذلك أعتقد أنه لا يزال قيد الصيانة: Commits · discourse/discourse-vincent-theme · GitHub.

[darkpixlz (Pyx)]

هل هناك أي حل لهذا؟

[MoltonMontro (Tyler)]

@Pyx، post:275، topic:76662، username:darkpixlz

هل هناك أي حل لهذا؟

أعلم أن هذا متأخر ببضعة أشهر، ولكن…

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

إليك اثنان قد تجدهما ذوي صلة:

/* إصلاحات الهامش الزائد في أعلى الصفحة.
 * ملاحظة: يجب أن يزيل هذا الفجوة الكبيرة بين محتوى صفحتك وأعلى الصفحة.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* يجب أن يكون التفاف النص في المنتصف، ويشغل فقط عرضًا معينًا من الشاشة.
 * ملاحظة: قد يساعد هذا الإصلاح تحديدًا في حل مشكلة تخطيط الموضوع/المنشورات لديك!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* إصلاحات لمشاكل تخطيط قائمة الفئات.
 * ملاحظة: هناك طرق أفضل بكثير للقيام بذلك.
 */
#topic-footer-buttons, .top-title-buttons, .user-badge, #user-card.show-badges .more-user-badges, .category-list tbody .category, .nav-pills>li, .layouts-nav-button>li {
    display: revert;
}
.nav-pills>li {
    display: flex;
}

/* اجعل النص الغامق غامقًا بالفعل.
 * ملاحظة: بدلاً من ذلك، قم بتغيير وزن الخط الافتراضي للموضوع إلى 400.
 * المشروع الأصلي لديه وزن الخط الافتراضي 300 المستخدم لكل شيء، مما يجعل النص الغامق/القوي يستخدم شيئًا مثل 400 لأنه تم تعيينه على "أكثر سمكًا".
 * على معظم الخطوط، هذا غير قابل للتمييز حرفيًا عن 300.
 */
b, strong {
    font-weight: 700;
}

/* يزيل الهامش من الحاوية للروابط الداخلية المتبادلة المدرجة تحت المنشورات. */
.post-links-container {
    margin-left: 0;
}

/* يحسن تصميم نص "آخر زيارة" في قائمة الموضوعات. */
.topic-list .topic-list-item-separator .topic-list-data span {
    color: var(--primary);
    border: 1px solid var(--secondary-very-high);
    font-weight: bold;
}
.topic-list .topic-list-item-separator .topic-list-data span {
    background-color: var(--secondary);
}

/* يحسن تصميم نص "آخر زيارة" في منشور الموضوع. */
.small-action.topic-post-visited .topic-post-visited-line {
    border-bottom: none;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    color: var(--primary);
    border: none;
    font-weight: bold;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    background-color: transparent;
}

[twofoursixeight]

تتعطل سمة Vincent على الهاتف المحمول عند استخدامها.

كما أنها لا تحتوي على محدد سمات لسبب ما:

مقارنة بسِمَة مختلفة:

[darkpixlz (Pyx)]

يبدو أن هذا جعل الأمر أسوأ.

[JammyDodger]

تم وضع علامة broken على هذا القالب حاليًا، لذا من المحتمل ألا يكون متوافقًا مع أحدث الإصدارات أو مكونات القالب.

[darkpixlz (Pyx)]

حزين بالتأكيد، كان هذا موضوعًا رائعًا عندما كان يعمل.

[Kartoon]

يبدو أن هذا كان يعمل بنفس الطريقة المعتادة (مع تنسيق CSS المنشور سابقًا في الموضوع الذي أصلح الحدود) بالنسبة لي حتى رأيت تحديثًا جديدًا اليوم عن طريق الخطأ…

الآن يقول أن هناك خطأ
Error: @use rules must be written before any other rules. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet

وهو مكسور تمامًا الآن لووول.

إذا كان تثبيتك لا يزال يعمل كما كان لدي، فمن السهل إصلاحه. قم بتنزيل السمة من GitHub، وافتح common.css وقم بتغيير

// functions  --------------------------------------------------------------------------------

// Calculate brightness value
@use "sass:math";

@function brightness($color) {
  @return math.div(red($color) + green($color) + blue($color), 255 * 3);
}

// to base color

(هذا هو التغيير الجديد الذي كسره) إلى ما كان عليه أدناه

// functions  --------------------------------------------------------------------------------

// Calculate brightness value
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// to base color

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

ضع في اعتبارك أن هذا سيقوم بتحميله كسمة جديدة تمامًا، ولن يكون مرتبطًا بـ GitHub إذا كانت هناك تحديثات مستقبلية، لذلك قد ترغب في الاحتفاظ بالتثبيت الأصلي (غير قابل للاختيار) في حالة إصلاحه / استئناف الدعم. على الجانب الآخر، يتيح لك تثبيته بنفسك إصلاح أو تغيير ما تريد لأنه لم يعد مُدارًا بنشاط.