Joomla Templates Club 406,261 posts

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#170402

I have a client who wants to layer a video behind their logo in the header of their pages. We have selected and purchased a video from iStockPhoto.com, and I can make it fit in the allocated space, but I am not familiar enough with the T3 framework to know where to start and how to proceed.

The site is J 1.5.23. At the time we started the project, 1.6 had not been out of beta for very long, and VirtueMart didn’t have a 1.6/1.7 compatible component yet.

Here is the link to the video we are using:

Here is what her logo looks like:

So she wants to superimpose the logo image on top of the video. It seems to me that it ought to be possible through the use of DIV tags, but I don’t know where I would insert such DIV tag code in the template scripts.

In addition to my developer membership here, I also have a similar membership at another template designing group. One of the things they do is always include a template position called “logo” which can be populated with a Custom HTML module. This makes it very easy for site developers to make adjustments to logos and any other content they want to put in that position. Has Joomlart ever considered incorporating such a feature in any of their template designs?

Best regards,

Chris

---

Attachments:

1. 

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#423253

Hi Chris,

<em>@whamprod 280876 wrote:</em><blockquote> she wants to superimpose the logo image on top of the video. It seems to me that it ought to be possible through the use of DIV tags, but I don’t know where I would insert such DIV tag code in the template scripts.
</blockquote>

Two thoughts –

1. no matter what she does, without converting that video out of FLASH it will not show in iPhone, iPad, etc. My recommendation would be to take the video and logo and combine them, and then convert them to HTML5 video. That way you need not worry about layering.
2. But if you still want to layer, simply make the logo a PNG file and set it to a higher “z-index” than the video. And the video, if kept as flash, will need to have its “transparency” value turned on. This is not really a T-3 issue but simple CSS.

Once you have the video up, we can better suggest how to modify your CSS.

<em>@whamprod 280876 wrote:</em><blockquote>
One of the things they do is always include a template position called “logo” which can be populated with a Custom HTML module. This makes it very easy for site developers to make adjustments to logos and any other content they want to put in that position. Has Joomlart ever considered incorporating such a feature in any of their template designs?</blockquote>

For us a module is a module is a module. Who are we to suggest where its best to put your logo! 🙂 If we labeled a module “Logo” there are some newbies who would then worry that that is all the module position could be used for!

Nice site, by the way.

Have fun!
John.

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423258

The downloaded video is a MOV file, not flash, and the logo already is a PNG. I confess that I know very little about editing video files, and I wouldn’t know where to begin to merge a PNG file. If you’ve got some suggestions, I’m all ears.

I would be happy to upload the video. The problem is that the original download is 139 Mb file. I did get Quicktime to export a 5.8 Mb m4v file. Which should I upload?

I would have used “z-index” in the DIV tags. I just don’t know where I’m supposed to put all this stuff on the site.

Thanks for your help.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#423261

The first thing you must do is get the video converted and uploaded.
And getting it converted to MP4 … you will be cooking! You’re going to want to get that video down MUCH smaller than 6mb.
If you have Quicktime Pro: http://www.wikihow.com/Convert-MOV-to-MP4-and-HD-MP4-With-Quicktime-Pro-7
Otherwise look for MOV to MP4 converters.

Once you’ve got your video uploaded – check to see if the logo appears behind, in front or off to the side of your video.

If it is behind the video, then you need to set the “transparency’ setting on the video.

Add:

<param name="wmode" value="opaque"/>

to your embed code.

If it is STILL behind the video,

then goto: templates/ja_droid/css/template.css – line 364
And add the following in red below


h1.logo a { background: url("../images/logo.png") no-repeat scroll left center transparent;
display: block;
height: 150px;
width: 302px;
z-index: 1000;
}

If it is off to the side of the video
then you need to reposition it using: templates/ja_droid/css/template.css – line 362

h1.logo {
float: none;
height: 150px;
margin: 0 auto 10px;
width: 302px;
}

Adjusting the values above in RED will reposition the logo up and down, left and right.

The Firefox FIREBUG extension is priceless for this kind of work.

There will probably be more questions ahead, but this will at least give you an over view as to whether or not it’s worth the trouble. 🙂

Have fun!
John.

1 user says Thank You to John Wesley Brett for this useful post

1. whamprod

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423269

John, thanks for the information. I have to get to a meeting right now, but I’m going to purchase a copy of iSkysoft Video Converter for OS X Lion this evening and tackle your suggestions. Unfortunately, Quicktime 7.x doesn’t run properly in Lion, according to what applecare told me this afternoon.

I’ll let you know how it goes.

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423680

Hi John, I’m back….

I’ve got the 139 Mb MOV file edited down to either a 1.9 Mb mp4 or a 956 Kb SWF (using iSkySoft’s “Video Converter for Mac”). That’s the best I can do, so it will have to suffice for now until I can figure out how to make it smaller (without Flash).

I’ve made the edits you recommended to the template.css file.

I just want to make sure that I am about to edit the correct template file to insert the DIV tags mentioned above……

plugins/system/jat3/base-themes/default/blocks/header.php

Is that the right file?

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#423682

That should do it…but save a backup of that file just in case. 🙂

1 user says Thank You to John Wesley Brett for this useful post

1. whamprod

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423684

Great! Thanks again.

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423696

<em>@jwbrett 281452 wrote:</em><blockquote>That should do it…but save a backup of that file just in case. :)</blockquote>
OK, the video is up now and, at least on my browser, properly positioned.

The one thing I would like to do is get rid of that background header, and I can’t find it. I found the blue version of it, but I need to either rename or overwrite the gray version, so that the entire header background will be plain black…..so that the video is more part of the background.

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423697

Never mind…. I found it!

[whamprod Friend whamprodJoin date: April 2008Posts: 60Downloads:0Uploads:6 Thanks: 10 Thanked: 6 times in 1 posts]

#423698

Wow! It looks spectacular. My client is going to be very happy. Thanks again for all the help!

[Author]

Posts