Discourse Vincent theme


(Joe) #142

Yes That looks right, I think the only thing that might be missing is to add Vincent as a child theme under Vincent Orange. I just tried that and it worked ok. Let me know :sunflower:

Thank you @witsend :grin::ok_hand:

This is a part of Discourse. Category description is hidden on mobiles, but you can easily change that by adding the following in the mobile section of a child theme

.category-list.with-topics .category-list-item .category-description  {
	display:  table-row;

Now if you want it to be next to the category image, you would need a slightly different code like so:
(You only need one either the one from above or the one below)

.topic-list>tr:first-of-type, .category-list.with-topics .category-list-item .category-description {
    display: inline-block;
    max-width: 50%;
    min-width: 50%;

This would result in:

This still needs tweaking, so try it and let me know :sunflower:

(Keyboardstaff) #143

I think the gap between the left and right sides of the mobile phone is too big. Because the screen of the mobile phone is not very big.

(Joe) #144

max-width for the .wrap class is set to 95vw

But you can also remove most of the gap by adding this to a child theme:

.main-content, .alert, #share-link.visible, .wrap {
    max-width: 100vw;



I like to have a little bit of space around everything as long as it doesn’t hider readability (Which in this case it doesn’t)

But you’re right, I think this should be a variable as well.

I will add it as a variable in the next version.

Thanks :wine_glass:


The theme does break some custom emoji.


These lines are related to the issue:

#reply-control .d-editor-preview img:not(.thumbnail),
.cooked img:not(.thumbnail) {
    max-width: 100% $i;
    height: auto;

Here is the Fix: adding an addtional not statement

#reply-control .d-editor-preview img:not(.thumbnail):not(.emoji),
.cooked img:not(.thumbnail):not(.emoji) {
    max-width: 100% $i;
    height: auto;


(Joe) #146

Thanks for reporting @ZackFea :wine_glass:

I’ll be sure to either remove those lines - as I don’t remember why they’re there in the first place - or add your fix in the next update :ok_hand:

(Joe) #147

Which do you find easier to read?

Sample A

Sample B

  • I find sample A easier to read
  • I find sample B easier to read

0 voters

(Chris Klugewicz) #148

Being an old typesetter, sample B makes me very happy, because the leading is ideal for the typeface chosen. Lines are more distinct from one another, increasing legibility of the text. I also find the X height of that face very appealing, as once again, it improves legibility. Finally, the paragraph spacing seems good. If it’s possible to tighten up the spacing before a list item, I think that’s the only tiny suggestion I’d make.

(Joe) #149

Go check out this pen and let me know. Which do you prefer?

An Anonymous Pen on CodePen

  • I find paragraphs with red border easier to read
  • I find paragraphs with blue border easier to read

0 voters

(Joe) #150

@cjk77 I haven’t forgotten about you. A more detailed reply will follow :wine_glass:

(Gerhard Schlager) #151

I find both fonts hard to read. I’m not sure why, but somehow the combination of font size, color and line height doesn’t feel right to me. :thinking:

(Chris Klugewicz) #152

Despite having a very high end monitor, the typeface for the red-bordered paragraphs is a little difficult to read because Microsoft’s text rendering is still bad after all these years. I think increasing the overall text size would go a long way to addressing that issue. Of course, leading would need adjusting as well in order to maintain that very nice line spacing. Overall, I still prefer the red paragraphs for the reasons I mentioned a couple of posts up.

(Joe) #153

What is your opinion of text legibility in this pen:

An Anonymous Pen on CodePen

  • Bad
  • Acceptable
  • Good

0 voters

(Chris Klugewicz) #154

I’m generally in favor of serif faces in body text, but on Windows, serif faces at small sizes pretty much suck. I like Lato myself, so I think it’s a good choice here.

(Joe) #155

Given that:

1- Everything will function exactly the same.
2- Mobile layout be consistent as well.
3- The font / text is exactly the same


ignoring any small quirks you may notice (These are just mock ups)

Which of the following do you prefer?

Default layout:

Proposed layout:

  • I prefer the default layout
  • I prefer the proposed layout

0 voters

(Joe) #157

v74 is out please update

What happned to versions 70 - 73? :open_mouth:

Well I’ll tell you what, I held out on releasing those because each addressed a different aspect and things did not just look right just yet.

So, here’s what’s new:

  • New font. Thank you to everyone that spent the time and voted :heart: Let me know if you want any of the previous suggested fonts and I will tell you what they are.
    - topic poster avatars are now slightly larger.
  • posts are now centered in relation to the screen.
  • added a variable to control max-width for content @keyboardstaff ($V-page-max-width: 95vw)
  • Added @ZackFea’s fix for emoji’s not displaying well.

I am still not finished with the layout but this is a good time for an update. Let me know If I broke anything.

Here’s the photos you’ve been waiting for:

Let me know if I broke anything :sweat_smile:

(Vincent) #158

While the mobile layout looks great, I find the left padding on posts in desktop to be a bit odd (especially given the larger avatar size).

Did you try adapting the straight card layout for posts from mobile to desktop?

(Anyway, the lighter header for posts is definitely a step forward and you should keep exploring!)

(Joe) #159

You know what?

I think that’s a great idea :grin:

Please update again, this is now done:

I want feedback on the larger avatars so let me know what you think.

Larger avatars:

Default avatars:

  • I prefer larger avatars
  • I prefer default avatars

0 voters

(Vincent) #160

I really dig that.

However I’m still unsure about larger avatars. I feel you took the effort to give your theme lots of space to breathe, and avatars at that size feel slightly cramped. Could you drop a screenshot with the default size, just as a means of comparison?

(Joe) #161

Sure, I just edited the post

(Vincent) #162

I think I would go for default avatar size + padding = new card header size.