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]

Since this topic has been moved to #theme:broken-theme, it seems likely that this theme is no longer being maintained. I have a set of tweaks I use on our forum with a chrome extension since vincent worked well enough on its own, but we didn’t have the resources to maintain our own fork. They’re a little bit opiniony, make some tweaks for personal taste, don’t cover everything, and may be a little outdated or intended to fix bugs that were fixed officially by now, but maybe they’re useful to someone.

/************************************ 
Mobile-specific fixes / tweaks
************************************/

/* Fix bad padding */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* Fix header logo cut off at bottom */
.d-header #site-logo {
    max-height: 2.6em;
}

/* Fix inconsistently sized lock/unlist messages, fix mysterious space on right side of threads somehow */
.small-action {
    width: 100%;
}

/* Fix youtube embeds not being centered */
.lazyYT-container {
    margin: 12px 20px;
}

/* Fix topic list padding on tablets */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
Generic and desktop-specific fixes / tweaks 
************************************/

/* Fix font getting overridden by .font-helvetica on html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* Square category color badges */
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);
}

/* Fix threads being too skinny and in strange alignment with controls at bottom of page */
.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%;
}

/* Fix poor contrast on thread list sort labels when new thread banner is visible */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

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

/* Make code blocks blend better */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* Fix youtube embeds missing padding */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* Fix category left colored lines not reaching bottom of category container */
.category-list tbody .category {
    display: table-cell;
}

/* Better subcategory layout (desktop only) */
.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;
}

/* Highlight pinned posts */
.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);
}

/* Better appearance and contrast on disabled New Topic button */

.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;
}

/* Larger letter spacing for better readability */
* {
    letter-spacing: 0.2px;
}

/* Larger fonts for better readability */
a {
    font-size: 95%; /* theme sets 90% */
}

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

/* Fix wrongly colored UI on search page */
.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;
}

/* Fix floating border around composer for profile bio */
.user-preferences .bio-composer {
    border: none;
}

/* Fix collapse button exiting frame on profile page */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* Fix post notice size and border color */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* Fix post links container size */
.post-links-container {
    margin-left: 0;
}

/* Fix bio scroll bar not being to the right */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* Category link hightlighting */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

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

/* Fix hidden posts being split horizontally by unhide link */
.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)]

Would love to try this out when it’s fixed.

[TotalSoft]

One of the most beautiful themes.

Why did you stop developing the theme @Johani? I can help with a sum of money if you or someone else can continue the work for all of us.

[jsha (Jacob Hoffman-Andrews)]

请注意，我们发现了一个使用此主题最近出现的显示问题：https://meta.discourse.org/t/hosted-message-body-resizing-while-scrolling/209959。

我看到 21 天前向主题仓库推送了提交，所以我认为它仍在维护中：Commits · discourse/discourse-vincent-theme · GitHub

[darkpixlz (Pyx)]

有什么解决办法吗？

[MoltonMontro (Tyler)]

@darkpixlz

有解决办法吗？

我知道这已经过去几个月了，但是……

现在，我使用自己项目的 fork，它没有这些问题。但如果你想要一个简单的 CSS 解决方案，我仍然有一些旧的修复方法。

这里有几个你可能会觉得相关的：

/* 修复页面顶部过多的内边距。
 * 注意：这应该可以消除页面内容与页面顶部之间的大间隙。
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap 应该居中，并且只占据屏幕的一定宽度。
 * 注意：这个特定的修复可能有助于解决你的主题/帖子布局问题！
 */
.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 一样正常工作，直到我今天愚蠢地看到了一个新更新……

现在它显示了一个错误

错误：@use 规则必须写在任何其他规则之前。 ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet

现在它完全坏了 lol。

如果您的安装之前像我的安装一样仍然有效，那么修复它很容易。从 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 链接，因此您可能希望保留原始安装（不可选），以防它被修复/支持被重新拾起。另一方面，自己安装它允许您修复或更改您想要的任何内容，因为它不再被主动管理了。