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 Me gusta

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 Me gusta

Same behavior here :frowning:

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

3 Me gusta

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 Me gusta

Newbie question but where would I apply this?

1 me gusta

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 Me gusta

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 Me gusta

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

1 me gusta

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 Me gusta

Para tu información, hemos encontrado un problema de visualización reciente que se manifestó al usar este tema: Hosted: Message body resizing while scrolling.

Veo que se enviaron confirmaciones al repositorio del tema hace 21 días, así que creo que todavía se está manteniendo: Commits · discourse/discourse-vincent-theme · GitHub.

3 Me gusta


¿Hay alguna solución para esto?

2 Me gusta

Sé que esto es un par de meses tarde, pero…

Hoy en día, uso mi propia bifurcación del proyecto que no sufre de estos problemas. Pero si quieres una solución CSS simple, todavía tengo algunas de mis correcciones antiguas.

Aquí hay un par de las que podrías encontrar relevantes:

/* Corrige el relleno excesivo en la parte superior de la página.
 * NOTA: Esto debería eliminar el gran espacio entre el contenido de tu página y la parte superior de la página.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap debe centrarse y solo ocupar un cierto ancho de la pantalla.
 * NOTA: ¡Este en particular puede ayudar a solucionar el problema de diseño de tu tema/publicaciones!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Corrige problemas con el diseño de la lista de Categorías.
 * NOTA: Hay formas mucho mejores de hacer esto.
 */
#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;
}

/* Haz que el texto en negrita sea realmente negrita.
 * NOTA: Alternativamente, cambia el peso de fuente predeterminado para el tema a 400.
 * El proyecto original lo tiene configurado en 300 como el peso predeterminado utilizado por todo, lo que hace que el texto en negrita/fuerte use algo como 400, ya que están configurados como "más negrita".
 * En la mayoría de las fuentes, eso es literalmente indistinguible de 300.
 */
b, strong {
    font-weight: 700;
}

/* Elimina el margen del contenedor para los enlaces cruzados internos listados debajo de las publicaciones. */
.post-links-container {
    margin-left: 0;
}

/* Mejora el diseño del texto "última visita" en la lista de temas. */
.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);
}

/* Mejora el diseño del texto "última visita" en la publicación del tema. */
.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 Me gusta

El tema Vincent falla en el móvil cuando se usa.


Tampoco tiene selector de tema por alguna razón:

Comparado con un tema diferente:

1 me gusta

Parece que eso lo ha empeorado.

2 Me gusta

Este tema está actualmente etiquetado como #roto, por lo que es probable que no sea compatible con las últimas versiones o componentes del tema.

3 Me gusta

Definitivamente triste, este era un gran tema cuando funcionaba.

2 Me gusta

De alguna manera, esto había estado funcionando como siempre (con ese CSS publicado anteriormente en el tema que arreglaba los bordes) hasta que tontamente vi una nueva actualización hoy…

Ahora dice que hay un error

Error: las reglas @use deben escribirse antes que cualquier otra regla. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 hoja de estilo raíz

Y está COMPLETAMENTE roto ahora, lol.

Si tu instalación todavía funcionaba como la mía, es fácil de arreglar. Descarga el tema de github, abre common.css y cambia

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

// Calcula el valor de brillo
@use "sass:math";

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

// a color base

(Este es el nuevo cambio que lo rompió) a cómo era antes abajo

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

// Calcula el valor de brillo
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// a color base

Que es lo que tenía, luego comprime y sube a tu sitio y usa tu propia instalación nueva. O intenta arreglar lo que rompió para ver qué intentaba hacer.

Ten en cuenta que esto lo subirá como un tema completamente nuevo y ya no estará vinculado a github si hay futuras actualizaciones, por lo que es posible que desees conservar la instalación original (no seleccionable) en caso de que se arregle o se reanude el soporte. Por otro lado, instalarlo tú mismo te permite arreglar o cambiar lo que quieras, ya que ya no se gestiona activamente.

3 Me gusta