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 « J'aime »

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 « J'aime »

Same behavior here :frowning:

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

3 « J'aime »

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 « J'aime »

Newbie question but where would I apply this?

1 « J'aime »

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 « J'aime »

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 « J'aime »

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

1 « J'aime »

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 « J'aime »

Pour information, nous avons trouvé un problème d’affichage récent qui s’est manifesté avec ce thème : Hosted: Message body resizing while scrolling.

Je vois qu’il y a eu des commits poussés dans le dépôt du thème il y a 21 jours, donc je pense qu’il est toujours maintenu : Commits · discourse/discourse-vincent-theme · GitHub.

3 « J'aime »


Y a-t-il une solution à cela ?

2 « J'aime »

Je sais que cela fait quelques mois de retard, mais…

De nos jours, j’utilise ma propre version du projet qui ne souffre pas de ces problèmes. Mais si vous souhaitez une solution CSS simple, j’ai toujours quelques-unes de mes anciennes corrections.

Voici quelques-unes de celles que vous pourriez trouver pertinentes :

/* Corrige le padding excessif en haut de la page.
 * REMARQUE : Cela devrait supprimer le grand espace entre le contenu de votre page et le haut de la page.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap doit être centré et n'occuper qu'une certaine largeur de l'écran.
 * REMARQUE : Celle-ci pourrait aider à corriger le problème de mise en page de votre sujet/vos messages !
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Corrige les problèmes de mise en page de la liste des catégories.
 * REMARQUE : Il existe de bien meilleures façons de le faire.
 */
#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;
}

/* Rend le texte en gras réellement gras.
 * REMARQUE : Alternativement, changez le poids de police par défaut du thème à 400.
 * Le projet original l'a défini sur 300 comme poids par défaut utilisé par tout, ce qui fait que le texte en gras/fort utilise quelque chose comme 400 car ils sont définis sur "plus gras".
 * Sur la plupart des polices, c'est littéralement indiscernable de 300.
 */
b, strong {
    font-weight: 700;
}

/* Supprime la marge du conteneur pour les liens croisés internes listés sous les messages. */
.post-links-container {
    margin-left: 0;
}

/* Améliore la conception du texte "dernière visite" dans la liste des sujets. */
.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);
}

/* Améliore la conception du texte "dernière visite" dans le message du sujet. */
.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 « J'aime »

Le thème Vincent bug sur mobile lorsqu’il est utilisé.


Il n’a pas non plus de sélecteur de thème pour une raison quelconque :

Comparé à un thème différent :

1 « J'aime »

Cela semble avoir empiré les choses.

2 « J'aime »

Ce thème est actuellement marqué comme broken, il ne sera donc probablement pas compatible avec les dernières versions ou les composants de thème.

3 « J'aime »

Vraiment triste, c’était un super thème quand il fonctionnait.

2 « J'aime »

Cela fonctionnait d’une manière ou d’une autre comme toujours (avec ce CSS posté plus haut dans le sujet qui a corrigé les bordures) pour moi jusqu’à ce que je voie stupidement une nouvelle mise à jour aujourd’hui…

Maintenant, il y a une erreur

Erreur : les règles @use doivent être écrites avant toute autre règle. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 feuille de style racine

Et c’est COMPLÈTEMENT cassé maintenant lol.

Si votre installation fonctionnait encore comme la mienne, il est facile de la réparer. Téléchargez le thème depuis github, ouvrez common.css et changez

// fonctions --------------------------------------------------------------------------------

// Calcule la valeur de luminosité
@use "sass:math";

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

// à la couleur de base

(C’est le nouveau changement qui l’a cassé) pour ce qu’il était ci-dessous

// fonctions --------------------------------------------------------------------------------

// Calcule la valeur de luminosité
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// à la couleur de base

Ce qu’il avait, puis compressez et téléchargez sur votre site et utilisez votre propre nouvelle installation. Ou essayez de réparer ce qu’il a cassé pour voir ce qu’il essayait de faire.

Gardez à l’esprit que cela le téléchargera comme un thème entièrement nouveau, et il ne sera plus lié au github s’il y a des mises à jour futures, vous pourriez donc vouloir conserver l’installation d’origine (non sélectionnable) au cas où il serait corrigé/le support serait repris. D’un autre côté, l’installer vous-même vous permet de corriger ou de changer ce que vous voulez puisqu’il n’est plus géré activement.

3 « J'aime »