Remplacer le logo du template Joomla JA Purity

Pour changer le logo par défaut que l’on retrouve sur le template Joomla JA Purity, vous allez devoir remplacer le fichier templates/ja_purity/images/ logo.png par votre propre logo. Ce logo a comme particularité d’avoir un fond transparent. Ce qui veut dire que la couleur foncée que l’on retrouve par exemple entre le texte Joomla ! et le texte …because open source matters, ne provient pas du logo mais de la couleur par défaut du header de ce template

Dans cas où votre logo ne possède pas le type d’extension .png, soit vous avez les outils pour l’enregistrez en format .png soit vous allez devoir modifier la partie du code dans la feuille de style templates/ja_purity/css/template.css à la ligne 956. Attention, il n'y a que le form .png qui permet cette transparence.

Ouvrez donc ce fichier CSS et recherchez le texte h1.logo a. A l’intérieur de cette balise, vous retrouvez la propriété background avec le chemin et le nom du fichier défini. Vous pouvez donc directement ici modifier le nom ou l’extension du fichier par rapport à votre logo.

1
2
3
4
5
6
7
8

h1.logo a {
  width: 208px;
  display: block;
  background: url(../images/logo.png) no-repeat;
  height: 80px;
  position: relative;
  z-index: 100;
}

Avant de sauvegarder votre fichier, modifiez également la largeur ainsi que la hauteur du logo qui correspondent aux propriétés width et height et qui doivent être identique à votre logo. Si votre logo a une hauteur plus grande que 80px, alors vous allez devoir également modifier la propriété height de la balise #ja-headerwrap qui se trouve dans le même fichier. C’est dans cette même balise que vous allez pouvoir changer le code couleur du header de votre template avec le paramètre color.

1
2
3
4
5
6

#ja-headerwrap {
	background: #333333;
	color: #CCCCCC;
	line-height: normal;
	height: 80px;
}

Enfin, si vous voulez changer les images qui s’affichent aléatoirement en haut à droite du template JA Purity, vous allez devoir remplacer les fichiers existants dans le répertoire templates/ja_purity/images/header. Bien entendu, vous pouvez également en ajouter plus que trois. Pour afficher le résultat, n'oubliez pas de faire un Ctrl + F5.

Ajouter un commentaire