Discourse Vincent theme

[Johani (Joe)]

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:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

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:

Thin Header

Summary Thin Header reduces the height of the default Discourse header. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-thin-header-theme-component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Before [Default Discourse header] After [Modified Discourse header] It reduces the header height by about …

---

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

Feedback / suggestions welcome

[schap]

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

[cjk77 (Chris Klugewicz)]

Same behavior here

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

[simon]

@schap

Anyone having issues with creating Categories?

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.

[schap]

@simon

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

Newbie question but where would I apply this?

[simon]

@schap

where would I apply this?

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.

[Anatolia]

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

Also this issue still continues:

@InceptionTime

While in a category, the top bar isn’t aligned properly and a button is visually broken:

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

@Johani

Finally, I started to work on Vincent Light ( Not included in the repo yet) will update when it’s ready to release.

Is it still on progress?

[Bill]

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

[Bill]

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.

[CaZsm]

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

[P2W (Mike Riddick)]

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

[TotalSoft]

One of the most beautiful themes.

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.

[jsha (Jacob Hoffman-Andrews)]

FYI, we have found a recent display problem that manifested using this theme: Hosted: Message body resizing while scrolling.

I see there were commits pushed to the theme repo 21 days ago, so I think it is still being maintained: Commits · discourse/discourse-vincent-theme · GitHub.

[darkpixlz]

Is there any solution to this?

[MoltonMontro (Tyler)]

@darkpixlz

Is there any solution to this?

I know that this is a couple months late, but…

Nowadays, I use my own fork of the project which doesn’t suffer from these problems. But if you’d like a simple CSS solution, I still have some of my older fixes.

Here’s a couple of the ones you might find to be relevant:

/* Fixes excessive padding at top of page.
 * NOTE: This should get rid of the big gap b/n your page content & the top of the page.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap should be centered, and only take up a certain width of the screen.
 * NOTE: This specific one may help to fix your topic/posts layout issue!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Fixes issues with the layout of the Categories list.
 * NOTE: There's far better ways to do this.
 */
#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;
}

/* Make bolded text actually bold. 
 * NOTE: Alternatively, change the default font-weight for the theme to 400.
 * The original project has it set to 300 as the default weight used by everything, which causes bold/strong text to use something like 400 as they're set to "bolder".
 * On most fonts, that is literally indistinguishable from 300.
 */
b, strong {
    font-weight: 700;
}

/* Removes margin on the container for internal crosslinks listed under posts. */
.post-links-container {
    margin-left: 0;
}

/* Improves design of "last visit" text in topic list. */
.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);
}

/* Improves design of "last visit" text in topic post. */
.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;
}

[twofoursixeight]

Vincent theme bugs out on mobile when using it.

It also has no theme selector for some reason:

Compared to a different theme:

[darkpixlz]

Seems like that’s made it worse.

[JammyDodger]

This theme is currently tagged as broken, so will likely not be compatible with the Latest versions or theme components.

[darkpixlz]

Definitely sad, this was a great theme when it worked.

[Kartoon]

Somehow this had been working the same as always (with that css posted further up in the topic that fixed the borders) for me until I stupidly saw a new update today…

Now it says there’s an error

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

And is COMPLETELY completely broken now lol.

If your install was previously still working like mine was it’s easy to fix. Download the theme from github, open common.css and change

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

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

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

// to base color

(This is the new change that broke it) to how it used to be below

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

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

// to base color

Which is what it had, then zip and upload to your site and use your own new installation. Or try to fix what he broke to see what he was trying to do.

Keep in mind this will upload it as an entirely new theme, and it’ll no longer be linked to the github if there’s future updates, so you might want to keep the original install (un-selectable) in case it gets fixed/support is picked back up. On the flip side installing it yourself allows to to fix or change what you want since it’s not actively managed anymore