Discourse Vincent theme

[Hossein_Amerkashi]

Hi, How do you change the theme to vincent? Installed plug-in, but don’t see the them in the list.

[Mittineague]

If you installed the theme as you would install a plugin, that may be a problem.

See:

How do I install a Theme or Theme Component?

To install a theme: Head to www.yoursite.com/admin/customize/themes or via the UI head to Admin -> Customize Click the Import button [image] Select “From the web” [image] Enter the URL of the theme as described on the theme: for example https://github.com/SamSaffron/discourse-users-nav Click Import Once done you will have your theme or theme component imported. You will be able to check for updates and update the theme using the UI. [image] Note: imported theme …

[Johani]

v0.67 is out please update.

If you are on v0.66 just do a regular update.

if you are on anything lower, you still need a fresh install if you want the new color schemes to kick in.

---

Changes:

1- moved the background to a canvas element
2- included the background svg as an asset in the repo instead of using base64 in the theme header.
3- removed rounded borders (sorry ). I still want rounded borders to be an option but that release was a bit premature. I think it’s better to wait for theme settings.
4- @ZackFea I added your code .

---

@Hossein_Amerkashi are you still having trouble or have you figured it out?

[Hossein_Amerkashi]

I had it installed as plug in. I’ll have to check this thread to see how to install the plug in. I guess i have to uninstall the plug in.

For theme upload, what github address do i put in?

[Johani]

For theme upload, what github address do i put in?

This is the url of the repo that you need to import

https://github.com/hnb-ku/discourse-vincent-theme

[Hossein_Amerkashi]

Thanks. Just updated. Looks great. More LIGHT color-scheme would be great; easier on eyes.

AppyBuilder

[Johani]

Thanks. Just updated. Looks great. More LIGHT color-scheme would be great; easier on eyes.

Great @Hossein_Amerkashi I’m glad you have that sorted.

However, the theme does not have any light color schemes as of now. The scheme you’re using is the default Discourse Light scheme. I don’t recommend using that with Vincent now.

The theme only comes with 6 dark scheme and they all start with “Vincent Dark” These are the ones supported by the theme.

I am working on light schemes and will update here once they’re ready for testing.

[8BIT]

Search Bar Button Bigger Than Box on Vincent Theme

[Johani]

@8BIT

I cannot reproduce that issue

However, looking at that shade of grey in the bug report, I would say the theme is using an incorrect color scheme (Simple dark, maybe)

Can you please verify that you’re on one of the 6 supported Dark Vincent color schemes?

[Johani]

v 0.68 is out please update

I made a small change to the gradient background. I believe the change will further reduce any gradient banding and generate even smoother colors. It’s pointless to add screenshots of this change as image compression would make the change indistinguishable (by adding even more banding )

However, in case you’re interested here’s an example for the dark blue scheme:

Old gradient:

background: linear-gradient(to top left, #00d3d8, #0067d8);

New gradient:

background: radial-gradient(
	at 100% 100%,
	#20b4b8,
	#20a8b8,
	#209bb8,
	#208eb8,
	#2082b8,
	#2075b8,
	#2069b8
);

After giving my eyes a bit of a break I noticed that some of the colors were too bright. I desaturated them so this version will have slightly more elegant colors

I liked being able to fine tune the saturation so I added a saturation setting. it accepts values between 0 and 100. 0 means no color.

The default is 70 and here are some examples (all with the dark blue color scheme):

0

25

50

75

100

So you can get very close to your own sweetspot by moving a slider (eventually via theme settings).

---

The theme background is now also set via a variable. All you need is a url.

This is the default:

$v-theme-background: url(#{$vincent-background}) !default;

Which pulls the svg from the theme’s asset folder.

All you’d need to do is add the url of your custom background or its variable. (eventually )

[Timelord]

@lll - love the theme, however I am an absolute rookie when it comes to coding.

I have the latest version live on my site, and would love to change the background, however, your instructions are WAY over my head

The theme background is now also set via a variable. All you need is a url.

This is the default:

$v-theme-background: url(#{$vincent-background}) !default;

Which pulls the svg from the theme’s asset folder.

All you’d need to do is add the url of your custom background or its variable

Where exactly do I add the URL?

[Johani]

v 0.69 is out please do a fresh install

This version requires a fresh install because I changed the color schemes. However, this will be the last time you have to do that. I promise

So delete the theme and pull it again.

From this version on, Vincent will only come with 1 color scheme

However , you will still be able to modify the colors to your liking, just a little bit differently.

If you install v0.69 you get this:

In this version I’ve added three variables that you can configure. they are hue, saturation and lightness.

These look like so:

$v-hue: 0 !default;
$v-saturation: 0 !default;
$v-lightness: 0 !default;

So lets assume you want an orange theme. Well, examine this:

The base color scheme for Vincent is 196deg on a color wheel.

Let’s say I want orange. Well I create a new theme, make sure it uses the Vincent dark scheme, and add this in there:

$v-hue: 180;

Which would adjust the base hue by 180deg. So base + adjustment = 196 + 180 = 376 or 16deg (the wheel resets at 360deg)

Then add Vincent as a child theme and the result would be:

$v-hue accepts values between -360 and 360

Now let’s say I want the colors to be a little less saturated. I can add this to the parent theme:

$v-hue: 180;
$v-saturation: -25;

And the result would be:

$v-saturation accepts values between -100 and 100

Now let’s say you want things to be a little bit darker, well you can add this (exaggerated example):

$v-hue: 180;
$v-saturation: -25;
$v-lightness: -10;

And the result would be:

Other examples:

$v-hue: 300;

$v-hue: -120;
$v-saturation: -10;

$v-hue: -200;
$v-saturation: -30;

$v-saturation: -50;

You can do that with any color degree and create as many wrapper themes as you want.

eventually I will hook this up to a theme setting that looks like this:

Let me know if I was not very clear

---

@Timelord

Sorry about the delayed reply.

and would love to change the background, however, your instructions are WAY over my head

That’s probably because my instructions were not very clear / intended to be actionable. I was rambling about the way things would be in the future for the theme.

Regardless, here’s the latest way to change the background: (cc @cjk77)

1- Make sure you’re on the latest
2- create a new theme
3- Set the new theme’s color scheme to “Vincent Dark”
4- add this in the common CSS section of the new theme

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

5- Add Vincent as a child theme under the newly created theme

The result:

---

This process will get easier as the theme develops and will probably end up being a field where you copy/paste the url as a theme setting.

[8BIT]

holy cow. i’ll have to walk through this tomorrow and do the update!

[MostHated]

Hey there, love the theme! I just had a few questions. Where and how would I go about editing the spacing of these few things?

I would like to move the main text part over more closer to the history slider as seen in the first image. In the second one, I would like to somehow reduce the open space between these elements at the top, and then also make the two middle ones a tiny bit wider so that they are both closer together and there is not so much gap between them.

Lastly, is there a way to raise up the space between the quick reply popup that comes up from the bottom a bit? The “Save” button and that whole bottom part just feels way too close to the bottom.

Is this just some values somewhere in CSS that can be edited within the admin panel or do I need to edit some files somewhere?

Thanks!

`

[8BIT]

so, i deleted the existing parent theme and all the child themes… but i still see these children?

[Johani]

so, i deleted the existing parent theme and all the child themes… but i still see these children?

I believe this occurs if you delete the parent theme before the child themes.

Deleting the parent theme would normally delete the schemes that come with it unless at the the time of deletion there happens to be other themes using said color schemes.

Then the schemes would stick around. Further, even if you end up deleting those themes later, the schemes won’t be deleted and would stick around.

The only time an imported color scheme is deleted is if it is not being used by any other theme - at the time of parent theme deletion.

Regardless, manually deleting the color schemes has never caused any issues for me. So if you’re done with those, you can go ahead and manually delete them.

Let me know?

---

Awesome @MostHated I’m glad you like it

Let me check on those and get back to you as soon as I can

[MostHated]

Thanks, I appreciate it! There was one more I wanted to ask about that I just found when I was playing around with things.

I switched to category only view to see what it looked like. Is there any way to utilize that space to the right of the image more? The text gets all smushed together when it looks like there could be plenty for more information, or a better description or something, as well as on the actual category page when you go to it. It feels like there should be more info there or something.

[Johani]

I’ll preface this by saying that you should make sure you do all your modifications in a separate child theme. Otherwise you will lose all changes when the theme is updated.

make the two middle ones a tiny bit wider so that they are both closer together and there is not so much gap between them.

The css for that is this (default is 2em)

@media (min-width: 700px) {
	.categories-and-latest div.column.categories {
		margin-right: 1em; 
	}
}

Here’s a quick before and after

Before:

After:

---

I would like to somehow reduce the open space between these elements at the top

These are alerts and are only displayed to you because you are admin / staff. These are not displayed to members.

Regardless,

The CSS for that is:

.alert.alert-info {
    margin: 0.25em;
}

.list-controls {
    margin: .5em 0;
}

Before / after:

---

I would like to move the main text part over more closer to the history slider as seen in the first image.

this one is a bit tricky because the location of the scroll bar changes according to the screen width, I need a bit of time on it

Default:

Option A - pull the scroll bar closer

Option B - move the posts closer to the center of the screen

Neither is final but which of these is more inline with what you have in mind?

---

Lastly, is there a way to raise up the space between the quick reply popup that comes up from the bottom a bit?

The css for that is:

#reply-control .reply-area {
    padding-bottom: 1em;
}

---

I switched to category only view to see what it looked like. Is there any way to utilize that space to the right of the image more? The text gets all smushed together when it looks like there could be plenty for more information, or a better description or something

That’s definitely a bug , thanks for letting me know. This will be fixed in the next update:

[8BIT]

I’m doing this right…?

and then editing CSS:

But, it doesn’t make it orange…

[witsend]

Fabulous work @lll, I had a great time customizing this theme bit this weekend!

Can you tell me how I can set the category description to appear in mobile view (it currently only shows on desktop) – and how I can edit the description’s placement (right now I’d like it to be shifted downwards ~15px or so)

Image attached with where I’d like the description to show up on mobile.

Thank you!