This is a variation of a previous post and deals with inserting a video into the top of the homepage of the Revolution Theme
What you will need:
- Access to your Blog directory structure from an FTP client such as Filezilla
- Text editing software such as Notepad
Understand the style.css page
1) Firstly copy the style.css file from your server onto your computer and make a backup copy of it - just in case
2) Open it up in your favourite text editor and scroll down to the Homepage section, where you will see this code:
#homepageleft {
float: left;
width: 700px;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 0px;
border-right: 1px solid #C0C0C0;
}
This means that the section where the image is is 7000px wide. Scroll down a bit more and see this code:
This image may describe it more clearly:
Understand the home.php file
1) Firstly copy the home.php file from your server onto your computer and make a backup copy of it - just in case
2) Open it up and you will see this text at the top:
div id=”homepage”>
<div id=”homepageleft”>
<img src=”<?php bloginfo(’template_url’); ?>/images/hp-main.jpg” alt=”<?php bloginfo(’name’); ?>” />
This is calling in the left handside section the image that is in the revolution/images folder called hp-main.jpg. And it is this that needs to be changed.
Making the changes
1) Now that we have a clear understanding of what is going on, go to your home.php and locate this section under <div id=”homepageleft”>
<img src=”<?php bloginfo(’template_url’); ?>/images/hp-main.jpg” alt=”<?php bloginfo(’name’); ?>” />
You will now need to replace it with this code:
<object width=”380” height=”250“><param name=”movie” value=”http://www.youtube.com/v/EKGW9WH_0gM“></param><param name=”wmode” value=”transparent”></param><embed style=”margin-bottom:6px” src=”http://www.youtube.com/v/EKGW9WH_0gM” type=”application/x-shockwave-flash” wmode=”transparent” width=”380” height=”250“></embed></object>
The items in ‘red‘ can be changed to reflect the size of your player but remember that if you change the ‘380′ to say ‘710′ you will need to change the style.css file as well. The items in ‘green‘ are changed to reflect the youtube reference code
2) Once that is done upload the file and check to see if it has turned out as you wish.
Variables:
1) You may have to play around with the formatting of the text that you use next to the video. Keeping it short and inserting line breaks where needed will stop the text from appearing under the video
Any comments let me know