Discourse Vincent theme

theme-full

(Joe) #1

This post is a WIP

Beta testers needed for a new theme.


Theme repo:

GitHub - hnb-ku/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


Material Design Stock Theme
Media Overlay Plugin
Discourse Tab Bar for Mobile
Certain verification pages do not respect the selected theme
(Mittineague) #2

I haven’t tried it on my localhost yet. Are all of those “!important” rules necessary? Nothing against your decision, only that I’ve been burnt by them before.


(Joe) #3

I agree. I hate !important as much as the next guy. :grin:

There are 49 !important and I plan for v1.0 to have zero.

:blush:


(Joe) #4

v0.41 is out please update

!important is now down to 11 rules @Mittineague :grin:


(Joe) #5

Had a bit of free time so I implemented something I’ve been putting off for a couple of days.

v0.42 is out please update :allthethings:

I added variables at the top of the sheet so you can change the colors of just about everything to your liking.

I will be adding more of those as I go along. For now they are:

$trim-color: white;
$main-color: #00BCD4;
$main-background: rgba(19, 20, 24, 0.9);
$secondary-background: rgba(255, 255, 255, 0.1);
$border-color: rgba(255, 255, 255, 0.1);
$body-background-gradient-direction: bottom right;
$body-background-gradient-color-first: darkred;
$body-background-gradient-color-second: darkblue;
$body-background-pattern-opacity: 1.0;
$body-background-gradient-opacity: 0.2;

Say you want a slightly less colorful Discourse like so:

All you have to do is change the variables to your liking.


Regrettably, your modifications will be overwritten with every theme update and will have to be made again after every update.

So keep them backed-up / saved somewhere else.

However, since they are only one-liner color variables, that should be a 1-2
minute job to copy them again.

Will have to figure out a way to make the customizations stick at some point. (ideas?)


(Vincent) #6

@import - CSS | MDN maybe

Great work on that theme. Keep it up mate!


(Anders Thengs Kristensen) #7

I really like this. I’ve added this and will probably use it going forward for a while.

But there are a couple of things I’ve noticed just looking around. I don’t know whether they are intentional or not, but they stood out, so I’ll report them anyway. I also want to apologise in advance for butchering the terminology.


When clicking the button on a reply to see the post the reply is to, there is a gap above the line around the name:

The admin notification bubble is a different colour and shape than the regular notification bubble:
image

On the latest topic list, the user list shows up like this:
image


I’ll report back if/ when I notice any other peculiarities.


(Joe) #8

I think you may really close to the answer there. I spent a bit of time reading about this and looks like something like this might be the way to when the theme starts shaping up:

I still have a bit more to read and will post any updates here. Great idea @_vincent :crossed_fingers:

Thank you for your kind words and I’m glad you like it! :yum:


That’s awesome @nawthor , I’m glad you like it! :grin:

First things first, thank you for taking the time to write this. I really appreciate your feedback. The things you pointed out do need to change I agree :allthethings:

For future reference if anything bugs you please let me know even if you think it’s by design.

So, I updated the theme today to v0.43

I fixed fixed couple of the things you pointed out and a couple of other things.


^ this is now fixed.


I spent a bit of time looking at the reply chain and you’re right, this is no good:

From v.43 onward I will try to make replies very distinct by adding a bit of space here and there.

For now, here’s what a reply looks like once you update to v.43:

I think this is a little bit clearer in terms of flow, thoughts?


As for this:

Well, this and a whole set of other issues come from reducing the height of the header.

I will iron out these issues as I seem them. For now I don’t have anything to trigger the notification bubble with, so I am sort missing a lot of things because they don’t come up.

Maybe I should just leave the default header, thoughts?

What do you prefer?

  • Continue developing the thin header
  • Leave the default header alone

0 voters

Yes, please do :heart:


(Anders Thengs Kristensen) #9

Will do, so have some other things that stood out:


Group avatair flair shows up at the bottom edge of the post:

Post being replied to doesn’t have a background colour:

There is a scroll bar on the search bar (this only happens in Vivaldi as far as I can tell):

With the hamburger menu clicked, the notification bubble shrinks:
image


This theme makes Edge a mess. Scrolling inside a topic will make the page spasm out. Loading topics is slow. The background image does not stay static in the background, instead it moves erratically with the page while scrolling.
This happens on two of my computers (both with (mostly) identical hardware though), but not on my third. The third has the moving background, but only if I scroll immediately after entering a new page. On my Lumia 1020 the background also moves when scrolling, but not on my iPhone SE.

Don’t know if this is something you can do anything about, but I figured I should mention it.


It looks really good.


(Joe) #10

Great feedback @nawthor :ok_hand:

v0.44 is out

^ this is now fixed.


The post replied to should have the same background now. The margins and positioning still need one more tweak or so.


I completely removed all thin header modifications. I will spend some time on it in the future

For now, the amount of work required to get things to play nice V.S the amount of screen space to be gained from reducing the header height is not encouraging. So, I believe things like:

and this:

Should be gone now. If not please let me know when you get a chance.


Great find, thank you for this :+1:

So the root of this issue seems to be a bug with Microsoft smooth scrolling

https://www.google.com/search?&q=ms+smooth+scroll+background+bug

I am now aware of it and will find a fix and update once I found one.


I also believe reverting the header changes will fix this:

Let me know if otherwise.


#11

Keep going! Subscribed to this thread…


#12

Giving it a run!


(Joe) #13

:grin::ok_hand: That’s super awesome @8BIT! Thank you :wine_glass:

ideas and bugs always welcome. :heart:


(Joe) #14

Just pushed a small update which should sort out the position of the replies and post replied to like so:

Post replied to:

Replies:

Suggestions / feedback always welcome


(Anders Thengs Kristensen) #15

Group avatar flair and scrollbar in the search bar seem to be fixed.


Then to even more stuff:

The admin notification bubble still shrinks when opening the hamburger menu (but now it’s the right size at least half of the times it shows up):
imageimage

The delete topic button in the admin wrench is the same colour as the other options, not highlighted with the danger colour. I am torn on this.
image

The gap below a quote is wider than the one above.

There is a miniature scrollbar on the tags field in the composer

Spoilerising the first line of a post makes the gap between the post “header” and the text wider than usual:

If the op in a topic is flagged, the message telling admins it’s been flagged creates a gap between the post and the topic information bit. While I love the floating flag messages under posts, I don’t think it looks good as is on topics:

When viewing a deleted post the only indication that it is deleted is the red bar at the bottom. Perhaps making the post header red would look better?
The icon of the user who deleted the post is crammed into the bottom of the red bar:

The notification bubbles are misaligned:
image

The highlight if the op is also the latest poster is almost impossible to see:
image

Unchanged text in the edit history is quite dark and hard to read:

Text removed in the edit history is even harder to read:

But I really like the text added in the edit history, so you can/ should leave that alone.

On my iPhone SE, the new topic button showed up like this, but after reloading the page I am unable to repro. I’ll report back if it happens again.
IMG_0045

When pressing the post menu show more button there is a wave/ ripple-like effect on the buttons that show up.


Really like this. I was writing that I was looking forward to seeing this, and then you went ahead and made change as I was writing.


Also, I’ve been meaning to ask, why call the theme Vincent?



#16

27 AM

plugin compatibility with retort. doesn’t show emojis well.

scrunches the admin panel data in some ways.

can’t see text as scroll…

you could align the avatars a bit more?

26 AM

category colors stick out a bit? and above and below at the end.

07 AM

01 AM

it’s a bit hard to make out @ usernames:

49 AM

formatting here:

mobile css issues:

User names on posts overlaps background

33eea76eba21dfc7b969bdf4e2f759230775747c_1_281x500

Links don’t shrink and stretches out posts

988a65bb2e2213ac647f0fe265349efc0fde22b7_1_281x500

Maybe get a color change on the search titles see screen shot below.

64a2fafffe8918de27602ecbce5517b1ae664675_1_684x500


(Joe) #17

Thank you so much for the great feedback @nawthor & @8bit

v0.45 v0.46 is out please update

Rather that spend a bunch of time explaining things, I will be brief and add photos. I spent a bit of time on the mobile layout. Mobile devices should now have more space for content as I moved the avatar inside the reply card for mobiles.

click for full size

This should also fix this issue:

With this out of the way here’s what I also looked at:

The history modal:

the admin panel:

quotes and spoilers:

Post avatars:

post avatar margins

OP highlight should be brighter now: (thoughts?)

Delete - all danger buttons - will now follow a variable set at the top for color:

I worked a bit on inputs and the scroll bar should be gone now @anders:

inputs still need more time though.

I like this idea a lot. I think that works really well:

The color can also be set using the danger color variable at the top.

Oneboxes should now play nice on mobiles:

click for full size:

Category borders are now aligned better:

The admin notification bubble is acting better now (please confirm if possible @nawthor )

There’s more to be done with the other notification bubbles.


@8bit

I think these issues…










…are caused by something else on your end. Make sure you’ve selected the “Dark Vincent” color scheme

Things are different on your site:

Also, Retort should be working fine now:


Thank you again @nawthor & @8bit

There are still a couple of items on your bug list that I have not gotten too and will address in the next update.

Keep the bug reports and ideas coming :+1:


Vincent is a working name for theme development, I like to name things I work on. As for why Vincent and not something else:

possible spoilers

Loving Vincent Official Theatrical Trailer


#19

This is looking great. How do I install it?


(Daniela) #20

In this way:


#21

a few things with mobile today. spacing, styling.