Edit the titles and comment on top of the page[]
<h1>Criteria 1</h1> <h2>Subtitle</h2> <p>Use the mouse on the graph bellow for more details</p>
Put the right values to the graph[]
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
<!-- This script configures the supermarket graph -->
<script type="text/javascript">
$(document).ready(function() {
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: 'Lidl', /* CHANGE THIS NAME TO THE 1st SUPERMARKET */
data: [49.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */
}, {
name: 'Jumbo e Pão de Acúcar', /* CHANGE THIS NAME TO THE 2nd SUPERMARKET */
data: [83.6] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */
}, {
name: 'Continente e Modelo', /* CHANGE THIS NAME TO THE 3rd SUPERMARKET */
data: [48.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */
}, {
name: 'Pingo Doce e Feira Nova',
data: [42.4]
}, {
name: 'Intermarché e Ecomarché',
data: [22.4]
}, {
name: 'Minipreço',
data: [23.4]
}
],
colors: [
'#8765d6', /* IF YOU WANT YOU CAN CHANGE THE COLOURS HERE */
'#e300d0',
'#00b266',
'#fe5c00',
'#00bdf5',
'#fdff00',
'#92A8CD',
'#A47D7C',
'#B5CA92'
]
});
});
</script><!-- End of the script that configures the graph -->
Define location of the supermarket logos[]
The images are defined in the following html. This should be properly configured, 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>
[]
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 texts for each supermarket[]
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[]
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[]
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?[]
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 supermarket values[]
You should also add the hover values for the criteria in the appropriate criteria javascript file criteria1.js, criteria2.js, criteria3.js...
- Define the right percentage for each supermarket
- Define the right color: rrGreenScore, rrOrangeScore or rrRedScore
- The code is sorted
- #rrLogoSuper1 is the first supermarket
- #rrLogoSuper2 is the second supermarket
$(document).ready(function(){
/* WHICH SPECIES MODULE NAVIGATION */
function rrClean(){
$("#rrScoreCriteria").removeClass("rrGreenScore").removeClass("rrOrangeScore").removeClass("rrRedScore");
$("#rrScoreCriteria").empty();
};
$("#rrLogoSuper1").hover(function(){
$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
$("#rrLogoSuper2").hover(function(){
$("#rrScoreCriteria").addClass("rrOrangeScore").text("69%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
$("#rrLogoSuper3").hover(function(){
$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
$("#rrLogoSuper4").hover(function(){
$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
$("#rrLogoSuper5").hover(function(){
$("#rrScoreCriteria").addClass("rrRedScore").text("29%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
$("#rrLogoSuper6").hover(function(){
$("#rrScoreCriteria").addClass("rrRedScore").text("19%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */
}, function(){
rrClean();
});
/* END SAYING WICH SPECIES ARE IN WHICH SUPERMARKETS */
});