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

Qualcuno ha problemi con la creazione delle Categorie? Ogni volta che clicco sul menu hamburger, viene aggiunto solo un “+” sotto e non mi porta da nessuna parte.

4 Mi Piace

Stesso comportamento qui :frowning:

Non me ne ero accorto, dato che non creo una nuova categoria da un po’.

3 Mi Piace

Ho appena provato e incontro lo stesso problema. Sembra che il codice utilizzato per creare il menu a tendina dell’amministratore delle categorie sia cambiato su Discourse. Aggiornare il tema per utilizzare il seguente codice per creare il menu a tendina sembra risolvere il problema:

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

Risolveremo questo problema molto presto.

8 Mi Piace

Domanda da principiante, ma dove dovrei applicarlo?

1 Mi Piace

L’ho applicato modificando la sezione /head del tema. Ho sostituito questo blocco di codice:

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

con:

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

Tuttavia, dover modificare manualmente il tema non è l’ideale. Risolveremo il problema in modo che la modifica possa essere effettuata cliccando sul pulsante “Aggiorna all’ultima versione” del tema.

5 Mi Piace

Come posso cambiare il colore del testo principale di questo tema?

Inoltre, questo problema persiste:

I menu ‘‘nuovi’’ e ‘‘non letti’’ dovrebbero essere invisibili a meno che non ci sia un nuovo argomento, come avviene nel tema originale di Discourse.

È ancora in corso?

Sì, per me è la stessa cosa. L’ho risolto passando a un tema diverso, creando la categoria e poi tornando al tema Vincent.

Come posso accedere agli schemi di colore aggiuntivi mostrati nel thread originale? Voglio passare a Dark Green, ma nelle mie impostazioni vedo solo Vincent Dark disponibile.

Poiché questo argomento è stato spostato in #theme:broken-theme, sembra probabile che questo tema non sia più mantenuto. Ho un insieme di modifiche che uso sul nostro forum tramite un’estensione per Chrome, dato che vincent funzionava abbastanza bene da solo, ma non avevamo le risorse per mantenere un nostro fork. Sono un po’ soggettive, apportano alcune modifiche per gusto personale, non coprono tutto e potrebbero essere un po’ obsolete o destinate a correggere bug che sono stati risolti ufficialmente nel frattempo, ma forse possono essere utili a qualcuno.

/************************************ 
Correzioni e modifiche specifiche per dispositivi mobili
************************************/

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

/* Correggi logo dell'intestazione tagliato in basso */
.d-header #site-logo {
    max-height: 2.6em;
}

/* Correggi messaggi di blocco/nascondimento di dimensioni inconsistenti, correggi lo spazio misterioso sul lato destro dei thread in qualche modo */
.small-action {
    width: 100%;
}

/* Correggi incorporamenti YouTube non centrati */
.lazyYT-container {
    margin: 12px 20px;
}

/* Correggi padding dell'elenco argomenti su tablet */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
Correzioni e modifiche generiche e specifiche per desktop 
************************************/

/* Correggi il font sovrascritto da .font-helvetica su html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* Badge di colore delle categorie quadrati */
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);
}

/* Correggi thread troppo stretti e allineamento strano con i controlli in fondo alla pagina */
.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%;
}

/* Correggi scarso contrasto sulle etichette di ordinamento dell'elenco thread quando è visibile il banner del nuovo thread */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

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

/* Fai in modo che i blocchi di codice si integrino meglio */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* Correggi incorporamenti YouTube privi di padding */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* Correggi le linee colorate a sinistra delle categorie che non raggiungono il fondo del contenitore della categoria */
.category-list tbody .category {
    display: table-cell;
}

/* Migliore layout delle sottocategorie (solo desktop) */
.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;
}

/* Evidenzia i post fissati */
.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);
}

/* Migliore aspetto e contrasto sul pulsante Nuovo Argomento disabilitato */

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

/* Spaziatura delle lettere più ampia per una migliore leggibilità */
* {
    letter-spacing: 0.2px;
}

/* Caratteri più grandi per una migliore leggibilità */
a {
    font-size: 95%; /* il tema imposta il 90% */
}

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

/* Correggi UI colorata erroneamente nella pagina di ricerca */
.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;
}

/* Correggi il bordo fluttuante attorno al compositore per la biografia del profilo */
.user-preferences .bio-composer {
    border: none;
}

/* Correggi il pulsante di chiusura che esce dal frame nella pagina del profilo */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* Correggi dimensioni e colore del bordo del avviso del post */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* Correggi dimensioni del contenitore dei collegamenti del post */
.post-links-container {
    margin-left: 0;
}

/* Correggi la barra di scorrimento della biografia non posizionata a destra */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* Evidenziazione dei collegamenti alle categorie */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

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

/* Correggi i post nascosti divisi orizzontalmente dal collegamento per mostrare */
.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

Mi farebbe molto piacere provarlo una volta risolto.

1 Mi Piace

Uno dei temi più belli. :heart_eyes:

Perché hai smesso di sviluppare il tema, @Johani? Posso contribuire con una somma di denaro se tu o qualcun altro potete continuare il lavoro per tutti noi.

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