Discourse Vincent theme


(Joe) #62

Thanks @keyboardstaff, I’ll keep checking.

I need feedback on the moderator highlight direction.

(Colors not final in either - this more about the approach)

  • Change the background of the header for mod highlighted posts.
  • Change the background for the content of the mod highlighted posts.
  • Think of something else

0 voters

(Steven Greco) #63

No problem. I will look for it. Where you not able to do it the other day? I have sso through my Wordpress site, so you need to register through Grimreapergamers.com.

I don’t have it as the default theme but it is a user select-able choice. you can PM me if you need to.


(Joe) #64

v0.57 is out please update

I was not looking in the right place :sweat_smile:

The issues you were having @Grex315 @barreeeiroo

were caused by inline styles present when your category setting is set to box The inline styles cause result in inconsistent behavior

For this version, I’ve added a couple of !important rules to override the inline styles for now

.list-controls .category-breadcrumb .dropdown-header {
    background: none !important;
    color: inherit !important;

Which I will remove once the inline styles are not there anymore.

I’ve also added removed the border-radius from box categories to prevent this:

box categories with incorrect styles

default behavior is now back for box categories

fixed box categories

Staff highlight is now indicated by a different post header background:

(bottom is a regular post, top is mod highlighted)

how can this be improved?

I have good news @keyboardstaff I can repo the problem you mentioned with the login button.

I think I know why it occurs.

I will fix it along with all the other mobile issues reported so far in v0.58


(Joe) #65

The addition of current color scheme variables

will make customizing Vincent V1.00 as simple as creating a local color scheme that matches you preferences.

obviously still needs a lot of tweaking but serves as proof of concept

(Steven Greco) #66

Great thanks a lot. Looking really polished now.


Still having some issues apparently with search?

(Joe) #68

That screenshot is using the default dark theme not Vincent :wink:


(Joe) #69

@8BIT You can add this to a child theme under the default dark theme as a temporary patch.

.results .widget-link.search-link span {
    color: #aaa;

Let me know if you need anything


(Joe) #70

v0.58 is out please update

There are few things that are fixed with mobile now.

Short version:
This should be fixed now. Check and let me know :wine_glass:

Long version:
(Skip to the next section unless you’re really interested)

Even though you’re on Safari the cause of the real problem is IE / Edge :upside_down_face:

IE / Edge has a bug that’s caused by Microsoft’s implementation of smooth scrolling.

The background you see in Vincent is an SVG image set to position:fixed with negative z-index value. That’s why the posts or topics scroll but the background stays in place.

Using position:fixed on a separate element is much better in terms of scroll performance when compared to background-attachment: fixed

background-attachment: fixed causes constant repaint on scroll. In fact, it’s such a big problem for performance that IOS devices completely ignore it.

Now, why did I write all of this? Well… because the background effect relies on negative z-index stacking and a an element with position:fixed and those are the two things that trigger the bug in IE / Edge

@nawthor had reported the bug before and my fix was to move from negative z-index values to positive ones where the background is z-index: 1 the gradient is z-index: 2 and the element #main sits on top at z-index: 4 and that solved the bug for IE / Edge.

However, it must have interfered with the stacking order for modals (like the login modal) on IOS as you reported here:

So this time around I kept things separate, buggy browsers (IE / Edge) will have their own separate stacking order. This is accomplished with targeted media queries like:

@supports (-ms-ime-align: auto) 
@supports (-ms-accelerator: true) 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

The rest will get the “usual” negative stacking order.

moving on…


^ this is fixed (with the floating messages in v0.57)

I found that the same issue is present in the default theme, but I spent a bit of time on this whole section for mobiles.

There’s now a media query that kicks in under 400px which should also address this:

And here’s what it looks like: (how can this be improved?)

There a couple of new things as well, blockquotes (new at the top)

And also oneboxes:

Thank you for your feedback :wine_glass:

(Bhanu Sharma) #71


Thanks for such a wonderful theme!

I don’t know if it’s a bug but This Doesn’t looks right!

Any ideas on how to fix this?

(Joe) #72

You’re most welcome :grin::+1:

that’s definitely not right. This is the new Firefox, right? I’m seeing things a little bit different

New FF and Chrome:


Check on other browsers and let me know.

(Bhanu Sharma) #73

I had to replace that Wide image to a shorter version That’s why it seems right now!

I Guess That image was too wide (I Initially thought that it was the category banner image)

And Yeah, It’s the new Firefox!

(Bhanu Sharma) #74


hey @lll This definitely seems to be something that isn’t supposed to happen!

When I view source with vincent enabled, both, </head> & <body> tags are reported as stray!

EDIT: This seems like happening because of an <img> tag in the header which is being used for the background. Maybe that can be moved to either CSS or to the body section?

(Joe) #75

Great find thanks for reporting :+1:

I pushed a small update to move the image to the header section. This should fix the stray tags.

This patch will introduce a small bug where the background is not loaded if the first page in your visit is the admin page. This is triggered by what I assume is a restriction on what customizations load in the admin, which makes sense.

I will revisit this bug late but for now the stray tags should be resolved.

Thanks :ok_hand:

(Bhanu Sharma) #76

I Mistakenly reported this on the Patreon Plugin thread but this is another thing that is behaving weird in one weird browser!

This seems to be happening across all browsers because Patreon Logo isn’t available in the Font Awesome Library and Discourse is using some Image to display patreon logo on login button. Maybe it just needs some CSS magic to the class: .btn-social.patreon

(Keyboardstaff) #77

It is difficult for me to communicate in English. I updated to 0.58 today. It seems that the problem has been solved.:blush:

(Joe) #78

v0.60 is out please update

The changes in this version are mostly code improvements / tidying up and not visual. Let me know if I broke anything.

Vincent now relies entirely1 on the color scheme to generate all colors / backgrounds. I believe you won’t notice any difference on your end except for the social buttons which now behave a little bit differently.

As @itsbhanusharma pointed out the Patreon button is broken, he also pretty much pointed out the fix in the bug report as well :ok_hand:

thank you :wine_glass:

That’s great news, thank you :grin:

1: with four small exceptions that are still hard-coded like modal backdrop backgrounds, header border color, input borders and box shadow colors. I intend to get them sorted as well.


on purpose?

(Joe) #80

Yes, but definitely not final. Let me know what you have in mind.

(Joe) #81

v0.61 is out, please update

I Fixed a few minor regressions caused by v0.60

This version has a new background, it looks “exactly” the same, but behaves a little bit better.

the old background was buggy on on some browsers (Not covering the entire screen)

Note that image compression in screenshots causes artifacts. The background is clear / sharp

New FF on 4k screen

New background is fixed (1kb larger before gzip :sweat_smile:):

Also, minor changes to the mobile background

Old background:
click for full size

New background:

Table heads are a little bit lighter now.




should I include more than one color scheme in the repo?





Something else?

What base-colors would you like to see? (rgb / hex value)