ثيم 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

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]

Anyone having issues with creating Categories? Everytime I click the hamburger menu it just adds a “+” under neath and does not take me anywhere.

[cjk77 (Chris Klugewicz)]

Same behavior here

I’d not noticed, as I haven’t created a new category for a while.

[simon]

@schap

Anyone having issues with creating Categories?

I just tested this and am running into the same issue. It seems that the code that’s used to create the category admin dropdown has changed on Discourse. Updating the theme to use the following code to create the dropdown seems to fix the issue:

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

We will get this fixed very soon.

[schap]

@simon

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

Newbie question but where would I apply this?

[simon]

@schap

where would I apply this?

I applied it by editing the theme’s /head section. I replaced this block of code:

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

with:

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

Having to manually edit the theme isn’t ideal though. We will get this fixed so that the change can be made by clicking the theme’s “Update to Latest” button.

[Anatolia]

How can I change the main text color of this theme?

Also this issue still continues:

@InceptionTime

While in a category, the top bar isn’t aligned properly and a button is visually broken:

Those ‘‘new’’ and ‘‘unread’’ menus should be invisible unless there’s a new topic as it is on original Discourse theme.

@Johani

Finally, I started to work on Vincent Light ( Not included in the repo yet) will update when it’s ready to release.

Is it still on progress?

[Bill]

Yes, same thing for me. I fixed it by switching to a different them, creating the category, then switching back to the Vincent theme.

[Bill]

How do I get access to the extra color schemes shown in the original thread? I want to switch to the Dark Green one but I only see Vincent Dark available in my settings.

[CaZsm]

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

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

/* إصلاح الهامش السيء */
.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 إذا كانت هناك تحديثات مستقبلية، لذلك قد ترغب في الاحتفاظ بالتثبيت الأصلي (غير قابل للاختيار) في حالة إصلاحه / استئناف الدعم. على الجانب الآخر، يتيح لك تثبيته بنفسك إصلاح أو تغيير ما تريد لأنه لم يعد مُدارًا بنشاط.