Changer la bannière et logo

**SimonG** · 04/05/2014, 15h20

Re : Changer la bannière et logo

Bonjour et bienvenue,

sauf erreur de ma part, cette bannière 'est directement affichée par le template.
Le template protostar propose lui une bannière qu'il est facilement possible de régler grâce à l'affichage d'un module.

**Rajoz** · 04/05/2014, 15h44

Re : Changer la bannière et logo

Bonjour Argonos,

Pour pouvoir choisir une image de bannière pour Beez3, il faut choisir la valeur "Custom" pour le paramètre "Style du template" et l'image dans le paramètre "Image d'en-tête".

Pour info, l'image montrée dans ton post est le fichier templates/beez3/images/personal/personal2.png. Modifier cette image est une autre possibilité de changer la bannière de Beez3.

Amicalement,
Rajoz

**Argonos** · 04/05/2014, 16h12

Re : Changer la bannière et logo

Envoyé par SimonG Voir le message

Bonjour et bienvenue,

sauf erreur de ma part, cette bannière 'est directement affichée par le template.
Le template protostar propose lui une bannière qu'il est facilement possible de régler grâce à l'affichage d'un module.

J'ai essayé le Template protostar, mais je trouve pas le module pour changer la bannière. Dans module, je n'ai que les modules par défaut.

Envoyé par Rajoz Voir le message

Bonjour Argonos,

Pour pouvoir choisir une image de bannière pour Beez3, il faut choisir la valeur "Custom" pour le paramètre "Style du template" et l'image dans le paramètre "Image d'en-tête".

Pour info, l'image montrée dans ton post est le fichier templates/beez3/images/personal/personal2.png. Modifier cette image est une autre possibilité de changer la bannière de Beez3.

Amicalement,
Rajoz

Quand je met Custom, il y a tout qui change dans le thème Beez.
L'image d'en tête n'affiche pas le logo en bannière.
Et si je met l'image dans le coin "logo", l'image s'affiche correctement mais ne prend pas toute la largeur de la page, et ce même en mettant 100% dans "largeur de la colonne principale". (L'image prend la moitié de la page à peu près)

Et aussi, quand je met custom, je perd tout de ce qui fait le Template. Par exemple, le menu devient de simple mot, sans couleur autour, ni barre de menu bien visible.
De même que le grand cadre Blanc où il y avait le menu, les article affiché, etc... a disparu pour tout mettre sur le fond gris.

Y-a-t-il un autre moyen?

J'aimerais savoir le faire avec les deux templates du coup, car j'aimerai voir avec la bannière ce que cela donne pour me décider sur le Template à prendre. Je n'aimais pas Protostar, mais après avoir configurer la page et enlever ce qui ne me convenais pas, je le trouve pas trop mal maintenant.

**Rajoz** · 04/05/2014, 18h12

Re : Changer la bannière et logo

Envoyé par Argonos Voir le message

Y-a-t-il un autre moyen?

Voilà plus de détails pour Beez3 puisque cela correspond à la demande initiale.

Un peu d'information sur Beez3

Beez3 comporte d'origine cinq possibilités de style qui sont : Nature, Personnel, Rouge, Turquoise et Custom.
Ces styles sont gérés par des fichiers CSS qui se trouvent dans le répertoire templates/beez3/css
Les fichiers ont respectivement pour nom : nature.css, personal.css, red.css et turq.css (et leur version RTL pour les langues s'écrivant de droite à gauche).
Il n'y a pas de fichier CSS pour le style Custom parce ce que c'est prévu pour personnaliser le template (le fichier devrait se nommer image.css).
Le style Personnel est le seul a avoir une image de bannière. Elle se trouve dans templates/beez3/images/personal/personal2.png. Elle fait 1060x288 pixels et s'affiche en image de fond à partir de la droite.
Pour les autres styles, il s'agit d'une couleur de fond : transparente, rouge, turquoise.

Les moyens

Il y a quatre possibilités de la plus simple à la plus compliquée (à mon avis).

1) Changer l'image du style Personnel

Créer une image png de 1060x288px, la renommer personal2.png et la copier dans templates/beez3/images/personal pour remplacer celle qui y était d'origine.
Il peut y avoir à vider le cache du navigateur pour que la nouvelle image soit vue.

2) Changer l'image en utilisant le paramètre "Image d'en-tête"

Pour que l'image d'en-tête soit prise en compte, Beez3 impose de choisir la valeur "Custom" pour le paramètre "Style du template".
Pour créer le CSS correspondant au style Custom, le plus simple c'est de prendre le fichier correspondant au style que l'on préfère et d'en faire une copie. Par exemple si on veut le style Personnel, il faut copier les fichiers dans le même répertoire templates/beez3/css :

copier personal.css en image.css
copier personal_rtl.css en image_rtl.css

Le résultat après cette copie c'est que l'on peut utiliser le paramètre "Image d'en-tête" en gardant le style Personnel. A noter que l'image d'origine du style Personnel fait 1060x288 pixels et s'affiche à partir de la droite.

3) Changer l'image en modifiant le CSS du style Personnel

Un petit peu plus compliqué puisqu'il faut modifier du code.
L'image est définie dans le style Personnel dans le fichier templates/beez3/css/personal.css aux environs de la ligne 31 :

Code:

.logoheader {
    background: url(../images/personal/personal2.png) no-repeat right bottom #0C1A3E;
    color: #FFFFFF;
    min-height: 250px;
}

On peut changer ce code pour utiliser une autre image.

Pour info, la couleur #0C1A3E explique l'affichage foncé dans un premier temps avant l'affichage de la bannière.

4) Modifier le code du template Beez3

C'est le fichier templates/beez3/index.php qui impose le style Custom pour permettre d'utiliser le paramètre "Image d'en-tête". On peut le modifier, par exemple, pour que le style Personnel accepte l'image d'en-tête. Dans la ligne 87 remplacer image par personal :

Code:

avant :
<?php if ($color == 'image'):?>

après modification :
<?php if ($color == '[COLOR=#ff0000]personal[/COLOR]'):?>

J'espère avoir été un peu plus clair malgré ce post un peu long.

Amicalement,
Rajoz

**Rajoz** · 04/05/2014, 18h33

Re : Changer la bannière et logo

Bonsoir Argonos,

Je continue maintenant avec Protostar...

Pour afficher un bandeau, on peut créer un nouveau module de type Contenu personnalisé :

Aller sur Extensions > Gestion des modules
Cliquer sur Nouveau dans la barre d'outils
Sélectionner "Contenu personnalisé"
Paramètres :
- Titre = Mon bandeau (par exemple)
- Contenu personnalisé = y insérer l'image du bandeau
- Montrer le titre = Masquer
- Position = Protostar / Bannière [banner]
- Statut = Publié
- Assignation des menus = sur les pages où l'on veut que le bandeau s'affiche, peut se réduire par exemple à la page d'accueil

Le grand atout de Protostar c'est qu'il est "responsive", c'est-à-dire qu'il s'adapte à la dimension de l'écran. L'image du bandeau s'adaptera sur un écran plus petit comme une tablette ou un smartphone.

Amicalement,
Rajoz

**Argonos** · 05/05/2014, 13h46

Re : Changer la bannière et logo

Merci pour cette aide.

J'ai réussi pour les 2 templates à modifier la bannière. La première méthode pour Beez a fonctionné et semblait vraiment la plus simple à faire.

J'ai donc décidé de garder le Template Protostar.

Maintenant, j'aimerai savoir comment modifier le logo affiché dans l'onglet à coté du nom du site? Car j'ai le logo de Joomla affiché. Et si je mets une image dans "logo" du Template, ça m'ajoute une image dans le site directement.

**Rajoz** · 05/05/2014, 14h37

Re : Changer la bannière et logo

Bonjour Argonos,

L'affichage du logo dans le template Protostar est géré par trois paramètres Logo, Titre et Description qui sont dans Extensions > Gestion des templates > Protostar - Défaut > Paramètres avancés.

1) Affichage du nom du site
Le nom du site est affiché quand les deux paramètres Logo et Titre sont vides.

2) Affichage d'une image
Pour afficher une image, il faut la sélectionner dans le paramètre Logo.

3) Affichage d'un texte
Pour afficher un texte autre que le nom du site. Il faut que Logo soit vide (pas d'image sélectionnée) et que le texte souhaité soit saisi dans le paramètre Titre.

4) Affichage additionnel d'un sous-titre
Dans les trois possibilités d'affichage de logo (nom du site, image ou texte), on peut saisir dans le paramètre Description un texte qui s'affichera en sous-titre.

Amicalement,
Rajoz

**Argonos** · 05/05/2014, 15h31

Re : Changer la bannière et logo

En fait, ce que tu me proposes met l'image du logo dans le site. Dans l'en-tête même du site.

Donc, si je mets une image, elle apparait en haut du site, si je touche à titre, c'est pareil.

En faite, le logo dont je parle est dans le menu de IE/Firefox directement (dans l'URL du site ou sur les onglets du site). ici :

Et même en affichant l'image dans l'entête du site, ce logo là ne change pas.

**Rajoz** · 05/05/2014, 16h26

Bonjour Argonos,

Petite confusion sur le terme "logo", d'après ton image il ne s'agit pas du logo du site mais de l'icône qui s'affiche dans le navigateur.

On appelle cette icône le favicon (raccourci de favorite et icon). C'est une icône au format .ico qui est de taille 16x16 pixels, avec 16 couleurs et proche du bitmap propriétaire de Windows.

Avec les navigateurs modernes on pourrait utiliser d'autres formats d'icônes. Mais avec Internet Explorer il vaut mieux en rester au .ico

Pour modifier cette icône :

1) Créer un nouveau fichier favicon.ico
On peut convertir une image comme celle logo du site en favicon.ico en utilisant :

son logiciel graphique s'il sait enregistrer au format .ico
un service en ligne comme :
- http://www.favicon.cc/,
- http://www.favicon.co.uk/,
- http://www.supportduweb.com/generate...o-gratuit.html
- il en existe beaucoup...

2) Copier le fichier favicon.ico sur Protostar
Copier le nouveau fichier favicon.ico pour remplacer le fichier templates/protostar/favicon.ico existant.

3) Vider le cache de Joomla! et de son navigateur
Même en ayant vidé le cache de son navigateur il se peut qu'il mette un "certain temps" pour prendre en compte le changement de favicon.ico
Un favori (bookmark) du navigateur pourra nécessiter d'être supprimé et récréé pour faire apparaître le nouveau favicon

Amicalement,
Rajoz

**Argonos** · 05/05/2014, 20h18

Re : Changer la bannière et logo

En effet, je ne connaissais pas ce terme, désolé.

Merci, cela fonctionne à merveille

Sinon, il me reste juste une dernière question, à propos d'une mise en page que je n'arrive pas vraiment à faire.

En fait, j'aimerais pouvoir insérer du texte à coté d'une image. Existe-t-il un module ou un moyen de le faire simplement?

Car j'ai essayé en insérant une image directement dans l'article, et d'écrire à coté, cela ne fonctionne pas beaucoup. En fait, soit, une fois l'image inséré, le texte s'écrit à partir du bas de l'image à gauche, soit, en utilisant le bouton pour aligner le texte à droite, le texte peut apparaitre à coté de l'image, mais la modification s'en trouve laborieuse. Le texte se déplace seul en dessous de l'image quand je modifie le texte et pour en ajouter à coté du texte déjà en place, c'est pas évident. A moins que je m'y prenne mal?

**Rajoz** · 06/05/2014, 08h04

Bonjour Argonos,

En insérant l'image avec le bouton Image qui se trouve en-dessous de la zone d'édition (il y a l'équivalent dans tous les éditeurs, par exemple JCE) on peut définir le paramètre Alignement. Ce paramètre permet de sélectionner la position de l'image en la faisant "flotter" à gauche ou à droite :

En choisissant Droite, l'image se place à droite et le texte à gauche.
De même en choisissant Gauche, l'image se place à gauche et le texte à droite.

Note : Selon la configuration de l'éditeur (définition des CSS de l'éditeur), le résultat pourra se voir sur le site mais pas dans l'éditeur.

Dans la documentation de JCE, il y a une illustration montrant l'insertion d'une image avec un alignement à gauche de l'image et sa prévisualisation : https://www.joomlacontenteditor.net/...5-insertupdate

Au fait, il ne faut pas oublier de remplir le champ Description de l'image, il est nécessaire pour le SEO et pour les outils des malvoyants.

Amicalement,
Rajoz

**Argonos** · 18/05/2014, 18h00

Re : Changer la bannière et logo

Bonjour,

J'ai du faire une pause quelques temps, et la je me remet à faire le site.

Donc pour l'image à coté d'un texte, c'est nickel, ça fonctionne bien.

Maintenant, je ne trouve pas de bonne extension pour avoir plusieurs images qui défilent dans un article.
Du coup, je me demande, est-ce possible d'avoir plusieurs images qui défilent, 2 fois et 2 défilement différentes?
Je m'explique, imaginons dans l'article, j'ai les image A, B et C qui défile, bah je veux savoir si en dessous de ces images, est-ce que je pourrais avoir des images D, E et F qui défileront? (Ca utilisera la même extension? Si non, comment rendre cela possible?)

J'ai essayé "Simple Picture SlideShow" mais je ne sais pas le faire fonctionner. Je l'ai installé, et c'est tout. Dans Gestion des plugins, je le vois, je peux configurer le temps que l'image reste, l'animation et tout, mais je sais pas ou mettre les images, ni ou choisir de les afficher :/

Avez vous des idées? Une meilleur extension? Ou une plus simple à utiliser?

**Rajoz** · 18/05/2014, 19h04

Re : Changer la bannière et logo

Bonjour Argonos,

Dans le JED (http://extensions.joomla.org/extensi...uery-slideshow) il y a 229 extensions pour les slideshows (défilement d'image). Cela fait un choix considérable et, chacun ayant ses propres critères et besoins, il est difficile d'en conseiller une plutôt qu'une autre.
Perso, j'ai utilisé plusieurs de ces extensions, la dernière était Slideshow CK http://extensions.joomla.org/extensi...lideshow/20362. SlideShow CK est gratuit et on peut acheter pour un tarif très raisonnable (7 €) une documentation en français qui en facilite l'utilisation.

Comme les extensions de slideshow sont le plus souvent des modules, il va falloir utiliser dans l'article le plugin "Contenu - Chargement de module" qui fait parti de Joomla! et dont la syntaxe a deux possibilités :

{loadposition xxx} où xxx est la position du module à insérer dans l'article
{loadmodule yyy} où yyy est le type du module à insérer dans l'article

Il existe aussi une extension qui permet d'intégrer les modules encore plus facilement : Modules Anywhere (http://extensions.joomla.org/extensi...a-include/6402).

Concernant l'affichage de plusieurs slideshows, il est tout à fait possible d'intégrer dans le même article plusieurs modules du slideshow : le premier avec les images A, B et C, le suivant avec D, E, F, G et H, et ainsi de suite.

Amicalement,
Rajoz

**Argonos** · 18/05/2014, 20h01

Re : Changer la bannière et logo

J'ai essayé Slideshow CK, j'ai pas mal galéré à l'intégrer quand même. Mais j'ai réussi, et le résultat ne me plait pas trop en fait.
J'ai une grosse image qui fait un mode bannière presque et en taille très grande (normal en même temps la taille de l'image que j'importe est grande).

Du coup, je préfèrerais avoir des petites ou moyennes images, qui quand je clique sur une, agrandit l'image et me permet de faire défiler ce type/groupe d'images prédéfinis, et de même si je veux en vois d'autres, bah je clique sur la seconde image (en miniature quoi), qui me fera défiler d'autres images.

C'est possible ça?

EDIT : J'ai pu modifier la taille de l'image, mais si je la rend petite, alors il m'est impossible de l'agrandir juste en cliquant dessus :/
Je peux le faire en modifiant la taille des miniatures qui s'affichent lorsqu'on laisse le curseur sur la pagination mais le rendu n'est pas top vue que je défini l'image qui s'affiche avec des px, et je pense pas que ce sera évident de devoir rester sur la pagination pour agrandir l'image...

En plus, ça me défile les images en étant petit du coup. J'aime bien que ça en fasse un aperçu à la limite, mais je voudrais bien cliquer dessus et agrandir le Slideshow pour faire défiler les images en grandes dans ce cas.

Changer la bannière et logo

Changer la bannière et logo

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association