Joomla! 1.6.

3
Grer ses pages sous Joomla - Contenu - Menus - Catgories - Articles joomla Comment grer ses menus, modifier, ajouter des articles sous joomla! 1.6.3 Nous allons donc maintenant passer au contenu de notre site sous joomla. Pour cela, nous allons commencer par faire un plan de notre futur site. Je dcide de prsenter des templates sous joomla, voici mes menus : - Accueil - Prsentation joomla - Templates - Templates joomla - votre template sous joomla La version de joomla! 1.6.3, ne comporte plus de sections. Vous allez maintenant pouvoir faire des catgories et autant de sous-catgories que vous le souhaitez. Afin qu'un article (ou texte) soit visible sur votre site, vous devez d'abord prparer le module auquel, il va correspondre, son menu , sa catgorie et ventuellement sa sous-catgorie. Nous allons donc commencer par mettre en place les modules. Commenons par crer notre premier menu qui va correspondre notre page d'accueil : - Accueil - Prsentation joomla Aller dans extension > gestion des modules Pour l'accueil, nous allons utiliser un module existant: main menu qui va reprsenter par dfaut la page d'accueil. Cliquez sur Main Menu et changer le titre en Accueil. Sur position, indiquez o vous souhaitez que votre module soit positionn, je choisis position-7. Mon module de menu sera ainsi positionn sur la gauche. Puis enregistrez. Allez maintenant dans menu, gestion des menus. Cliquez sur Main Menu (vous allez arriver dans liens de menu) et modifier le titre du menu existant en prsentation joomla. Puis enregistrez. Cliquez dans gestion des catgories, puis sur nouveau et en titre: prsentation joomla. Enregistrez. Cliquez dans gestion des articles, puis sur nouveau et en titre: Joomla Mettez oui pour en vedette (ainsi ce texte apparaitra sur votre page d'accueil) Vous pouvez donc voir dj sur votre site que votre menu est bien prsent et l'article qui lui est associ.

Joomla! 1.6.3

Nous enlverons par la suite les donnes qui ne nous interessent pas. Passons maintenant notre deuxime menu, pour cel, nous allons crer un nouveau module que nous positionnerons galement sur la gauche. Ce menu nous amnera donc sur des pages internes. Allez dans extensions > gestion des modules Cliquez sur nouveau L vous devez slectionner le type de module que vous souhaitez, je choisis menu. Indiquez ensuite votre titre: Templates La position: position-7 de nouveau, afin qu'il apparaisse sur la gauche. Et enregistrez. Allez dans catgorie, nouveau Titre : joomla Enregistrez Allez dans ajoutez un article Donnez un titre: votre template sous joomla indiquez la catgorie rattache donc: joomla Ajoutez un peu de texte dans la zone de texte Enregistrez Allez dans gestion des menus, ajoutez un menu Indiquez Templates . Enregistrez. Allez sur votre menu > cliquez sur votre menu templates nouveau Dans slection > choisissez article Titre du menu > templates joomla et dans menus* >choisissez templates Sur la droite : slectionnez votre article " votre template sous joomla" Enregistrez On fait le lien avec le module donc revenez dans extension > modules Cliquez sur templates Modifier uniquement: - ordre d'affichage: 2 (afin qu'il aparaisse sous votre premier menu) - sur la droite, menu afficher: templates

Joomla! 1.6.3
- en bas, menu d'assignement, cliquez sur templates Cliquez sur voir le site, vous devez donc voir vos deux menus

Maintenant, entrainez-vous. Supprimez tout ce que vous venez de faire en supprimant un par un : le module cr, le menu, la catgorie, l'article et recommencez pour bien prendre en main l'administration de Joomla 1.6.3 Modifier les paramtres des articles sous Joomla! 1.6.3 Comment modifier les paramtres des articles joomla, supprimer, auteur, publi ... En regardant notre dernier tutorial pour crer un article sous joomla, nous nous apercevons que beaucoup de donnes apparaissent , comme par exemple ci-dessous avec catgorie: publi le: Ecrit par: Affichage:

Joomla! 1.6.3
Pour supprimer ces donnes, aller dans gestion des articles. En haut droite, cliquez sur paramtres.

La page paramtres de gestion et d'affichage des contenus s'affiche :

Et maintenant vous pouvez donc masquer le contenu que vous ne voulez pas voir dans vos articles joomla. Modifier l'administration de Joomla! 1.6.3 Comment modifier la couleur de fond des articles dans l'administration de joomla Votre site a une couleur de fond, noire par exemple. Lorsque vous ditez vos articles la couleur de fond de l'diteur de texte par dfaut est blanche. Si vous souhaitez donc que la couleur de texte de votre site soit blanche, vous ne voyez plus rien, puisque le fond de l'diteur de texte de joomla est galement blanc.

Joomla! 1.6.3
Pour modifier la couleur de fond de l'diteur de texte des articles de Joomla, cliquez sur html :

Et collez cette ligne au dbut du code html : <div style="background-color: #000000;"> Indiquez la couleur de votre choix. Comment mettre une image de fond dans les articles Joomla : Pour modifier le background d'un article et mettre une image de fond, entrez le code suivant: <div style="background-image:url('images/monimage.jpg')"> Supprimer le logo Joomla et header personnalis Nous allons maintenant supprimer le logo Joomla et poser notre propre header afin de personnaliser notre site Pour supprimer le logo Joomla Allez dans extension > gestion des templates Cliquez sur le template qui a t slectionn par dfaut, effacez les champs "titre" "description" "logo", enregistrez. Votre header est donc dsormais vide avec uniquement son image de fond.

Nous allons maintenant modifier le header avec une image de notre choix. En local, vous pouvez voir le header dans templates > beez_20 > images >personal> personal2.png personal2.png est donc notre header, taille 1060x288

Joomla! 1.6.3
Si vous avez des connaissances en graphisme, vous pouvez raliser votre header sous photoshop. Si vous besoin d'un header, contactez le webmaster d'UvNet.fr , qui vous le ralisera faible cout ... Pour mon site sous joomla, je dcide de reprendre le header d' UvNet.fr. J'ai donc simplement sous photoshop, ouvert le header existant soit personnal2.jpg. Je l'ai rempli de noir et pos mon header dj ralis avec comme titre, "templates Joomla". Nous avanons, mais cela n'est pas encore bien beau. Nous allons donc enlever le haut de page, modifier le footer, changer la couleur d'arrire-plan et modifier les polices et couleur de texte.

Modifier le template BEEZ20 de Joomla Nous allons maintenant modifier le template install par dfaut sous Joomla 1.6.3 - Pour supprimer le haut du template o se situe donc "taille de la police, Augmenter, diminuer ... " Dans vos fichiers, allez dans : templates > beez20 > index.php Et supprimer la ligne 32 o se trouve : $doc->addScript($this->baseurl.'/templates/beez_20/javascript/md_stylechanger.js', 'text/javascript', true); - De part et d'autre du header se trouve une marge blanche, nous allons l'enlever. Pour cela, aller dans le personal.css qui se trouve dans template >beez20 > css >personal.css Et la ligne 94 o se trouve :

.logoheader {

Joomla! 1.6.3
background: #0c1a3e URL(../images/personal/personal2.png) no-repeat bottom right ; color:#fff; min-height:200px; margin:0em 10px 0 10px !important; } Mettez les valeurs 0 dans margin margin:0em 0px 0 0px !important; - Nous allons maintenant remonter notre header afin de ne plus voir ce grand espace blanc Allez dans votre fichier index.php de votre template. A la ligne 92, supprimer: <div id="header"> Nous obtenons donc :

- Pour supprimer le texte "anim par Joomla" dans le footer Dans vos fichiers, allez dans : templates > beez20 > index.php Et supprimer la ligne 231 supprimer : <?php echo JText::_('TPL_BEEZ2_POWERED_BY');?> <a href="http://www.joomla.org/">Joomla!&#174;</a> Modifier le template BEEZ20 de Joomla Nous allons maintenant modifier les couleurs du template Beez-20 install par dfaut sous Joomla 1.6.3 - Pour modifier la couleur d'arrire-plan, le gris en couleur de fond du template Beez_20 Dans vos fichiers, ouvrez personal.css : > templates > beez_20 > css >personal.css A la ligne 18 :

body { background: #e0dedf url(../images/personal/bg2.png) repeat-x; color: #333;

Joomla! 1.6.3
font-family: arial, helvetica, sans-serif; } Vous modifiez - soit l'image bg2.png pour mettre une image en fond (n'oublier pas de la transfrer via votre ftp) - soit vous modifiez la couleur et dans ce cas, vous supprimez : url(../images/personal/bg2.png) repeat-x Je dcide de mettre du noir en couleur de fond, ce qui va donc donner : body { background: #000000 ; color: #333; font-family: arial, helvetica, sans-serif; }

Nous allons maintenant modifier le fond blanc ainsi que la couleur du texte du template Beez_20 - Pour modifier le fond blanc : Dans vos fichiers, ouvrez personal.css : > templates > beez_20 > css >personal.css la ligne 298 #contentarea, #contentarea2 { background:#fff /modifier la couleur ici / } - Pour modifier la couleur du texte : modifier la couleur du texte des articles > ligne 25 de personal.css #all { color: #333; / changer votre couleur ici / border:solid 0px ; padding-top:0px;

Joomla! 1.6.3
background:#fff } Pour changer la couleur des titres des menus : modifier la couleur du texte des menus > ligne 350 de personal.css #nav h3 { border-bottom:solid 1px #ddd; font-family: 'Titillium Maps', Arial; color:#555 / changer votre couleur ici / } Pour changer la taille du texte des titres des menus : modifier la taille du texte des menus > ligne 350 de personal.css ajouter font size ci-dessous #nav h3 { border-bottom:solid 1px #ddd; font-family: 'Titillium Maps', Arial; font-size: 12px; / ici / color:#555 } Modifier les menus du template BEEZ20 de Joomla Nous allons maintenant modifier les menus du template Beez-20 install par dfaut sous Joomla 1.6.3 - Pour modifier les menus, mettre une image en arrire-plan et changer la couleur du texte Pour mettre une image en arrire-plan des menus ou changer la couleur des menus: Dans vos fichiers, ouvrez personal.css : > templates > beez_20 > css >personal.css A la ligne 444 : ul.menu { border:0; background:#fff /* url(../images/nature/nav_level_1.gif) repeat-x */; border:solid 0px #eee; } Donc soit vous modifier la couleur du background ou modifier l'url images (que vous transfrer via votre ftp) J'ai de mon ct mis une image en dgrad bleu avec une bordure grise. Voici le code modifi et ce que cela donne ul.menu { border:0; background:url(../images/personal/item.jpg);; border:solid 1px #333; }

Joomla! 1.6.3

Je vais maintenant modifier la couleur du texte de mes menus Toujours dans personal.css, la ligne 462 : ul.menu li a:link, ul.menu li a:visited { color:#444; : /changer la couleur ici/ background:url(../images/nature/karo.gif) 5px 12px no-repeat } ul.menu li.active a:link, ul.menu li.active a:visited { color:#333; /changer la couleur ici/ } Et j'en profite pour modifier le petit carr gris en une toile qui correspond karo.gif Ce qui donne :

Pour modifier la couleur du titre principal de la page d'accueil et la police, c'est la ligne 715 #main .blog h1, #main .blog-featured h1 { color:#fff; / changer la couleur / border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; font-family: ' Arial; margin-top:-1px !important }

Joomla! 1.6.3
Pour modifier la couleur de vos titres sur vos pages internes, c'est la ligne 734. Voici le rsultat :

Installer un module Chat gratuit sur Joomla Nous allons installer un chat gratuit sous Joomla 1.6.3. - Tlcharger le Chat sur votre disque dur. J'ai choisi Chatroll. http://chatroll.com/signup/free Pour le Chat gratuit, vous avez droit 10 participants, vous pouvez - modifier l'apparence de votre Chat (couleur, bordure, taille...) - grer les accs - grer les permissions - modifier les textes d'accueil Vous vous enregistrez et en une minute vous allez pouvoir installer votre Chat gratuit. Une fois enregistr, cliquez sur le lien du mail que vous allez recevoir sur votre mail. Dans Chatroll - cliquez sur settings pour paramtrer votre Chat gratuit. Choisissez un titre pour votre Chat La photo sert uniquement pour le tableau de bord Choisissez votre langue > sauvegarder - dans apparence, modifier comme vous le souhaitez couleur, bordure... - dans acces, mthode de connexion Choisissez comment vos participants vont se connecter, plusieurs choix Guest Chatroll Facebook Twitter Par votre site web Je choisis invit et Chatroll. Ainsi, mes internautes en cliquant sur invit n'auront pas besoin de s'identifier. - grer vos permissions - dans modration, modifier le texte d'accueil Et enfin, installez le module.

Joomla! 1.6.3
Je clique donc sur Joomla Tlchargez l'extension Chatroll pour Joomla 16-1.3 sur votre disque dur: mod_chatroll_16-1.3 Dans l'administration de joomla, allez dans extensions > gestion des extensions Dans archive transfrer, transfrez votre fichier zip. Cliquez sur envoyez > installez Votre Chat apparait alors dans vos modules. Dans gestion des modules, cliquez sur votre Chat. Dans option de base, posez le code donn par Chatroll. Vous pouvez choisir la largeur et hauteur du Chat. Dans dtails, slectionnez la position o vous souhaitez voir apparaitre votre Chat. Je choisis la position 12, ainsi mon Chat apparaitra en milieu d'une page. Dans statut, j'indique "publi". Dans le menu d'assignement, pour le moment, j'indique "aucune page". Nous allons crer une page spcialement pour le Chat. Je vais dans gestion des catgories > nouveau J'indique Chat > enregistrez Je vais dans gestion des articles > nouveau J'indique Chat Catgorie > Chat J'cris un peu de texte, pour prsenter mon Chat par exemple. Enregistrez. Je vais dans gestion des menus > nouveau Titre > Chat Type de menu > Chat Enregistrez Je retourne dans menus et clique sur mon menu Chat > nouveau Dans slection, je choisis article Dans titre de menu > Chatroll Dans menus, choisissez o vous souhaitez voir apparaitre le lien vers votre Chat. Pour ma part, je vais le positionnez dans menu de gauche, dans templates. Et dans slectionner un article, je slectionne donc mon article Chat. Je retourne dans gestion des modules et clique sur Chatroll. Dans Menu d'assignement, j'indique seulement sur les pages slectionnes. et clique sur le menu (ou page) sur lequel vous souhaitez voir apparaitre votre Chat. J'ai slectionnez Templates > et slectionne Chatroll Enregistrez

Voici le rsultat

Joomla! 1.6.3