FANDOM


Edit the titles and comment in the top page Edit

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

Put the right values to the graph Edit

The graph is configured trough the javascript in the page. Bellow is the full graph and then explanations of what you have to change. Explanations are between /* and */ in CAPITAL LETTERS

<script type="text/javascript">

$(document).ready(function() {

var rrBarcolor = '#8765d6'; /* HERE YOU DEFINE THE COLOR OF THE BARS IN THE CHART */

var chart = new Highcharts.Chart({
   chart: {
      renderTo: 'rrGraphWindow',
      defaultSeriesType: 'column',
      margin: [20, 20, 20, 50] /* THIS DEFINES THE MARGINS, IMPORTANT TO RECONFIGURE IN PLANET 3 */
   },
   title: {
      text: 'Criteria', 					
      style: {
			display: 'none' // center it
			}
   },
   xAxis: {
      categories: [
         ' '
      ]
   },
   yAxis: {
      min: 0,
      title: {
         enabled: false
      },
      labels: {
						style: {
							color: '#CCC'	
						},
						formatter: function() {
                                return this.value +' %';
                        }
					},	
					max: 100
   },
   credits: {
		enabled: false
	},
   legend: {
   	  enabled: false,
      layout: 'vertical',
      backgroundColor: '#FFFFFF',
      style: {
         left: '100px',
         top: '70px',
         bottom: 'auto'
      }
   },
   tooltip: {
      formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>'+
            this.x +': '+ this.y +' %';
      }
   },
   plotOptions: {
      column: {
         pointPadding: 0.9,
         borderWidth: 0,
         groupPadding: 0.02
      }
   },
        series: [{
      name: 'Política de compra e venda de peixe', /* CHANGE THIS VALUE TO THE 1ST CRITERIA */
      data: [49.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMERARKET IN THIS CRITERIA */

   }, {
      name: 'Retirar os produtos insustentáveis', /* CHANGE THIS VALUE TO THE 2ND CRITERIA */
      data: [83.6]

   }, {
      name: 'Apoiar os produtos sustentáveis',
      data: [48.9]

   }, {
      name: 'Traçabilidade dos produtos',
      data: [42.4]

   }, {
      name: 'Etiquetagem dos produtos',
      data: [22.4]

   }, {
      name: 'Venda de espécies da Lista Vermelha',
      data: [23.4]

   },  {
      name: 'Transparência e informação',
      data: [23.4]

   }
   ],
   colors: [
	rrBarcolor,
	rrBarcolor, 
	rrBarcolor, 
	rrBarcolor, 
	rrBarcolor, 
	rrBarcolor, 
	rrBarcolor 
	]
});

		});
		
		</script><!-- End graph configuration -->


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

Add the lead for this supermarket Edit

Important: If you want to add just the lead, just delete all inside the div, but not the div tags. Then remove the code class="rrExpandable"

<div class="rrTextsUnit"> <!-- FIRST PARAGRAPH IS LEAD 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. 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 #rrTextsUnit -->

Add the texts for the criteria 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)

Of course you should translate the tool tip text "Worst supermarket in this criteria" and "Best supermarket in this criteria"

<div class="rrTextsUnit"><!-- USE ONE OF THIS FOR EVERY GROUP OF HEADING + LEAD + FULL TEXT -->
	<h3>Criteria 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. 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 .rrtextunit -->


Found species Edit

Configure the found species for this supermarket

Create the images and legends Edit

The first step is to make sure you have:

  1. The images from the raking properly set up, accordingly to the red list
  2. The links to each specific page in the ranking (if you use the International red list template, it works by adding ?id=x to the url)
  3. All images are with the main common name as caption and they are sorted alphabetically

Remove the species you have not found for the supermarket Edit

For example removing this code

<!-- Atuns -->
<div class="specie">
    <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> 

would remove tuna from this supermarket page

Configure the send a message to your supermarket Edit

Full code with comments

<div id="rrSendMessage"><!-- SEND A MESSAGE TO YOUR SUPERMARKET FROM YOUR E-MAIL ACCOUNT -->

	<h3>Is this your supermarket?</h3>
	
	<p>As a costumer you have the right to ask your supermarket to improve their seafood purchasing policy. <strong>Send them an e-mail now!</strong></p>

	<h4>Send to:</h4>
	
	<p id="rrEmails" title="Copy this addresses to your e-mail">
		first.name@domain.com, second.name@domain.com
	</p>

	<div id="usual1" class="usual"> 
	  <ul> 
	    <li><a class="selected" href="#tab1">1st example</a></li><!-- Text in the tabs -->
	    <li><a href="#tab2">2nd example</a></li><!-- Text in the tabs -->
	  </ul>
	  
	  <div id="tab1">
           <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>
		</div>
		
	  <div id="tab2">
	  	<p>Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim.</p><p>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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien.</p> 
		</div>
		
	</div><!-- end #usual1  -->
 
<script type="text/javascript"><!-- This javascript activiates the tabls effect --> 
  $("#usual1 ul").idTabs(); 
</script>
	
	<p id="rrHelpNote">Copy the e-mail addresses and one of the example messages above to your e-mail and tell your supermarket that...</p>
</div><!-- end #rrSendMessage -->


Configure the Updates and Links Edit

Using this module will allow you to add links to blog posts about the supermarket or tweets (one or the other, but not both)

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/supermarket/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=Auchan" 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=Auchan",
        loading_text: "searching twitter..."
    });

})


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

Configure the criteria values Edit

You should also add the hover values for the supermarket the the appropriate supermarket javascript file supermarket1.js, supermarket2.js, supermarket3.js...

  1. Define the right percentage for each criteria of this supermarket: text("99%")
  2. Define the right color: rrGreenScore, rrOrangeScore or rrRedScore
  3. The code is sorted
    1. #rrNavigationCriteria li:nth-child(1) is the first criteria
    2. #rrNavigationCriteria li:nth-child(2) is the second criteria
$(document).ready(function(){
/* SCORING BY CRITERIA */

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

	};

	/* li:nth-child(1) Is the 1st criteria, li:nth-child(2) the second  */

	$("#rrNavigationCriteria li:nth-child(1), #rrTextInGraph div:nth-child(1)").hover(function(){
		
		$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */
		
	}, function(){
		rrClean();
	});

	$("#rrNavigationCriteria li:nth-child(2), #rrTextInGraph div:nth-child(2)").hover(function(){

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

	}, function(){
		rrClean();
	});

	$("#rrNavigationCriteria li:nth-child(3), #rrTextInGraph div:nth-child(3)").hover(function(){
		
		$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */

	}, function(){
		rrClean();
	});

	$("#rrNavigationCriteria li:nth-child(4), #rrTextInGraph div:nth-child(4)").hover(function(){

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

	}, function(){
		rrClean();
	});

	$("#rrNavigationCriteria li:nth-child(5), #rrTextInGraph div:nth-child(5)").hover(function(){

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

	}, function(){
		rrClean();
	});

	$("#rrNavigationCriteria li:nth-child(6), #rrTextInGraph div:nth-child(6)").hover(function(){

		$("#rrScoreCriteria").addClass("rrRedScore").text("19%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */
		
	}, function(){
		rrClean();
	});
	$("#rrNavigationCriteria li:nth-child(7), #rrTextInGraph div:nth-child(7)").hover(function(){

		$("#rrScoreCriteria").addClass("rrRedScore").text("9%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore  */
		
	}, function(){
		rrClean();
	});
	/* END SAYING WICH SPECIES ARE IN WHICH SUPERMARKETS */

});