Discourse Vincent theme

theme-full

(Joe) #118

v0.66 is out please read carefully :warning:

This version includes color scheme modifications and so it needs a fresh install. I’m sorry for the inconvenience but there’s nothing I can do about it (I have not had the time to write up presentable bug report for the issue)

I’ll just quote myself here from earlier:

The changes:

I spent a bit of time on the color

Moderator highlight has been bugging me for a while. Some of the color combinations were…ugly. So I’ve moved the highlight to the side border of the post. Here’s a before and after

New is on top:

You may have also noticed the new curved borders.

Everything now will have slightly rounded corners here’s an apples to apples comparison:

Now let’s say rounded borders are not your thing. So here’s what you need to do to remove them.

add this to a theme that wraps around Vincent:

$border-radius-switch: "off";

I won’t go into more details about that unless someone asks about it :sunflower:

Now, here’s what the new color schemes look like: (some have not changed by the way they are used have)

Orange:

Green:

Blue:

Red:

Magenta

And the new addition to the color schemes :fire:

Teal:


I’ve spent a bit of time on the navigation menu. It now behaves a little bit differently and is on the overall not so bulky.

and here’s another screenshot with a different color scheme:

If you want to enable your users to select more than one color scheme follow the steps at the bottom of this post:
Discourse Vincent theme

:sweat_smile::ok_hand:


#119

Looks very good. If you do this theme on white version, it would be great. :grinning:


#120

Verry nice!.

The Group section could need some love too. The avatar style for using font-awesome classes looks realy ugly imho. Would be nice to see some changes there.

Here is some css to improve the look:

.group-info .avatar-flair, 
.groups-table .groups-info .avatar-flair {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
    i {
        font-size: 1.75em !important;
    }
}

The result:
image


(Joe) #121

Awesome, glad you like it :sunflower:

Yes there will be a light version and I’m actually working on it. :grin:

I agree this needs some love :heart:

Awesome! this will up in the next version. :grin: :ok_hand:

thank you :wine_glass:


(AppyBuilder) #122

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


(Mittineague) #123

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

See:


(Joe) #124

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. :smile:


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 :sweat_smile:). 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 :wine_glass:.


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


(AppyBuilder) #125

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?


(Joe) #126

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

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


(AppyBuilder) #127

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


(Joe) #128

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. :sunflower:


#129

(Joe) #130

@8BIT

I cannot reproduce that issue :sunflower:

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? :wine_glass:


(Joe) #131

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 :sweat_smile:)

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 :sweat_smile:)


#132

@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?


(Joe) #133

v 0.69 is out please do a fresh install :sweat_smile:

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 :kissing_smiling_eyes:

So delete the theme and pull it again.

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

However :sweat_smile:, 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:

Capture

Let me know if I was not very clear :sweat_smile:


@Timelord

Sorry about the delayed reply. :sunflower:

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. :wine_glass:


#134

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


#135

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!

`


#136

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


(Joe) #137

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 :wine_glass:

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