Discourse Vincent theme

theme-full

(Bhanu Sharma) #82

Looking forward to Magenta!


(Joe) #83

V0.62 is out please read carefully :warning:

Instead of writing all of this again, I will just quote myself here.

Bottom line: Do a clean install.

Here’s what’s new:

A few small fixes here and there and… New color schemes. The repo now contains 5 color schemes.

Notes:
I realize “Red” here may not be really RED, but it’s the closet color I see - this applies to all the colors.

Between this and using weird non-descriptive names for the color scheme I decided to bend reality a little bit :sweat_smile:

Also, Dark here referes to the overall scheme being dark and not the color being dark. I am still working on Vincent Light.

Vincent Dark Blue

Vincent Dark Red

Vincent Dark Green

Vincent Dark Magenta

Vincent Dark Orange


Now, let’s say you want to be able to use more than one color scheme at the same time.

Here’s how you do that:

1 -Create a new theme
2- Name the theme whatever you want to show in theme selection list
3- Make theme selectable
4- Add Vincent as a child theme
5- Change the theme’s color scheme to one of the color schemes that come with Vincent.

Repeat the process with the other color schemes.

Here’s what the end result should look like:

After you repeat the process for more than one color scheme the theme selection list would look like this:

Both would be using Vincent as a base.


If you would like to add your own color scheme with a different base color, here’s what you need to do:

Create a new color scheme and add these colors:

Then change “tertiary” to the theme base color that you you like to use. I don’t recommend changing any of the other colors yet.

Then use the newly created color scheme.

You can copy the colors from here

"primary": "cccccc",
"secondary": "111111",
"tertiary": "009dd8",
"quaternary": "9E9E9E",
"header_background": "131418",
"header_primary": "cccccc",
"highlight": "9E9E9E",
"danger": "96000e",
"success": "00bf9a",
"love": "f50057"

(Joe) #84

Should Youtube embedded videos extend to the width of the post?

(With the correct aspect ratio)

Default:

Proposed:

  • I prefer the default style
  • I prefer the proposed style

0 voters

This only applies to Youtube embedded videos.


(Vincent) #85

Is that done using CSS only? I would love to see that on my custom theme!


#86

I realy like this themen. If you could add the !default flag to you variables would be nice.


(Kara L.) #87

Really nice! Did you consider also having a light / white version of it?


#88

And based on the poll… Dark Blue is the favorite so far!


(Joe) #89

I’m glad you like it @ZackFea :ok_hand: I think that’s a great idea. I will add !default :wine_glass:


Awesome @rbrlortie :+1: and YES! there will be a light version of Vincent :heart:


That’s such a great way to get feedback @8BIT :grin: and

wow! The Bitcoinpub is already 30k> on Alexa! :champagne::champagne: Keep going!! :heart:


Yes, here’s how I’m doing it @_vincent

First you find the amount of padding - on the sides - around the parent container:

parent padding

In my case it’s 1.25em on each side. In your case it would be a different value.

Then you adjust to width of the video wrapper or .lazyYT.lazyYT-container to be as large as the parent width + the padding. Using calc()

.lazyYT.lazyYT-container {
    width: calc(100% + 2.5em)  // parent width + 1.25em padding on each side 
}

Now, that won’t work by itself because the element has inline styles applied to it. One of them is width:

inline styles width 480px

To override this you need !important

Then we end up with this:

.lazyYT.lazyYT-container {
    width: calc(100% + 2.5em) !important;
}

And the element looks like this:

This doesn’t look right yet.


Since the element has position: relative you can move it around using top,right,bottom,left without affecting the rest of the other elements as the movement would be reletive to its original position.

You already know the amount of parent padding on the left side, so just use that as a negative number and everything will fit.

Something like this:

.lazyYT.lazyYT-container {
    left: -1.25em;
}

Now the element should look like this:

But it still doesn’t look right.


Now you need to fix the aspect ratio. The aspect ratio for Youtube player is 16:9

To achieve an aspect ration of 16:9 on an iFrame you need to padding-bottom: 56.25%;

The native Discourse embedded styles add that. but since we modified the width of the player, things get a little bit funky.

All you need to do is to also add the same amount of parent padding to the bottom padding value plus 56.25% plus 2-3px

So, you add:

.lazyYT.lazyYT-container {
    padding-bottom: calc(56.25% + 1.4em) ; // parent padding was 1.25em + 2-3 px comes up to 1.4em 
}

But since the element has inline styles for bottom-padding you need !important here.

You end up with this:

.lazyYT.lazyYT-container {
    padding-bottom: calc(56.25% + 1.4em) !important;
}

And the player looks like this:

To recap, here’s the CSS put together:

.lazyYT.lazyYT-container {
    width: calc(100% + 2.5em) !important;
    padding-bottom: calc(56.25% + 1.4em) !important;
    left: -1.25em;
}

Since the padding is measured in em in Vincent, I would need to modify this for the mobile theme. If your padding is measured in px, you probably won’t need to.


I looked at your theme and found you have a slightly different html structure. but the same should apply.

I also found that you have

.topic-body .contents .cooked {
    overflow: hidden;
}

Which would cut off the video overflow outside the parent element.

For this to work you need to change this to

.topic-body .contents .cooked {
    overflow: visible;
}

And then add the changes from above (adjusted for your theme),

You probably end up with something like this (for your theme)

.topic-body .contents .cooked {
    overflow: visible;
}

.lazyYT.lazyYT-container {
    width: calc(100% + 40px) !important;
    padding-bottom: calc(56.25% + 23px) !important;
    left: -20px;
}

And the result would be:


Media Overlay Plugin
(Vincent) #90

Word up mate, works like a charm :ok_hand:

Thanks for your hard work!


#91

wow, the support you give for your theme is intense!


(Anders Thengs Kristensen) #92

I have some issues when trying to agree with flags while using Vincent on Vivaldi or Opera (latest stable and dev builds)(edge doesn’t have these issues). When I click the “agree” button the drop-down appears as usual, but when I try to move my cursor down to click anything, the drop-down disappears. Clicking still works, even if the drop-down is invisble, and if I move my cursor away, it reappears.


(Chris Klugewicz) #93

This is an absolutely beautiful theme! Any progress on making the background image more easily changeable?

Also, how do I remove the overlay color if I am using an image background?


(Joe) #94

v0.63 is out please update

:warning: Make sure you save your customizations before updating just in case you for some reason modified Vincent’s files instead of making modification in a child theme :warning:

Also,

For some reason I forgot to add a license to the repo when I first created it. I apologize for any confusion that may have caused.

I added a GPL v2 license to the repo, so fork, repackage, re-release, copy to your heart’s content. :champagne::champagne::boom: That was my original intention. :ok_hand:


I added !default to all the variables @ZackFea


@nawthor great find :grin::ok_hand:

I can reproduce the issue.

flag modal buggy and hides on hover

I think I managed to fix it

flag modal fixed

please let me know if it’s still an issue


YouTube videos now match the full width of the post:

Desktop:

Mobile:

click for full size


That’s great to hear @cjk77 I’m glad you like it :sunflower:

I have not made any changes to make the background more easily configurable, but I am glad you brought it up. This will be the focus of the next version. with an ETA of 1-2 days.

Don’t get me wrong, you can set the background right now using the standard way of adding a fixed background like so: (in a child theme under Vincent)

// Remove the default theme background
#background,
body:before {
    display: none; 
}

// Add new background
html {
    background: url(image.jpg); // <~ background url goes here
    background-size: cover;
    background-attachment: fixed;
}

And that would be enough to change the background. However, this “conventional” way of adding a fixed background leads to scroll jank / low performance because the background gets repainted over and over and over and over and over and over with every 1px of scroll.

If you’re willing to wait until the next version, I will try very hard to make it a lot easier to add a high performance fixed background template where you can change the background to any image you want but keep the performance high. :sunflower:

The overlay is the background of the pseudo-element :before for the <body> element.

To completely remove the overlay, add this to a child theme under Vincent:

body:before {
    display: none;
}

Let me know if you need more help.


There are also a couple of minor fixes here and there.

I also updated the thin header component to match Discourse core changes introduced here:

So be sure to update the thin header theme component if you’re using it.


(Chris Klugewicz) #95

Thank you! That worked great! :tada:


#96

Updating the theme shouldn’t impact the child-themes, correct?


(Sam Saffron) #97

No it will not, we do not cascade updates.


(Joe) #98

@cjk77 @Tyson and anyone interested in changing the background.

Here’s what you need to do:

1- Create a new theme - you can name it whatever you want (The name will NOT be visible to users) - In this example I’ll be using “Background Wrapper”

2- Add it as a child theme under “Vincent”

Now you should have something that looks like this:

Now, go to the common header section in the new theme and add this:

<img id="background_c" src="">

The result should look like this:

And then add this to the common CSS section:

// You only need to change the url below to that of the desired background
$background-url: "URL_GOES_HERE";

body:before {
  // uncomment the line below to fully disable the overlay
	// display: none; 
  // set the overlay color below. You can use gradients
	background: black;
  // set the overlay opacity below
	opacity: 0.5;
}

#background {
    display:none;
}

#background_c {
	background: url(#{$background-url});
	background-size: cover;
	background-position: center center;
	z-index: -2;
	min-width: 100vw;
	width: auto;
	overflow: hidden;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;


	@supports (-ms-ime-align: auto) {
		z-index: 1;
	}

	@supports (-ms-accelerator: true) {
		z-index: 1;
	}

	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		z-index: 1;
	}
}

And the result should be:


There are two things you need to do:

1- Add the background url at the very top in the variable in the place where it says URL_GOES_HERE

2- choose whether or not you want and overlay on the background and set the color and opacity.

Once you’re done the result should look like this:

Or this:

Or even:

And the performance would still be high when scrolling.

This will not be affected by theme updates.

So go to town :champagne::sweat_smile:

Let me know if you need more help.

:wine_glass:


(Chris Klugewicz) #99

WOW. Just perfect!!! :star_struck:


(Joe) #100

:grin: @cjk77
I hate to ask you to read it again but I have just updated the post and the template - and the CSS - to be a bit more intuitive, so now the background is a child theme of Vincent instead.

This makes a lot more sense. :heart:


(Chris Klugewicz) #101

Lol, not a problem! I just switched it around! Works great! :beers: