FANDOM


Top page text Edit

<h1>Supermarket Ranking 2010</h1>
<h2>Subtitle or slogan</h2>
<p>Use the mouse on the graph bellow for more details</p>

Add the flash Edit

Change the address of the file in both embed and object tags:

<!-- The flash file goes here -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="430" height="442">
    <param name="movie" value="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/swf/chart_portugal.swf" />
	<param name="allowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
    <embed type="application/x-shockwave-flash" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/swf/chart_portugal.swf" width="430" height="442" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" allowscriptaccess="always" />
</object>

Translate the criteria text Edit

<ul id="rrNavigationCriteria"><!-- NAVIGATION CRITERIA -->
	<li><a href="crit1" title="Política de compra e venda de peixe sustentável" >Política de compra e venda de peixe</a></li>
	<li><a href="crit2" title="Retirar os produtos piscícolas insustentáveis ou ilegais ">Retirar os produtos insustentáveis</a></li>
	<li><a href="crit3" title="Apoiar os produtos piscícolas sustentáveis">Apoiar os produtos sustentáveis</a></li>
	<li><a href="crit4" title="Traçabilidade dos produtos piscícolas">Traçabilidade dos produtos</a></li>
	<li><a href="crit5" title="Etiquetagem dos produtos piscícolas ">Etiquetagem dos produtos</a></li>
	<li><a href="crit6" title="Venda de espécies da Lista Vermelha da Greenpeace ">Venda de espécies da Lista Vermelha</a></li>
	<li><a href="crit7" title="Transparência e informação aos consumidores ">Transparência e informação</a></li>
</ul><!-- end  #rrNavigationCriteria -->


Correct the link of the PDF and the download text (After being uploaded) Edit

<div id="rrDownloadPdf"><!-- DOWNLOAD THE PDF ICON -->
	<a href="javascript:void(0);" title="Click to download the report. To open this file use Acrobat Reader or another compatible program">
		<img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/otherimages/icon_pdf.png" alt="PDF" />
		Download<br />report<br />(PDF)
	</a>
</div><!-- end #rrDownloadPdf -->

Change the lead text, hidden text and link to hide text Edit

The first paragraph is the lead text and inside the div all hidden text

<p title="Read more..." class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut.</p>

<div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus.</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.</p>

	<p class="rrParentHide"><a href="javascript:void(0);">Hide this text</a></p>
</div>

On the left column edit each of the text modules Edit

First paragraph, with a class of "rrExpandable" is the lead, all text inside the next div is hidden text

<div class="rrTextsUnit"><!-- USE ONE OF THIS FOR EVERY GROUP OF HEADING + LEAD + FULL TEXT -->

<h3>Title conclusions 1</h3>

<p class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut.</p>

<div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus.</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.</p>
	<p class="rrParentHide"><a href="javascript:void(0);">Hide this text</a></p>
</div>

Edit the cyberaction link image and bellow text Edit

<p><a href="http://path.to/cyberaction.page"><img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/otherimages/Bogart_Bacall_AFRS.jpg" alt="Person speaking at the mic" /></a></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim.</p>

Edit the spread the word module Edit

Visible text Edit

<h3>Spread the word</h3>

<p><!-- Configure the title tags to your langauge -->
	<a href="javascript:void(0);" id="rrFacebookButton"><img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/socialimages/facebook.png" alt="Facebook" title="Share the video in Facebook" /></a>
	<a href="javascript:void(0);" id="rrTwitterButton"><img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/socialimages/twitter.png" alt="Twitter" title="Share the link to the video in Twitter" /></a>
	<a href="javascript:void(0);" id="rrBlogsButton"><img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/socialimages/blogger-sapo.png" alt="Blogs" title="Put the video in your blog" /></a><!-- The image of the frog is a service in Portugal -->
	<a href="javascript:void(0);" id="rrEmailButton"><img src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/socialimages/mail-icon.png" alt="E-mail" title="Share by e-mail" /></a>		
</p>

Boxes Edit

Every box is an item:

  1. In the blogs box you might want change the frog image as this is a service in Portugal
  2. You have to create the Facebook and Twitter Links
  3. You have to add right embed code for the Youtube/other videosharing (You need to know how to properly convert the youtube to html. I usually past it in Komposer and get the souce and copy+paste.
  4. The e-mail box has to be configured to the page you want to share and Planet has to be configured (in that page) with the message to send
<form name="send_email" method="post" action="http://www.greenpeace.org/portugal/videos/o-fundo-da-linha" id="send_email">
<div id="rrFacebookBox" class="rrBoxes"><!-- Facebook box -->
	<p>By sharing the ranking video in Facebook you are helping our oceans... share now.</p>
	<p><a target="_blank" href="http://www.facebook.com/share.php?u=http://www.greenpeace.org/portugal/videos/ranking3/">Click here to share</a></p>
</div>

<div id="rrTwitterBox" class="rrBoxes"><!-- Twitter box -->
	<p>By sharing the ranking video in Facebook you are helping our oceans... share now.</p>
	<p><a target="_blank" href="http://twitter.com/home/?status=XXXXXX">Take a look at Greenpeace's new video at http://bit.ly/test</a></p>
</div>

<div id="rrBlogsBox" class="rrBoxes"><!-- Blogs box -->
	<p>By sharing the ranking video in your blog you are helping our oceans... share now.</p>
	<p id="rrShareCode"><object width="560" height="340"><br /><param name="movie" value="http://www.youtube.com/v/zVu9eawb1QY&hl=en_US&fs=1&"><br /></param><param name="allowFullScreen" value="true"><br /></param><param name="allowscriptaccess" value="always"></param><br /><embed src="http://www.youtube.com/v/zVu9eawb1QY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"><br /></embed></object></p>
</div>

<div id="rrEmailBox" class="rrBoxes"><!-- Send an e-mail box -->
	<p>Send an e-mail with the video page to your friends. Use the form bellow:</p>
	<form name="send_email" method="post" action="http://www.greenpeace.org/portugal/videos/o-fundo-da-linha" id="send_email">
	<!-- DONT FORGET TO CHANGE THE LINK ABOVE TO THE PAGE YOU WANT TO SHARE AND TO CONFIGURE THE E-MAIL SENDING IN PLANET 2 -->
        <input type="hidden" name="form:mode" value="edit" />
		<input type="hidden" name="form:id" value="send_email" />
		<input type="hidden" name="mode" value="send" />

		
		<label for="recipient_email">Destination e-mail:</label>
		<input type="text" name="recipient_email" id="recipient_email" class="ttext" />
		
		<label for="sender_name">Your name:</label>
		<input type="text" name="sender_name" id="sender_name" class="ttext" />

		<label for="sender_name">Your e-mail:</label>
		<input type="text" name="sender_email" id="sender_email" class="ttext" />
		
		<input type="submit" name="send" value="Enviar" id="sendToFriend" />
    </form>

Configure the Updates and Links Edit

RSS feed version Edit

The address of the RSS feed must be configured on the link bellow and in the file general interaction

Html Edit

Configure the link and the text

<h3>Updates and links (RSS):</h3>

<!-- dont forget to configure the address of the feed in general_interaction.js -->
<div id="rrUpdatesFeed"></div><!-- This is where the updates show -->

<p>Subscribe the <a href="http://links.greenpeace.pt/category/blogues/feed/" target="_blank">RSS feed</a></p>
</div><!-- end #rrUpdatesAndLinks2  -->
Javascript in General Interaction Edit

Configure the link and the title

* --------------------- UPDATES AND LINKS RSS MODULE --------------------- */

	    $('#rrUpdatesFeed').gFeed({  
	        url: 'http://links.greenpeace.pt/category/blogues/feed/', 
	        title: 'Updates and Links' 
	    });

And make sure that in the header there's a script link to the jquery.gfeed.js file

Alternative: Use Twitter module instead of RSS feed module Edit

If you don't have an RSS from a blog to link to you can use Twitter. With the current configuration it grabs the last tweets including a word. In the example bellow the account is "greenpeace" and the word "climate"

Html Edit

Replace the html of the RSS module by:

<div id="rrUpdatesAndLinks">
	<h3>Updates and links:</h3>
	<div id="tweetHere" class="tweet"></div>
	<p>Follow Greenpeace on <a href="http://twitter.com/greenpeacept" target="_blank">Twitter</a></p>
</div>
Javascript Edit

And replace the add the bellow code on the header. The "from:greenpeace" defines the account (For Portugal would be greenpeacept) and the "phrase=climate" defines a word that has to be on the tweet to be included. Finally replace "searching twitter..." by the translation in the page language

jQuery(document).ready(function($){

/* UPDATES AND LINKS TWITTER MODULE */
    $("#tweetHere").tweet({
        count: 3,
        query: "from:greenpeace&phrase=climate",
        loading_text: "searching twitter..."
    });

})

What did you do module Edit

The what did you do module involves cyberactivists by allowing them to send us a note on what did they do to help the campaign.

Before you configure the module bellow you have to create a "petition" in sign-a-petition.greenpeace.org. Then get the petition number and put it instead of the "337" below. Don't forget to configure the petiton final page in sign-a-petition.greenpeace.org.

Now you can start translating...

<div id="rrWhatDidYouDo"><!-- ---------------------- WHAT DID YOU DO? ---------------------- -->
<!-- First have to create a petition in http://sign-a-petition.greenpeace.org  like  http://sign-a-petition.greenpeace.org/petitions/337 -->
<!-- You might need to create a template too in https://sign-a-petition.greenpeace.org/template_sets  -->

<h3>What did you do?</h3>

<p>Tell us what you did to help the campaign?</p>
<form action="http://sign-a-petition.greenpeace.org/petitions/337/signatures" enctype="multipart/form-data" method="post" name="form" id="form">
<!-- Don't forget to change the URL above - put the number of your pettion (sign-a.petition) instead of the 337 -->

<label for="signature_name">Your name:</label>
<input name="signature[name]" id="signature_name" maxlength="30" type="text" />

<label for="signature_email">Your e-mail:</label>
<input id="signature_email" maxlength="100" name="signature[email]" type="text" />

<div id="rrCountrySelect"><!-- country selection is hidden and deactivated by default, change the #rrcountryselect css to show -->
	<label for="signature_country">Country:</label>
	<select id="signature_country" name="signature[country]">
		<option value=""> </option>
		<option value="es">España</option>
		<option value="fr">France</option>
		<option value="pt" selected="selected">Portugal</option><!-- Change this to your country -->
	</select>
</div>

<label for="signature_comment">Describe your action:</label>
<textarea lang="pt" cols="30" id="signature_comment" name="signature[comment]" rows="4"></textarea>

<input id="rrcommit" name="commit" type="submit" value="Send" />
<!-- the thank you page is defined on your template -->
</form>
</div><!-- end #rrWhatDidYouDo -->