OpendID




Annuler

Personnaliser une police de caractères, c'est relativement simple. La méthode est décrite sur internet (Google est ton ami) :

1. Choisir sa police sur Dafont, par exemple.
Attention : pour un affichage optimal, bien choisir une police qui prend en charge les chiffres, les caractères accentués et les caractères spéciaux.
2. La convertir dans les différents formats reconnus par les navigateurs. J'utilise font2web, rapide et efficace.
3. Héberger la police convertie (uniquement les fichiers, pas l'ensemble de l'archive obtenue) dans un répertoire créé sur le ftp.
4. Dans LocalFiles Editor, onglet CSS, ajouter le code suivant :

/* Police perso */
@font-face {
  font-family: fonte-perso;
  src: url('../../fonts/nom_fonte_perso.eot');
  src: url('../../fonts/nom_fonte_perso.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/nom_fonte_perso.woff') format('woff'),
       url('../../fonts/nom_fonte_perso.ttf') format('truetype'),
       url('../../fonts/nom_fonte_perso.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
5. Et, à chaque fois que nécessaire, ajouter le nom de la police dans la ligne font-family (à vérifier à l'aide de Firebug ou en ouvrant le fichier css, au choix) :

  font-family: fonte-perso,"Century Gothic","Lucida Grande",Verdana,DejaVu Sans,sans-serif;



Afficher le logo de Piwigo en footer, c'est tout aussi simple et toujours dans LocalFiles Editor :

1. Récupérer le logo dans le footer du panneau d'administration.
Pourquoi le ré-héberger plutôt que recopier simplement son url ? Simplement pour éviter que le lien ne soit brisé en cas de changement lors d'une mise à jour de Piwigo.
2. Le redimensionner dans un logiciel de retouche.
3. L'héberger sur le ftp, dans un répertoire spécifique (par exemple, images).
4. Dans LocalFiles Editor, onglet CSS, ajouter :

#copyright .Piwigo {
  background: url(../../images/piwigo.png) no-repeat;
  display: inline-block;
  width: 43px;
  height: 10px;
}
 
#copyright .Piwigo span {
  display:none;
}



Ajouter des boutons de partage "clean" et de contact :
1. Installer le plugin Perso Footer
2. Y copier le code suivant (à adapter suivant les besoins et envies)

<style>
	.sticky-container {
		position: fixed;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		padding: 0px;
		margin: 0px;
		left: -130px;
		width: 175px;
		z-index: 100000 !important;
	}
	.sticky li {
		list-style-type: none;
		background-color: #bbb;
		color: #fff;
		height: 45px;
		padding: 0px;
		margin: 0px 0px 1px 0px;
		-webkit-transition:all 0.25s ease-in-out;
		-moz-transition:all 0.25s ease-in-out;
		-o-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;
		cursor: pointer;
		opacity: 0.5;
	}
	.sticky li:hover {
		margin-left: -90px;
		-webkit-transform: translateX(90px);
		-moz-transform: translateX(90px);
		-o-transform: translateX(90px);
		-ms-transform: translateX(90px);
		transform:translateX(90px);
		opacity: 1;
	}

	.sticky li a, .sticky li a:hover, .sticky li a:active {
		text-decoration:none;
		color:#fff;
	}
	.sticky li span {
		font-size: 24px;
		float: right;
		margin: 1px 1px;
		margin-right: 2px;
		width: 43px;
		height: 43px;
		text-align:center;
		vertical-align:central;
		line-height: 45px;
	}
	.sticky li p {
		float: right;
		padding: 0px;
		margin: 0px;
		text-transform: uppercase;
		text-align: center;
		line-height: 45px;
	}
</style>

<div id="socialshare" class="sticky-container">
	<ul class="sticky">
		<li style="background-color:#3E5B98; border-radius: 0 10px 0 0;">
			<a href="https://www.facebook.com/sharer/sharer.php?u=$url$" target="_blank" title="Partagez sur facebook">
				<span><i class="fa fa-facebook" aria-hidden="true"></i></span>
				<p>Facebook</p>
			</a>
		</li>
		<li style="background-color:#4DA7DE;">
			<a href="https://twitter.com/home?status=$url$" target="_blank" title="Tweet">
				<span><i class="fa fa-twitter" aria-hidden="true"></i></span>
				<p>Twitter</p>
			</a>
		</li>
			<a href="https://plus.google.com/share?url=$url$" target="_blank" title="Google +1">
				<span><i class="fa fa-google-plus" aria-hidden="true"></i></span>
				<p>Google +</p>
			</a>
        </li>
		<li style="background-color:#C92619;">
			<a href="http://pinterest.com/pinthis?url=$url$" target="_blank" title="Pin it">
				<span><i class="fa fa-pinterest-p" aria-hidden="true"></i></span>
				<p>Pinterest</p>
			</a>
        </li>
		<li style="background-color:#3371b7;">
			<a href="https://www.linkedin.com/shareArticle?mini=true&url=$url$" target="_blank" title="Partagez sur LinkedIn">
				<span><i class="fa fa-linkedin" aria-hidden="true"></i></span>
				<p>LinkedIn</p>
			</a>
        </li>
		<li style="background-color:#000; border-radius: 0 0 10px 0;">
			<a href="/index/contact/" title="Contactez-moi">
				<span><i class="fa fa-paper-plane" aria-hidden="true"></i></i></span>
				<p>Contact</p>
			</a>
        </li>
	</ul>
</div>

<script type="text/javascript">
(function(){window.addEventListener("DOMContentLoaded",function(){
    var url=document.location;
    var links=document.getElementById("socialshare")
                      .getElementsByTagName("a");
    for (var i=0;i!=links.length;i++){
        links[i].setAttribute("href",
            links[i].href.replace("$url$",url));}})})();
</script>