How To Add A Flash Header To Your WordPress Blog
In this tutorial I explain how to embed a Flash header in your WordPress self hosted blog. In the video I mention some coding in the CSS file and header.php file, both you can find below. Sorry I couldn’t embed the header.php coding in my blog, it was conflicting with the page, but I added it as an image below! In the future I might have special entry boxes for the coding.
1. Download the Kimili Flash Embed Plugin
2. Place this in your Style.css file: (Adjust the height and width according to your header)
}
#flash_header {
height:332px;
width:1252px;
margin-left: auto;
margin-right: auto;
top:100px;
}
3. Place the following coding below under <div id=”header”> in your Header.php file:
Categories: Development With WordPress, The Latest
Hi, I have gone through your tutorial – how to create flash header ..but just curiuos to know , How did you make your flash header? i mean, what software/ tools you use to make flash header. Btw, I like your websites’ header..its awesome..Thanks.
I used Adobe Illustrator, Photoshop & Flash. Thanks for the nice words, appreciate it!
Thank you Jonathan, for sharing your great knowledge. I am just starting my career as a web designer and your tutorial is one of the most helpful that I have found.
You have saved me endless hours of total frustration!
Thank you! x
You’re very welcome & thank you for the nice words!
Hi Jonathan,
After a little bit of work i finally got it together! Thank you for the “how to”! However, when i look at pictures at my homepage the flash header always get on top. The header gets in the way of my pictureviewer. How do you get rid of that?
Regards!
@Victor CSS either for the header or picture viewer needs some adjusting so they don’t overlap. I would adjust the positioning of the picture viewer with some css.
Hello Jonathan,
How do I access the Header.php file to place the above code ?
@Jerry Baum hey Jerry you can find this in your theme’s folder.
wp-content>themefolder>header.php
Thanks Jonathan !!!
I got it to work, and I’ve used it on two sites… both under construction.
I had to tweek the code (given above) for the Header.php file. It didn’t like some of the quotation marks.
One more question, if you don’t mind. I didn’t alter the Style.css file. It works okay without this (so far). Do you think I might run into problems if I don’t change the CSS code ???
@Jerry Baum You’re welcome, I would add the css. Just make sure you back up a copy of your css, copy and paste it in a plain text or other editor.
Looks like a very simple solution. However, I am not finding the same code in te the header.php file for twenty eleven theme. 2011 uses “branding” title for the header
Thoughts?
Thaks for your tutorial.
wp-content>theme>twentyeleven>header.php
@Bryan Sure, for that theme paste the coding right under the page div on line 141.
….got the swf to show up, disabled the header image, but the navigation menu is ABOVE my swf…???
Anyone have this problem and/or know what Ive done wrong?
@Sue Find the navigation in your style.css file and adjust the position and padding.