FANDOM


Edit the titles and comment in the top page Edit

<h1>Which red list species are sold?</h1>
<h2>Subtitle</h2>
<p>Mouse hover the logos to see the species sold</p>

Add the right html to all species Edit

To Portugal would be something like this:

<!-- Alabote -->
<div class="specie" id="rrAlabote">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=1" target="_blank">
    	<img alt="Alabote" title="Alabote" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/halibut.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=1" target="_blank">Alabote</a>
    </div>
</div> 

<!-- Alabote da Gronelâdia-->
<div class="specie" id="rrAlaboteGronelandia">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=2" target="_blank">
    	<img alt="Alabote da Gronelândia" title="Alabote da Gronelândia" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/glhalibut.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=2" target="_blank">Alabote da<br />Gronelândia</a>
    </div>
</div> 

<!-- Atuns -->
<div class="specie" id="rrAtuns">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=3" target="_blank">
    	<img alt="Atuns" title="Atuns" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/bluefin-tuna.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=3" target="_blank">Atuns</a>
    </div>
</div> 
                     
<!-- Bacalhau -->
<div class="specie" id="rrBacalhau">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=4" target="_blank">
    	<img alt="Bacalhau do Atlântico" title="Bacalhau do Atlântico" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/cod-amend.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=4" target="_blank">Bacalhau do
            <br/>
            Atlântico
        </a>
    </div>
</div>

<!-- Camarões -->
<div class="specie" id="rrCamaroes">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=5" target="_blank">
    	<img alt="Camarões" title="Camarões" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/shrimp.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=5" target="_blank">Camarões</a>
    </div>
</div>

<!-- Espadarte -->
<div class="specie" id="rrEspadarte">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=6" target="_blank">
    	<img alt="Espadarte" title="Espadarte" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/swordfish.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=6" target="_blank">Espadarte</a>
    </div>
</div>

<!-- Linguado europeu  -->

<div class="specie" id="rrLinguado">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=7" target="_blank"><img alt="Linguado europeu" title="Linguado europeu" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/sole.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=7" target="_blank">Linguado<br/>europeu</a>
    </div>	
</div>

<!-- Peixe espada branco -->
<div class="specie" id="rrPeixeEspada">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=8" target="_blank">
    	<img alt="Peixe espada branco" title="Peixe espada branco" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/peixeespadabranco.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=8" target="_blank">Peixe espada<br/>branco</a>
    </div>
</div>

<!-- Peixes vermelhos -->
<div class="specie" id="rrPeixesVermelhos">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=9" target="_blank">
    	<img alt="Peixes vermelhos" title="Peixes vermelhos" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/redfish.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=9" target="_blank">Peixes<br/>vermelhos
        </a>
    </div>
</div>
<!-- Pescadas -->
<div class="specie" id="rrPescadas">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=10" target="_blank">
    	<img alt="Pescadas" title="Pescadas" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/hake.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=10" target="_blank">Pescadas</a>
    </div>
</div>

<!-- Raias -->
<div class="specie" id="rrRaias">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=11" target="_blank">
    	<img alt="Raias" title="Raias" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/skate.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=11" target="_blank">Raias</a>
    </div>
</div>

<!-- Salmão   -->
<div class="specie" id="rrSalmao">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=12" target="_blank">
    	<img alt="Salmão" title="Salmão" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/salmon.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=12" target="_blank">Salmão</a>
    </div>
</div>

<!-- Solha Americana -->
<div class="specie" id="rrSolha">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=13" target="_blank">
    	<img alt="Solha americana" title="Solha americana" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/american-plaice.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=13" target="_blank">Solha<br/>americana
        </a>
    </div>
</div>

<!-- Tamboris -->
<div class="specie" id="rrTamboris">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=14" target="_blank">
    	<img alt="Tamboris" title="Tamboris" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/anglerfish.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=14" target="_blank">Tamboris</a>
    </div>
</div>

<!-- Tubarões -->
<div class="specie" id="rrTubaroes">
    <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=15" target="_blank">
    	<img alt="Tubarões" title="Tubarões" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/dogfish.jpg" />
        <br/>
    </a>
    <div class="legenda">
        <a href="http://www.greenpeace.org/portugal/lista-vermelha?id=15" target="_blank">Tubarões</a>
    </div>
</div>

Don't forget to:

  1. Have all species with the correct links to the red list, with captions translated and sorted by alphabetic order of the common name

Define location of the supermarket logos Edit

The images are defined in the following html. This should be properly configured once, then just copy/paste. All images should have 50x70px

<!-- Set the logos, and href links bellow. Don't forget to set the javascript links too!! -->	
<div id="rrLogoSuper1" class="rrLogosSuper">
	<a href="super1"><img alt="Supermarket 1" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/lidl.png" /></a>
</div>
<div id="rrLogoSuper2" class="rrLogosSuper">
	<a href="super2"><img alt="Supermarket 2" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/soane.png" /></a>
</div>
<div id="rrLogoSuper3" class="rrLogosSuper">
	<a href="super3"><img alt="Supermarket 3" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/mosqueteiros.png" /></a>
</div>
<div id="rrLogoSuper4" class="rrLogosSuper">
	<a href="super4"><img alt="Supermarket 4" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/auchan.png" /></a>
</div>
<div id="rrLogoSuper5" class="rrLogosSuper">
	<a href="super5"><img alt="Supermarket 5" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/jm.png" /></a>
</div>
<div id="rrLogoSuper6" class="rrLogosSuper">
	<a href="super6"><img alt="Supermarket 6" src="http://static.greenpeace.org/int/nocache/Seafood_Markets/ranking2010/Portugal/logos_navbar/carrefour.png" /></a>
</div>	


Translate navigation criteria names Edit

This criteria names are the same as the main page, so just copy/paste

<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 -->

Define which species are sold in each supermarket Edit

This is done by editing the which_species.js file

Important: Remove the lines of the species that are sold in the supermarket, ignore the name rrFishPresent

#rrLogoSuper1 relates to the species if the first supermarket, #rrLogoSuper2 to the second....

In each supermarket the scoring is defined in the line

$("#rrScoreCriteria").addClass("rrGreenScore").text("99%");
$(document).ready(function(){
/* WHICH SPECIES MODULE NAVIGATION */

	function rrClean(){
		$(".specie").removeClass("rrFishPresent");
		$(".rrSupermarketScoring").removeClass("rrSupermarketScoringHighlight");
		$("#rrScoreCriteria").removeClass("rrGreenScore").removeClass("rrOrangeScore").removeClass("rrRedScore");
		$("#rrScoreCriteria").empty();

	};

	/* Remove the lines when the specie is sold in the supermarket - IMPORTANT: Only the #rrLogoSuper1 has all the species */

	$("#rrLogoSuper1").hover(function(){
		
		$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */
		
		$("#rrAlabote").addClass("rrFishPresent");
		$("#rrAlaboteGronelandia").addClass("rrFishPresent");
		$("#rrAtuns").addClass("rrFishPresent");
		$("#rrBacalhau").addClass("rrFishPresent");	
		$("#rrCamaroes").addClass("rrFishPresent");	
		$("#rrEspadarte").addClass("rrFishPresent");	
		$("#rrLinguado").addClass("rrFishPresent");
		$("#rrPeixeEspada").addClass("rrFishPresent");		
		$("#rrPeixesVermelhos").addClass("rrFishPresent");
		$("#rrPescadas").addClass("rrFishPresent");
		$("#rrRaias").addClass("rrFishPresent");
		$("#rrSalmao").addClass("rrFishPresent");
		$("#rrSolha").addClass("rrFishPresent");
		$("#rrTamboris").addClass("rrFishPresent");
		$("#rrTubaroes").addClass("rrFishPresent");	
	}, function(){
		rrClean();
	});

	$("#rrLogoSuper2").hover(function(){

		$("#rrScoreCriteria").addClass("rrOrangeScore").text("69%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */

		$("#rrAlabote").addClass("rrFishPresent");
		$("#rrAlaboteGronelandia").addClass("rrFishPresent");
		$("#rrAtuns").addClass("rrFishPresent");
		$("#rrBacalhau").addClass("rrFishPresent");	

		$("#rrEspadarte").addClass("rrFishPresent");	

		$("#rrPeixeEspada").addClass("rrFishPresent");		
		$("#rrPeixesVermelhos").addClass("rrFishPresent");

		$("#rrRaias").addClass("rrFishPresent");
		$("#rrSalmao").addClass("rrFishPresent");

		$("#rrTamboris").addClass("rrFishPresent");
		$("#rrTubaroes").addClass("rrFishPresent");	
	}, function(){
		rrClean();
	});

       (...)

});

Add the texts for each supermarket Edit

For each of the criteria edit and change the text bellow. And please note that:

<span class="rrGreenScore">99%</span>

Creates a Green 99%

<span class="rrOrangeScore">99%</span>

Creates an Orange 99%

<span class="rrRedScore">99%</span>

Creates a Red 99%

and

<span id="rrBest" title="Best supermarket in this criteria"> </span>

Adds a thumb up (to the best supermarket)

<span id="rrWorst" title="Worst supermarket in this criteria"> </span>

Adds a thumb down (to the worst supermarket)

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

	<h3>Supermarket 1 <span class="rrGreenScore">99%</span><span id="rrBest" title="Best supermarket in this criteria"> </span></h3>
	
	<p class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor.</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>
</div><!-- END #rrtextunit -->


Why is this criteria important Edit

Each criteria has a text explaining why is it important. Very easy to define:

<div class="rrTextsUnit"> <!-- FIRST PARAGRAPH IS LEAD TEXT -->

	<p title="Read more..." class="rrExpandable">Why is this criteria important - 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>
	
</div><!-- END #rrTextsUnit -->

Remove class="rrExpandable" and all content inside the div if you just want the lead.


What you can do Edit

Here is where you add specific long term cyberactions for this criteria.

<div id="rrSendMessage"><!-- --- WHAT YOU CAN DO ------- -->

	<h3>What you can do:</h3>
	
	<p>To help supermarkets start to <i>remove unsustainable products</i> <strong>you can:</strong></p>
		
	<div id="usual1" class="usual"> 
	  <ul> 
	    <li><a class="selected" href="#tab1">Consummer</a></li> <!-- Configure the tabs text here -->
	    <li><a href="#tab2">Student</a></li> <!-- Configure the tabs text here -->
	    <li><a href="#tab3">Professional</a></li> <!-- Configure the tabs text here -->
	  </ul> 
	  <div id="tab1">
           <p><strong>As a consummer you can</strong>...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.</p>
		</div> 
	  <div id="tab2">
	  	<p><strong>As a student you can</strong>... 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</p> 
		</div>
	  <div id="tab3">
	  	<p><strong>As a professional buyer you can</strong>... 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.</p> 
		</div>
	</div> 
 
<script type="text/javascript"><!-- This script is what makes the tabs work, don't forget to include the "jquery.idTabs.min.js" script -->
  $("#usual1 ul").idTabs(); 
</script>
	
	<p id="rrHelpNote">It's everybody's responsability to protect the oceans. Thank you for your help.</p>
</div><!-- end #rrSendMessage -->

The code is commented.

What do this percentages mean? Edit

This module is exactly the same in every page. Translate once and copy/paste.

<!-- ----------------- WHAT DO THIS PERCENTAGES MEAN? --------------------- -->
<table id="rrPercentagesMeaning" summary="Significados das classificações">

    <caption>What do this percentages mean?</caption>

    <tr class="rrGreen">
        <td class="rrPercentage" id="rrGreenFish">
            100%<br />70%
        </td>
        <td>
            Possui uma política de compra de peixe aceitável que
            deve ser respeitada e melhorada no futuro.
        </td>
    </tr>

    <tr class="rrOrange">
        <td class="rrPercentage" id="rrOrangeFish">
           70%<br />40%
        </td>
        <td>
            Foram tomadas medidas relativas a uma política de compra de peixe sustentável, mas são necessárias acções mais concretas para que atinja um nível aceitável.
        </td>
    </tr>

    <tr class="rrRed">
        <td class="rrPercentage" id="rrRedFish">
            40%<br />0%
        </td>
        <td style="width:65%">
            É necessário agir urgentemente para melhorar a política 
            de compra de peixe. 
        </td>
    </tr>

</table><!-- end #rrPercentagesMeaning -->