Joomla! 1.6.3

Gérer ses pages sous Joomla - Contenu - Menus - Catégories - Articles joomla Comment gérer ses menus, modifier, ajouter des articles sous joomla! 1.6.3Nous 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 décide de présenter des templates sous joomla, voici mes menus :- Accueil                                 - Présentation 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 catégories et autant de sous-catégories que vous le souhaitez.

Afin qu'un article (ou texte) soit visible sur votre site, vous devez d'abord préparer le module auquel, il va correspondre, son menu , sa catégorie et éventuellement sa sous-catégorie.

Nous allons donc commencer par mettre en place les modules.Commençons par créer notre premier menu qui va correspondre à notre page d'accueil :- Accueil  - Présentation joomla Aller dans extension > gestion des modulesPour l'accueil, nous allons utiliser un module existant: main menu qui va représenter par défaut 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 présentation joomla. Puis enregistrez.

Cliquez dans gestion des catégories, puis sur nouveau et en titre: présentation joomla. Enregistrez.

Cliquez dans gestion des articles, puis sur nouveau et en titre: JoomlaMettez oui pour en vedette (ainsi ce texte apparaitra sur votre page d'accueil)

Vous pouvez donc voir déjà sur votre site que votre menu est bien présent et l'article qui lui est associé.

Joomla! 1.6.3

Nous enlèverons par la suite les données qui ne nous interessent pas.

Passons maintenant à notre deuxième menu, pour celà, nous allons créer un nouveau module que nous positionnerons également sur la gauche. Ce menu nous amènera donc sur des pages internes.Allez dans extensions > gestion des modulesCliquez sur nouveauLà vous devez sélectionner 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 catégorie, nouveauTitre : joomla Enregistrez

Allez dans ajoutez un articleDonnez un titre: votre template sous joomlaindiquez la catégorie rattachée donc: joomla Ajoutez un peu de texte dans la zone de texte Enregistrez

Allez dans gestion des menus, ajoutez un menuIndiquez Templates .Enregistrez.Allez sur votre menu > cliquez sur votre menu templatesnouveau Dans sélection > choisissez articleTitre du menu > templates joomlaet dans menus* >choisissez templatesSur la droite : sélectionnez votre article " votre template sous joomla" EnregistrezOn fait le lien avec le moduledonc revenez dans extension > modulesCliquez sur templatesModifier uniquement:

Joomla! 1.6.3

- ordre d'affichage: 2 (afin qu'il aparaisse sous votre premier menu)- sur la droite, menu à afficher: templates- 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 catégorie, l'article et recommencez pour bien prendre en main l'administration de Joomla 1.6.3

Modifier les paramètres des articles sous Joomla! 1.6.3

Comment modifier les paramètres des articles joomla, supprimer, auteur, publié ...

En regardant notre dernier tutorial pour créer un article sous joomla, nous nous apercevons que beaucoup de données apparaissent , comme par exemple ci-dessous aveccatégorie: publié le:Ecrit par:Affichage:

Joomla! 1.6.3

 Pour supprimer ces données, aller dans gestion des articles.En haut à droite, cliquez sur paramètres.

La page paramètres 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.

Joomla! 1.6.3

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 défaut 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.

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

Et collez cette ligne au début 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 JoomlaAllez dans extension > gestion des templatesCliquez sur le template qui a été sélectionné par défaut, effacez les champs "titre" "description" "logo", enregistrez.Votre header est donc désormais vide avec uniquement son image de fond.

Joomla! 1.6.3

 

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

Si vous avez des connaissances en graphisme, vous pouvez réaliser votre header sous photoshop.Si vous besoin d'un header, contactez le webmaster d'UvNet.fr , qui vous le réalisera à faible cout ...

Pour mon site sous joomla, je décide 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 déjà réalisé avec comme titre, "templates Joomla".

Nous avançons, mais cela n'est pas encore bien beau.Nous allons donc enlever le haut de page, modifier le footer, changer la couleur d'arrière-plan et modifier les polices et couleur de texte.

Joomla! 1.6.3

Modifier le template BEEZ20 de Joomla

Nous allons maintenant modifier le template installé par défaut 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.phpEt 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 danstemplate >beez20 > css >personal.cssEt à la ligne 94 où se trouve :

.logoheader{

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;

Joomla! 1.6.3

- 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.phpEt 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 défaut sous Joomla 1.6.3- Pour modifier la couleur d'arrière-plan, le gris en couleur de fond du template Beez_20 Dans vos fichiers, ouvrez personal.css :> templates > beez_20 > css >personal.cssA la ligne 18 :

body{background: #e0dedf url(../images/personal/bg2.png) repeat-x;color: #333;font-family: arial, helvetica, sans-serif;}

Vous modifiez - soit l'image bg2.png pour mettre une image en fond (n'oublier pas de la transférer via votre ftp)- soit vous modifiez la couleur et dans ce cas, vous supprimez : url(../images/personal/bg2.png) repeat-x

Joomla! 1.6.3

Je décide 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;background:#fff}

Pour changer la couleur des titres des menus :modifier la couleur du texte des menus > ligne 350 de personal.css

Joomla! 1.6.3

#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.cssajouter 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 défaut sous Joomla 1.6.3- Pour modifier les menus, mettre une image en arrière-plan et changer la couleur du texte

Pour mettre une image en arrière-plan des menus ou changer la couleur des menus:Dans vos fichiers, ouvrez personal.css :> templates > beez_20 > css >personal.cssA 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 transférer via votre ftp)J'ai de mon côté mis une image en dégradé 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 menusToujours 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.gifCe 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 résultat :

Installer un module Chat gratuit sur Joomla

Nous allons installer un chat gratuit sous Joomla 1.6.3.

- Télécharger le Chat sur votre disque dur. J'ai choisi Chatroll. http://chatroll.com/signup/freePour le Chat gratuit, vous avez droit à 10 participants, vous pouvez- modifier l'apparence de votre Chat (couleur, bordure, taille...) - gérer les accès- gérer les permissions- modifier les textes d'accueilVous 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 paramétrer votre Chat gratuit.Choisissez un titre pour votre ChatLa photo sert uniquement pour le tableau de bordChoisissez votre langue > sauvegarder- dans apparence, modifier comme vous le souhaitez couleur, bordure...

- dans acces, méthode de connexionChoisissez comment vos participants vont se connecter, plusieurs choixGuestChatrollFacebookTwitterPar votre site webJe choisis invité et Chatroll. Ainsi, mes internautes en cliquant sur

Joomla! 1.6.3

invité n'auront pasbesoin de s'identifier.

- gérer vos permissions- dans modération, modifier le texte d'accueilEt enfin, installez le module.Je clique donc sur Joomla Téléchargez l'extension Chatroll pour Joomla 16-1.3 sur votre disque dur:mod_chatroll_16-1.3Dans l'administration de joomla, allez dans extensions > gestion des extensions Dans archive à transférer, transférez votre fichier zip.  Cliquez sur envoyez > installezVotre 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 détails, sélectionnez 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 créer une page spécialement pour le Chat.Je vais dans gestion des catégories > nouveauJ'indique Chat > enregistrezJe vais dans gestion des articles > nouveauJ'indique ChatCatégorie > ChatJ'écris un peu de texte, pour présenter mon Chat par exemple.Enregistrez.

Je vais dans gestion des menus > nouveauTitre > ChatType de menu > Chat Enregistrez

Je retourne dans menus et clique sur mon menu Chat > nouveauDans sélection, je choisis articleDans titre de menu > ChatrollDans 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 sélectionner un article, je sélectionne donc mon article Chat.

Joomla! 1.6.3

Je retourne dans gestion des modules et clique sur Chatroll.Dans Menu d'assignement, j'indique seulement sur les pages sélectionnées.et clique sur le menu (ou page) sur lequel vous souhaitez voir apparaitre votre Chat.J'ai sélectionnez Templates > et sélectionne Chatroll Enregistrez

Voici le résultat