<< Harana Christmas Party 2007 | Journals | Having A Domain >>
Written by : Rommel Pascual November 08, 2007, at 10:36 AM
This is how to get a flash photo to replace the PMWiki Logo:
1. Create a flickr flash badge.
Login to http://www.flickr.com/badge.gne and follow the instructions on how to create a flickr badge. The results will be a javascript that you could cut and paste into your website.
2. Cut the javascript that was created.
The script looks like this:
<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#99FFFF; color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = '99FFFF';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=random-number';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne" style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">What is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="http://www.flickr.com/photos/some_random_number">username</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge -->
3. Edit out some of these codes.
You only want the flash part of the code, all the rest can be edited out. You should end up with something like this:
<!-- Start of Flickr Badge -->
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = '999999';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=12641680%40N02&zg_set_id=72157602398699291&zg_context=in%2Fset-72157602398699291%2F';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="115" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
}
</script>
<script type="text/javascript">zg_insert_badge();</script>
<!-- End of Flickr Badge -->
4. Edit the skin template
The skin template is where the logo is positioned in all the wiki pages. I'm using the monobook skin. Open the /pub/skins/monobook/monobook.tmpl and replace the codes between the <div id="pagelogo"> and the </div> <!-- id='pagelogo' --> with your revised flickr badge code.
5. Edit the skin css
Adding the code in the template puts the badge in a rather awkward top corner of the page. To reposition it, edit the pagelogo section in the /pub/skins/monobook/monobook.css. My settings look like this:
#pagelogo {
position: absolute;
top: 10px;
left: 20px;
height: 155px;
width: 12em;
overflow: visible;
}
That's it.
P.S.
Similar methods in the net: