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 Mi Piace

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 Mi Piace

Same behavior here :frowning:

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

3 Mi Piace

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 Mi Piace

Newbie question but where would I apply this?

1 Mi Piace

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 Mi Piace

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 Mi Piace

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

1 Mi Piace

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 Mi Piace

Per tua informazione, abbiamo riscontrato un recente problema di visualizzazione che si è manifestato utilizzando questo tema: Hosted: Message body resizing while scrolling.

Vedo che ci sono stati commit inviati al repository del tema 21 giorni fa, quindi penso che sia ancora mantenuto: Commits · discourse/discourse-vincent-theme · GitHub.

3 Mi Piace


C’è una soluzione a questo?

2 Mi Piace

So che è passato qualche mese, ma…

Oggigiorno, uso il mio fork del progetto che non soffre di questi problemi. Ma se desideri una semplice soluzione CSS, ho ancora alcune delle mie vecchie correzioni.

Ecco un paio di quelle che potresti trovare pertinenti:

/* Corregge il padding eccessivo nella parte superiore della pagina.
 * NOTA: Questo dovrebbe eliminare il grande spazio tra il contenuto della tua pagina e la parte superiore della pagina.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap dovrebbe essere centrato e occupare solo una certa larghezza dello schermo.
 * NOTA: Questo specifico potrebbe aiutare a risolvere il problema del layout del tuo argomento/post!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Corregge i problemi con il layout dell'elenco delle categorie.
 * NOTA: Ci sono modi molto migliori per farlo.
 */
#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;
}

/* Rende il testo in grassetto effettivamente in grassetto.
 * NOTA: In alternativa, cambia il font-weight predefinito per il tema a 400.
 * Il progetto originale lo imposta a 300 come peso predefinito utilizzato da tutto, il che fa sì che il testo in grassetto/forte utilizzi qualcosa come 400 poiché sono impostati su "bolder".
 * Sulla maggior parte dei font, questo è letteralmente indistinguibile da 300.
 */
b, strong {
    font-weight: 700;
}

/* Rimuove il margine sul contenitore per i collegamenti incrociati interni elencati sotto i post. */
.post-links-container {
    margin-left: 0;
}

/* Migliora il design del testo "ultima visita" nell'elenco degli argomenti. */
.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);
}

/* Migliora il design del testo "ultima visita" nel post dell'argomento. */
.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 Mi Piace

Il tema Vincent ha bug su mobile quando lo si utilizza.


Inoltre, per qualche motivo, non ha un selettore di temi:

Rispetto a un tema diverso:

1 Mi Piace

Sembra che questo abbia peggiorato le cose.

2 Mi Piace

Questo tema è attualmente contrassegnato come broken, quindi è probabile che non sia compatibile con le versioni più recenti o con i componenti del tema.

3 Mi Piace

Decisamente triste, questo era un ottimo tema quando funzionava.

2 Mi Piace

In qualche modo questo aveva funzionato come sempre (con quel css postato più in alto nell’argomento che aveva sistemato i bordi) per me finché non ho stupidamente visto un nuovo aggiornamento oggi…

Ora dice che c’è un errore

Errore: le regole @use devono essere scritte prima di qualsiasi altra regola. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 foglio di stile principale

Ed è COMPLETAMENTE completamente rotto ora lol.

Se la tua installazione funzionava ancora come la mia, è facile da sistemare. Scarica il tema da github, apri common.css e cambia

// funzioni --------------------------------------------------------------------------------

// Calcola il valore di luminosità
@use "sass:math";

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

// al colore di base

(Questo è il nuovo cambiamento che l’ha rotto) in quello che era sotto

// funzioni --------------------------------------------------------------------------------

// Calcola il valore di luminosità
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// al colore di base

Che è quello che aveva, poi zippa e carica sul tuo sito e usa la tua nuova installazione. Oppure prova a sistemare quello che ha rotto per vedere cosa stava cercando di fare.

Tieni presente che questo lo caricherà come un tema interamente nuovo e non sarà più collegato a github se ci saranno futuri aggiornamenti, quindi potresti voler conservare l’installazione originale (non selezionabile) nel caso in cui venga sistemato/il supporto venga ripreso. D’altra parte, installandolo da solo ti permette di sistemare o cambiare ciò che vuoi poiché non è più gestito attivamente.

3 Mi Piace