Personnaliser l'interface

Il est tout à fait possible de personnaliser plus avant l'interface de la page d'accueil de votre PirateBox.

La capture suivante a été réalisée avec l'extension FireShot [fr] pour Firefox. Il faut modifier le fichier /opt/piratebox/www/content/index.html pour obtenir l'affichage suivant : j'ai placé en commentaires le chat de la PirateBox et ajouté 3 encarts qui pointent vers les 3 sous-rubriques personnalisées du répertoire Shared. Quelques connaissances de base en langage HTML sont nécessaires pour personnaliser ce fichier (vous trouverez plein de tutos sur ce thème sur internet).

Page d'accueil personnalisée de la PirateBoxInformations[1]
1
<!DOCTYPE html>
2
<html>
3
<head>
4
	<link rel="stylesheet" href="/content/css/page_style.css">
5
	<title>BiotechnoBox - Ressources p&eacute;dagogiques</title>
6
	<script src="/content/js/jquery.min.js"></script>
7
	<script src="/content/js/scripts.js"></script>
8
        <link rel="stylesheet" href="/css/jquery-ui.min.css">
9
        <script src="/content/js/jquery-ui.min.js"></script>
10
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
11
12
	<link rel="prefetch" type="application/l10n" href="locales/locales.ini" />
13
    <script type="text/javascript" src="/content/js/l10n.js"></script>
14
15
</head>
16
<body id="main-index">
17
18
<header id="header">
19
	<div class="container">
20
	   <a href="/">
21
		<div id="logo" scrolling="no"  >&nbsp;</div>
22
	   </a>
23
		<div id="menu-icon"></div>
24
		<nav id="top-nav">
25
			<ul>
26
				<li><a href="/" class="current" data-l10n-id="navbarHome">Home</a></li>
27
				<!-- <li><a href="/board/" data-l10n-id="navbarForum">Forum</a></li> -->
28
				<li><a href="/Shared/" data-l10n-id="navbarFiles">Files</a></li>
29
				<li><a href="#about" data-l10n-id="navbarAbout">About</a></li>
30
			</ul>
31
		</nav>
32
	</div>
33
</header>
34
35
<section id="content">
36
	<div class="container">
37
		<div id="welcome">
38
			<div  id="greeting" class="card">
39
				<h2 data-l10n-id="welcomeWelcome">Welcome</h2>
40
				<p data-l10n-id="welcomeDescription">Now, first of all, there is nothing illegal or scary going on here. This is a social place where you can chat and share files with people around you, <strong data-l10n-id="anonymously">anonymously</strong>! This is an off-line network, specially designed and developed for file-sharing and chat services. Staying off the grid is a precaution to maintain your full anonymity. Please have fun, chat with people, and feel free to share any files you may like.</p>
41
				<input id="thanks" class="button" type="submit" value="Thanks" data-l10n-id="welcomeThanksButton">
42
				</div>
43
44
45
46
		
47
		</div>
48
<!-- ajout des 3 divs suivantes par Patrice HARDOUIN -->
49
50
                        <div  id="greeting" class="card">
51
                                <h2>Vid&eacute;os</h2>
52
                                <img height=100px src="/content/img/cinema-penguin-300px.png"/>
53
				<p>Visionnez les derni&egrave;res vid&eacute;os propos&eacute;es par votre professeur</p>
54
                                <a href="../Shared/VIDEOS"><strong>>&nbsp;VID&Eacute;OS&nbsp;<</strong></a>
55
                                </div>
56
                        <div  id="greeting" class="card">
57
                                <h2>Livres</h2>
58
                                <img height=100px src="/content/img/bookworm-penguin-300px.png"/>
59
                                <p>Lisez les derniers livres mis &agrave; disposition par votre professeur</p>
60
                                <a href="../Shared/LIVRES"><strong>>&nbsp;LIVRES&nbsp;<</strong></a>
61
                                </div>
62
                        <div  id="greeting" class="card">
63
                                <h2>Cours</h2>
64
                                <img height=100px src="/content/img/surgeon-penguin-300px.png"/>
65
                                <p>Consultez les derniers cours &eacute;labor&eacute;s par votre professeur</p>
66
                                <a href="../Shared/COURS"><strong>>&nbsp;COURS&nbsp;<</strong></a>
67
                                </div>
68
69
70
		 <div id="sidebar">
71
			<div id="upload" class="card">
72
				<h2 data-l10n-id="sidebarUpload">Upload</h2>
73
				<iframe width="100%" height="80" src='http://piratebox.lan:8080' data-l10n-id="sidebarIframeNotSupported" scrolling="no">
74
					Your browser does not support iframes.. If you want to upload something, follow this <a href='http://piratebox.lan:8080' data-l10n-id="link">Link</a>.
75
				</iframe>
76
				<h3><a href="/Shared" data-l10n-id="sidebarBrowseFiles">Browse Files -></a></h3>
77
			<div id="station"></div>
78
			</div>
79
			<div id="diskusagecard" class="card">
80
				<h2 data-l10n-id="diskUsage" >Disk Usage</h2>
81
				<div id="diskusage"></div>
82
				<div id="refresh-diskusage">
83
					<form method="POST" name="diskusage" id="du_form" >
84
						<input class="button" type="submit" name="refresh" value="Refresh" data-l10n-id="refreshButton" id="du_form_button" title="Disk usage can only be refreshed every 5 minutes">
85
					</form>
86
				</div>
87
			</div>
88
89
		</div>
90
91
<!-- mise en commentaires par Patrice HARDOUIN --> 
92
93
		<!-- <div id="main">
94
			 <div id="chat" class="card">
95
				<h2 data-l10n-id="mainChatChat">Chat</h2>
96
				<div id="shoutbox" class="shoutbox_content"></div>
97
				<form method="POST" name="psowrte" id="sb_form" onsubmit='getTime();'>
98
					<div id="shoutbox-input">
99
						<input class="nickname" type="text" 	name="name" 	value="Anonymous" placeholder="Nickname" data-l10n-id="mainChatName" >
100
						<input class="message" 	type="text" 	name="data" 	placeholder="Message..." data-l10n-id="mainChatMessage" >
101
						<input class="button" 	type="submit" 	name="submit" 	value="Send"  id="send-button" data-l10n-id="mainChatSend" >
102
					</div>
103
					<div id="shoutbox-options">
104
						<h3 data-l10n-id="mainChatTextColor">Text Color:</h3>
105
						<label for="def" 	class="bg-black"  data-l10n-id="mainShoutboxDefault">	<input name="color" type="radio" value="def" 	id="def"  checked>Default</label>
106
						<label for="blue" 	class="bg-blue"   data-l10n-id="mainShoutboxBlue">	<input name="color" type="radio" value="blue" 	id="blue">Blue</label>
107
						<label for="green" 	class="bg-green"  data-l10n-id="mainShoutboxGreen">	<input name="color" type="radio" value="green" 	id="green">Green</label>
108
						<label for="orange" class="bg-orange" data-l10n-id="mainShoutboxOrange">	<input name="color" type="radio" value="orange" id="orange">Orange</label>
109
						<label for="red" 	class="bg-red"    data-l10n-id="mainShoutboxRed">		<input name="color" type="radio" value="red" 	id="red">Red</label>
110
					</div>
111
					<input type="hidden" name="timestamp" id="timestamp">
112
					<script language='JavaScript'>
113
						function getTime(){
114
						var date = new Date();
115
						var timestamp = Math.round(date.getTime() / 1000);
116
						document.getElementById('timestamp').value = timestamp;
117
						}
118
					</script>
119
				</form>
120
			</div>
121
		</div>
122
	</div> -->
123
</section>
124
125
<footer id="about">
126
	<div class="container">
127
		<div id="details">
128
			<p class="to-top"><a href="#header" data-l10n-id="footerBackToTop">Back to top</a></p>
129
			<h2 data-l10n-id="footerAbout">About PirateBox</h2>
130
			<p data-l10n-id="footerInspired">Inspired by pirate radio and the free culture movement, PirateBox is a self-contained mobile collaboration and file sharing device. PirateBox utilizes Free, Libre and Open Source software (FLOSS) to create mobile wireless file sharing networks where users can anonymously share images, video, audio, documents, and other digital content.</p>
131
			<p data-l10n-id="footerFilesTopSafety">PirateBox is designed to be safe and secure. No logins are required and no user data is logged. The system is purposely not connected to the Internet in order to prevent tracking and preserve user privacy.</p>
132
			<small data-l10n-id="footerLicenceMain">PirateBox is licensed under GPLv3.</small>
133
		</div>
134
	</div>
135
</footer>
136
137
</body>
138
</html>
139
MéthodePersonnalisation des messages
Les messages sont traduits dans le fichier /opt/piratebox/www/content/locales/data.fr.properties et il suffit de les éditer pour les adapter.
ExemplePersonnaliser les images et logos
Les logos sont présents dans le répertoire /opt/piratebox/www/content/img/. Les tailles ont été récupérées et des images personnalisées ont été réalisées dans Inkscape [fr] puis nommées à l'identique pour éviter d'avoir à reprendre tous les scripts avec de nouveaux noms de fichiers.
Pour le fichier favicon.ico il s'agit d'une image au format gif de 6 pixels sur 6 et renommée avec l'extension .ico.
ComplémentGénération d'un QRcode pour http://piratebox.lan
Si vous voulez un QRCode pointant vers l'adresse http://piratebox.lan vous pouvez récupérer celui-ci ou en créer un nouveau identique avec la commande suivante (sous GNU/Linux) :
qrencode http://piratebox.lan/ -s 10 -o qrcode_piratebox.png. C'est très pratique pour l'imprimer et l'afficher dans la classe (pour les apprenants qui n'arrivent pas à se connecter en saisissant l'adresse).