In this session we show how to prevent a video from covering a drop down menu in Thesis by adding custom code to the Vimeo widget. We take the p tag and add an inline style format for the z-index and discuss how the z-index works. We also show how to create a style in custom CSS to get the menu on top of the video.
Member: Yeah. Could you go to this website wctv8.com?
Member: Thank you.
Member: Alright, this is a local community access TV station that I volunteer at. And if you look under… if you click on the Video Archive menu item there and go to Public… I’m sorry, I didn’t have… just float over it, I’m sorry.
Member: See how the drop down menu, when it gets down, if it’s long enough, it goes behind the embedded video widget4 from Vimeo there?
Member: Is there a way to get that to not do that?
Rick: Yeah, you’re going to need to add some custom code to this Vimeo widget and let’s see, this is… I’m trying to figure out what it is. Okay so it’s in here. It says object here. So you might… it’s wrapped inside of a p tag. Well, I think what I would do… what I would try to do here actually first is simply say… I would try to add style equals and then z index: -1 or take this p tag and do the same thing. Add to this p tag an inline style that says you know, style equals colon z –index: -1. Because what you want… the z index… well, if you’re using my plugin, this z index is 0. If you’re not using my plugin, if it’s just straight Thesis then the z index is 50. Let’s see, UL menu, z index is 50. You know, you might try changing that z index to… no, that didn’t work. Yeah, you definitely need to get this thing and give it a negative z index. -1 is probably all it takes.
Member: Okay so the code would be style equals…
Rick: So the code would be style equals double quotes z-index: -1 double quotes.
Rick: And that’s the inline style format for the z index. So if you go to W3 Schools and look at z index, you can see the actual.. well, where is it? Okay, here’s the actual code or the actual syntax, z index: -1. And actually, that’s true. The z index only works on… I’m sorry. I forgot about that. The z index only works on things that have a position assigned to them. So the way this really looks is something like you know, style equals and then position: relative; z-index: -1. I’ll put that in the chat window for you but this, if you can insert that in your object tag, that might work. And if you can’t insert it into the… and if that doesn’t work, try putting it in… try wrapping it say, in a div or in a p tag and give it this, give it this inline style.
Rick: Now if this happens a lot then you may want to create a style in custom CSS for it. And so at which point you could just say you know, format text… well, let’s see. Let’s come back over here. If you were doing it in… well actually, let’s test that. Let’s test this in… let’s test it in Firefox. Okay so edit CSS and something will say .custom .format_text object. So that’s the HTML element and then what you’re saying is position: relative and then z-index: -1. Okay, z-index: 0. Okay, z-index: 0 will work. Minus 1 is putting it behind the background color so z-index: 0. Does that make sense?
Member: It does. So all I have to do add that custom code to the custom CSS?
Rick: Right. So you could add that custom code to the custom CSS, here it is in the chat window and that will also do the job. That’s probably a better solution than the inline style because it’ll happen every time you add an object into your format text area.
Member: Okay. How do I get the… I just copy it?
Rick: Yeah. Well, I just put it in the chat window so you could copy it out of chat or I can put it in your… I can put it in the forum.