Discourse Vincent theme

theme-full

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

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:

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:


(Chris Klugewicz) #102

I’m seeing a weird issue … whenever one of our mods/admins adds a category, all the category colors in the theme disappear:

Here’s what the category settings look like:

When I click on the blue square (next to the tan one that’s currently checked), here’s what happens:

Note that the color correctly turns blue next to the little lock icon, but the wrong box gets checked (the black one instead of the blue one) and the tan one remains checked.

Is this a theme issue or a Discourse issue?

We are setting up our Discourse at the moment, and losing the category colors every time anyone makes a change is troublesome, though not a total disaster, but it’d be nice to not have to re-color them so often. :wink:


(Joe) #103

Thanks for reporting @cjk77

That sounds very troublesome :grin:

So I tried to create a new category while using the theme and I cannot reproduce the issue, but that doesn’t mean anything just yet.

Would it be possible for you to check if the issue occurs while using the default theme?


As for the second issue with the wrong box being ticked. The tick mark lets you know which colors have already been used by other categories. It doesn’t show you which color you’ve currently selected.

For example, before your category colors got wiped (:sunflower:), your screen would have probably had a lot more checked colors like so:

I will keep trying to reproduce the first issue and will update if I do :wine_glass: