Discourse Vincent theme

theme-full

(Taylor) #184

Which version of Discourse are you running? Theme settings were introduced in in version 2.0.0.beta4, so you’ll need to be on that or higher. If you are up to date, the settings should be under the Uploads section of the Vincent theme page.

Also worth mentioning is the apparent need to delete the theme and re-import it once you have updated Discourse to get it to work properly.


(Chris Klugewicz) #185

That’s the problem. We’re running on a hosted instance, and our service only updates to the latest stable release. So no 2.0 beta for us.

@lll … is there a way to get back to a version of Vincent that doesn’t require 2.0?


(Joe) #186

@elGrande

My apologies I could not get to you sooner.

Thank you for your kind words. :sunflower:

You can use this in a child theme under Vincent:

.topic-footer-main-buttons .btn {
    background-color: $border-color;
}

You will see an error in the editor but you can ignore it, it will will work.

I’m sorry, I don’t understand that one, what are you trying to do?

Sure, you can add this to a child theme:

// Force footer to bottom of the page even if content is short
#main > div:first-child {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#main-outlet {
    flex: 1 0 auto;
    max-width: calc(100vw - 20px);
    width: 1110px;
}

And the result would be something like this:

Yes! :laughing: I have grand plans for this theme :heart:


(Joe) #187

@cjk77 My apologies for not getting to you earlier :sunflower:


:warning:This is very specific to @cjk77 and anyone not on the beta branch of Discourse.

I do not recommend running an older version of the theme because
1- You’ll miss out on new features
2- the burden of maintenance will fall on you.

However, that does not mean that you should be left behind because you’re on the stable branch, so here’s what you can do:

Look at the variables section at the top:

You will see something like this:

// Basics -------------------------------

$v-font-weight: 300 !default;
$v-font-size: 1.1em !default;
$v-theme-background: url(#{$theme_background}) !default;
$v-hue: 0 !default;
$v-saturation: -25 !default;
$v-lightness: 0 !default;
$V-page-max-width: 95vw !default;

// palette colors -------------------------------

$theme-base: hsl(
		hue($tertiary) + $v-hue,
		saturation($tertiary) + $v-saturation,
		lightness($tertiary) + $v-lightness
	)
	!default;
$theme-trim: $quaternary !default;

$main-background: rgba($header_background, 0.9) !default;
$secondary-background: rgba($main-background, 0.5) !default;
$tertiary-background: rgba($main-background, 0.8) !default;
$text-base: reverse-lightness($secondary) !default;
$trim-background: rgba($text-base, 0.1) !default;
$border-color: desaturate($trim-background, 100%) !default;
$highlight-color: rgba($text-base, 0.25) !default;
$link-color: lighten($theme-base, 25%) !default;

// settings -------------------------------

$body-background-pattern-opacity: 0.25 !default;
$body-background-gradient-opacity: 0.45 !default;
$body-gradient-color-first: adjust-hue($theme-base, -23deg);
$body-gradient-color-second: adjust-hue($theme-base, 15);
$highlight-speed: #{$highlight_duration}s !default;
$button-text-case: #{$button_text_case} !default;

Now let’s say you want to change the background but don’t have access to theme settings just yet. The variable for that is $v-theme-background

Since the variables have !default flags, you can override them (credit @zackfea for the idea)

To override the background, follow the method from earlier

$v-theme-background: url(https://imgur.com/A1MTWm8.jpg); //  <~ change the url here

body:before {
	background: black !important;
	opacity: 0.35 !important; // increase or decrease the black overlay transparency 0 - 1.00
}

it still applies even after theme settings were added. The settings for the this theme build upon what was already there.

And the result for that would be:

This method of creating a wrapper theme around Vincent can be used for any of the setting-linked variables.

I am very happy to help if you need more information.


#188

Thank you @lll, it works — amazing support. :star_struck:

I changed the background color, I do not know if it is the best solution but it works.

.btn {
    background-color: rgba(239,239,239,0.1);
}

I want to this box where is the message to be larger. :smile:

Uh. People who use this theme should send you a coffee. :coffee:


(Joe) #189

Something like this?

If so you can achive by adding the following to a child theme:

.post-stream {
    align-items: flex-start;
}

#topic-title,
#topic-title .title-wrapper,
.posts-wrapper,
.topic-body {
    width: 100%;
}

.topic-body {
    width: 860px;
}

.topic-post,
.topic-body {
    max-width: 100%;
}

.timeline-container.timeline-docked {
    margin-top: 50px;
}

This is not entirely tested so let me know if any problems come up.


(Vincent) #190

Not totally sure but that does look like improvement to me

For the first time I feel like the progress bar is not just sitting there.

Don’t know if someone noticed – bottom angles of the latests topics container are not rounded.

The top bar doesn’t seem to support long content.

That might be strongly related to my community, since the majority of the posts there start with a media onebox, but I feel like there is not enough spacing between the post header and the content.
(I’m only talking about the first post with the YouTube video. I find it perfect for text-based posts such as the answer below in this example)

Also, did you think about adding (an option for) a Material “new topic” button?
image

Anyway I hadn’t tested your theme in quite a long time and it has definitely improved! Great work mate :cocktail:


#191

@lll, exactly. I tried to follow this step from here, but it does not have any effect. Is it ok if I add it directly to .css in the theme? :sweat_smile:

Thank you. :coffee:


(Chris Klugewicz) #192

The background override method isn’t working for me with the current version of Vincent, though it worked perfectly before I updated. Not sure what I’m doing wrong.

Also, there’s a large blank space above the header strip … any way to remove that? It’s very bothersome on mobile, especially.

If it helps with troubleshooting, I never see a background picture, even with the base Vincent theme with no overrides…


(Joe) #193

@elGrande

Here’s what I just tried and it works.

1- create a new theme

2- give your theme a name. for example: Wide posts.

3- add this CSS in there:

.post-stream {
    align-items: flex-start;
}

#topic-title,
#topic-title .title-wrapper,
.posts-wrapper,
.topic-body {
    width: 100%;
}

.topic-body {
    width: 860px;
}

.topic-post,
.topic-body {
    max-width: 100%;
}

.timeline-container.timeline-docked {
    margin-top: 50px;
}

Like this:

Now add Wide posts as a child theme under Vincent like this:

It should work. here’s a before and after:


Yes you can but that’s not very efficient because every-time you update the theme you lose all of your custom code. Theme components are the safest way to keep your customisation


@cjk77

Ok let’s try this:

1- create a theme
2- call it custom background (or whatever works for you)
3- Add this in there:

$v-theme-background: url(https://imgur.com/A1MTWm8.jpg); //  <~ change the url here

body:before {
	background: black !important;
	opacity: 0.35 !important; // increase or decrease the black overlay transparency 0 - 1.00
}

4- Make custom background your active theme
5- Change the color scheme for custom background to Vincent dark
6- add Vincent as a theme component

The result should look something like this:

If you don’t get the same result, then there’s something else going on. Check your browser console for any errors.

Just looking at your screenshot I think there’s something else going on here:

This looks like a black background:

So you’re either running a lot of custom code on top of the stylesheet for the theme is not kicking in for some reason

A few tell tale signs:

I’ve only seen this when the <canvas> for the background is loaded without the CSS code to style it. If you were to peek through, you’d probably see something like this (square represents where the canvas would be)

And that’s what’s pushing the rest of the content down. When the CSS is loaded the background does not have a static position and so everything on top of it and the blank space does not exist.

I’m happy to keep checking if you still face problems, just let me know :ok_hand:


@_vincent

I know your post came first :heart::sunflower:, and I will get back to you with a detailed reply. I just ran out of time for now :sweat_smile:


#194

Oh, I was wrong somewhere. Now it works perfectly. Thank you mate! :coffee:

LE: Do you still have this background? :grin:


#195

@lll love this theme, and even more so because its teaching me CSS skills! Thank you very much.

The colour matching/modification is new to me.

Question: I’ve got a custom header picture and followed your guide on how best to match the Hue, but what should I do to Saturation and Lightness to best match a photo in general?

Interestingly I initially guessed the hue, then loaded my photo into Affinity Photo, picked a colour that was prominent, checked its RGB, then converted to HLS and discovered to my amazement I’d almost perfectly matched the Hue level with my eye only.


(Vincent) #196

I guess you meant @lll :wink:

No biggies, I’m waiting for the theme to be close-to-perfect before switching to and applying my custom CSS over it.


#197

I did, thanks! Hahaha, now it’s getting confusing, all these ‘Vincents’ :wink: Apologies!


(Chris Klugewicz) #198

I’m not running any custom code at all except for the single background override.

Here’s an error I noticed when I looked at the CSS for Vincent itself … not sure if it has anything to do with anything, but I don’t recall seeing it before:

That same error shows up in my parent theme also, and I know I’ve never seen that before:


(Joe) #199

Hi @_vincent :sweat_smile:

Just to clarify, are you referring to the title section extending on top of the progress bar:

Or are you referring to the overall expansion of the content area in topics?

Good catches, will fix these in the next update :ok_hand:

This is intentional, there’s a 15px clearing between the first element in a post and the post header.

In the case of Youtube videos and Slick galleries, this space is removed.

There’s no particulate reason why it’s so other than my personal preference as I prefer this:

to this:

But you’re right, this is more or less a matter of personal preference. I will add a setting for this.

In the meantime, you can use this to add the space / clearing back:

.cooked>.slick-initialized:first-child, 
.cooked>.lazyYT-container:first-child {
    margin-top: 0;
}

I think would be a good option to have, let me see what I can come up with.


@elGrande

This is the same background that comes with Vincent by default.

The only thing different here is the amount of hue rotation on for the gradient colors.

The default is this:

$body-gradient-color-first: adjust-hue($theme-base, -23);
$body-gradient-color-second: adjust-hue($theme-base, 15);

And what this means is Vincent takes the theme base color:

Which is right about here:

And derives two colors from it. One with a hue rotation of -23 degrees and one with a hue rotation of 15 degrees, like this:

And creates a gradient based on those two colors to layer on top of the pattern in the canvas.

The background you linked to is the same thing except the hue rotation is a little bit different.

Something like this:

$body-gradient-color-first: adjust-hue($theme-base, 160);
$body-gradient-color-second: adjust-hue($theme-base, 15);

And the result is:

I am still not finished with this (I plan for these to be theme settings) but will extend support for them within the next couple of updates :ok_hand:


@cjk77

Ok, thank you for posting the screenshots. I think I finally know what’s going on, try this

$v-theme-background: url(https://imgur.com/A1MTWm8.jpg); //  <~ change the url here

body:before {
	background: black !important;
	opacity: 0.35 !important; // increase or decrease the black overlay transparency 0 - 1.00
}

$highlight-duration: 1.5s;
$button-text-case: uppercase;
$dark-background-overlay: false;
$rounded-borders: false;

Let me know if it works.


@merefield

I see you there, will get back to you in the next reply :grin::ok_hand:


#201

@lll, your support is extraordinary and very detailed. :beer:

Thank you, again. :coffee:


(Chris Klugewicz) #202

Worked perfectly!!! Thank you!! :tada::confetti_ball::tada::confetti_ball::tada:


(Vincent) #203

this ^

Great news! I think we might end up needing theme settings categories :slight_smile:


(Joe) #204

Matching a photo may be a little bit complicated depending on the content of the photo and how uniform the colors in it are.

For a very exaggerated example examine this:

You can sort of see how the pixel colors vary wildly.

But let’s say you want to match a certain color in a photo like something from this region:

You can use any photo editing software and use the color picker tool to select the color from an individual pixel. Some editors will give a choice between RGB, HEX and HSL values, if not, you can convert the color online.

Alternatively, and this is what I do, you can use DevTools in chrome to pull colors on the spot.

First you select the color picker tool:

Then you hover to the color you want to pick on the page:

(I cannot capture the tool in action with a screenshot but you get the point.

Then you get a the color in DevTools like this:

Capture22

Now, the color is in HEX value and you need HSL all you have to do is hold shift and left click on the color to cycle through the color formats and Chrome would do the conversion.

Something like this:

colors

Explaining this took a little bit of time but once you figure it out it literary takes 4 seconds :sweat_smile:

So, now you have the HSL value for the color, all you need to do is make vincent match that value

First the HSL color we got was:

hsl(358, 86%, 62%)

And now examine the default in Vincent, which is this color:

In HSL this is:

hsl(196, 100%, 42%);

And the rest making the value in Vincent match the desired color so to get to 358 hue from 196 hue you add 162 to hue

To get to 86% saturation from 100% saturation you subtract 14

And to get to 62% lightness or luminosity from 42% you add 20

So, if you put it all together, you get:

$v-hue: 162;
$v-saturation: -14;
$v-lightness: 20;

And the result would be something like this:

Let me know if anything was not clear enough


@_vincent

I think that’s a great idea. :wine_glass: