Discourse Vincent theme

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:

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:


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

Feedback / suggestions welcome

42 „Gefällt mir“

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

4 „Gefällt mir“

Same behavior here :frowning:

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

3 „Gefällt mir“

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.

8 „Gefällt mir“

Newbie question but where would I apply this?

1 „Gefällt mir“

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.

5 „Gefällt mir“

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

Also this issue still continues:

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

Is it still on progress?

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

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.

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;
}
}
3 „Gefällt mir“

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

1 „Gefällt mir“

One of the most beautiful themes. :heart_eyes:

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.

11 „Gefällt mir“

FYI, wir haben ein aktuelles Anzeigeproblem gefunden, das mit diesem Theme aufgetreten ist: Hosted: Message body resizing while scrolling.

Ich sehe, dass vor 21 Tagen Commits im Theme-Repository vorgenommen wurden, daher denke ich, dass es noch gepflegt wird: Commits · discourse/discourse-vincent-theme · GitHub.

3 „Gefällt mir“


Gibt es dafür eine Lösung?

2 „Gefällt mir“

Ich weiß, dass das ein paar Monate zu spät ist, aber…

Heutzutage benutze ich meinen eigenen Fork des Projekts, der diese Probleme nicht hat. Aber wenn du eine einfache CSS-Lösung möchtest, habe ich noch einige meiner älteren Korrekturen.

Hier sind ein paar, die für dich relevant sein könnten:

/* Behebt übermäßiges Padding oben auf der Seite.
 * HINWEIS: Dies sollte den großen Abstand zwischen deinen Seiteninhalten und der Oberseite der Seite beseitigen.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap sollte zentriert sein und nur eine bestimmte Breite des Bildschirms einnehmen.
 * HINWEIS: Dieser spezielle Fix könnte helfen, dein Thema/Beitragslayoutproblem zu beheben!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Behebt Probleme mit dem Layout der Kategorieliste.
 * HINWEIS: Es gibt weitaus bessere Möglichkeiten, dies zu tun.
 */
#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;
}

/* Macht fetten Text tatsächlich fett.
 * HINWEIS: Alternativ kannst du die Standard-Schriftstärke für das Thema auf 400 ändern.
 * Das Originalprojekt hat sie standardmäßig auf 300 gesetzt, was von allem verwendet wird, wodurch fetter/starker Text etwas wie 400 verwendet, da er auf "bolder" gesetzt ist.
 * Bei den meisten Schriftarten ist das buchstäblich nicht von 300 zu unterscheiden.
 */
b, strong {
    font-weight: 700;
}

/* Entfernt den Rand am Container für interne Querverweise, die unter Beiträgen aufgelistet sind. */
.post-links-container {
    margin-left: 0;
}

/* Verbessert das Design des Textes "letzter Besuch" in der Themenliste. */
.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);
}

/* Verbessert das Design des Textes "letzter Besuch" im Thema-Beitrag. */
.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;
}
4 „Gefällt mir“

Vincent-Theme stürzt auf Mobilgeräten ab, wenn es verwendet wird.


Es hat auch aus irgendeinem Grund keinen Theme-Selektor:

Im Vergleich zu einem anderen Theme:

1 „Gefällt mir“

Das scheint es schlimmer gemacht zu haben.

2 „Gefällt mir“

Dieses Thema ist derzeit mit broken gekennzeichnet und daher wahrscheinlich nicht mit den neuesten Versionen oder Theme-Komponenten kompatibel.

3 „Gefällt mir“

Definitiv traurig, dies war ein großartiges Thema, als es funktionierte.

2 „Gefällt mir“

Irgendwie hat das bisher immer wie gewohnt funktioniert (mit dem weiter oben im Thema geposteten CSS, das die Ränder repariert hat), bis ich heute dummerweise ein neues Update gesehen habe…

Jetzt sagt es, dass ein Fehler vorliegt

Error: @use rules must be written before any other rules. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet

Und es ist jetzt komplett kaputt, lol.

Wenn Ihre Installation zuvor noch wie meine funktionierte, ist es einfach zu beheben. Laden Sie das Theme von GitHub herunter, öffnen Sie common.css und ändern Sie

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

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

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

// to base color

(Dies ist die neue Änderung, die es kaputt gemacht hat) zu dem, wie es unten war

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

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

// to base color

Was es hatte, dann zippen und auf Ihre Website hochladen und Ihre eigene neue Installation verwenden. Oder versuchen Sie zu beheben, was er kaputt gemacht hat, um zu sehen, was er zu tun versuchte.

Beachten Sie, dass dies als völlig neues Theme hochgeladen wird und nicht mehr mit GitHub verknüpft ist, falls es zukünftige Updates gibt. Möglicherweise möchten Sie die ursprüngliche Installation (nicht auswählbar) beibehalten, falls sie repariert wird oder die Unterstützung wieder aufgenommen wird. Auf der anderen Seite können Sie es selbst installieren, um zu beheben oder zu ändern, was Sie möchten, da es nicht mehr aktiv verwaltet wird.

3 „Gefällt mir“