Tutoriels sur Joomla et la création de site

Si vous envisagez d'utiliser le template Protostar fourni avec Joomla, vous pouvez ajouter votre propre feuille de style custom.css. Vous pouvez la nommer comme vous voulez bien sûr, sauf template.css - qui est le nom de la feuille de style par défaut,

Les avantages d'avoir votre propre feuille de style sont :

• Vous ne modifiez pas template.css, donc pas besoin de fouiller dans leur feuille de style extrêmement longue.

• Si vous mettez à niveau Joomla,il écrasera la feuille de style template.css fournie avec Protostar. Vous devrez remplacer le nouveau template.css avec votre ancienne ou recréer votre style.

• Si vous créez votre propre style, c'est propre, c'est net, organisé de la façon dont vous voulez qu'il soit.

• Si le lien vers la feuille de style dans le index.php est fait correctement, les styles établis dans custom.css peuvent remplacer un style spécifique dans template.css.

Créer une feuille de style personnalisée à l'aide du gestionnaire de templates

Joomla 3.2 a grandement amélioré la façon dont vous pouvez créer et éditer des fichiers à l'aide du Gestionnaire de templates.

Extensions -> Gestion des templates

Vous arriverez à une page avec un tableau des templates installés dans votre site. The columns are Style, Défaut, Assigné, Emplacement, Template et ID.

Pour créer une feuille de style personnalisée pour le template Protostar, Cliquez sur protostar dans la colonne Template.

Assurez-vous d'être dans l'onglet Editeur.

Cliquez sur le dossier css dans la colonne de gauche, en premier lieu vous ne verrez que template.css fourni avec le template Protostar.

Juste au dessus, cliquez sur le bouton Nouveau fichier

Une boîte de dialogue arrivera. Sélectionnez le dossier css et sélectionnez css dans la liste déroulante Type de fichier.

Tapez le nom du nouveau fichier - ne pas ajouter l'extension .css, puis sélectionnez créer.

Vous pouvez également choisir de télécharger un fichier depuis votre ordinateur.

La boîte de dialogue disparaît et vous verrez un éditeur de texte avec votre nouveau fichier ou celui téléchargé.

Vous pouvez ajouter votre style directement dans cette zone de texte.

Maintenant, vous devez ajouter cette feuille de style dans le fichier index.php de sorte que Joomla sache qu'elle est là.

Editez votre fichier index.php pour voir la nouvelle feuille de style

Juste ici dans le gestionnaire de templates, vous pouvez également éditer votre fichier index.php de votre template.

Vous devriez vraiment créer une copie du fichier index.php, mais il n'y a aucune option en haut pour copier un fichier. Vous pouvez créer une copie à l'aide d'un programme de ftp ou vous pouvez ouvrir le fichier index.php, Appuyez sur Ctrl + a pour sélectionner tout le document puis Ctrl + c pour copier tout le contenu du fichier, puis créez un nouveau fichier, choisissez comme Type de fichier php, Nommez le fichier en quelque chose comme index3-5-14. Lorsque le fichier vide s'affiche, sélectionnez Ctrl + v pour coller le contenu copié dans le nouveau fichier. Appuyez sur enregistrer, puis revenez en arrière et modifiez le fichier index.php original.

Dans l'onglet Éditeur du gestionnaire de Template: Personnaliser le template, la liste des dossiers et fichiers sur la gauche sont les fichiers à l'intérieur de votre dossier de votre template.

Cliquez sur index.php (après avoir fait une copie de celui-ci) et le fichier apparaît dans l'éditeur de texte.

Cherchez la ligne comme indiqué ci-dessous :

// Add Stylesheets

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

 

Ajoutez cette ligne juste en dessous, en utilisant le nom de votre feuille de style personnalisée.

$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

Maintenant, vous pouvez ajouter votre propre style ou créer des styles qui vont substituer des styles créés par template.css.

Mise en garde: N'oubliez pas que si vous mettez à niveau Joomla, il remplacera le fichier index.php. Vous devrez peut-être répéter ces étapes avec le nouveau fichier index.php. Un moyen de contourner cela est de copier le template complet et faire de la copie votre template par défaut.

Il peut y avoir une situation où vous ne souhaitez pas que le template Protostar soit responsive. C'est peut-être parce que vous avez de larges images dont vous ne souhaitez pas réduire la taille, ou des avertissements d'extensions tierces ou pour toute autre raison.

Enlever le style responsive dans Protostar dépasse la simple déclaration de la mise en page fluide ou Statiques par le gestionnaire de templates: onglet Modifier Style Avancé. Même avec une mise en page "statique", Protostar empilera toujours les éléments de menu avec la classe nav-pills et empilera le sidebar et les colonnes de côté pour les écrans étroits. D'autres appels @media dans le template.css pour Protostar vont changer les marges, les padding et la largeur des colonnes.

Vous pouvez éliminer la plupart du style responsive en suivant une paire d'étapes. La première consiste à ajouter un lien dans index.php vers une feuille de style qui annule la plupart du style responsive pour les petits écrans. L'autre consiste à créer cette feuille de style et à l'ajouter dans votre dossier css du template Protostar.

Étapes pour supprimer le style responsive pour Protostar

Étape 1: Créez une sauvegarde de sécurité de votre fichier index.php se trouvant à la racine du répertoire de protostar sous le dossier templates. Vous pouvez faire cela avec un logiciel FTP ou le gestionnaire de fichiers de votre hébergeur.

Étape 2: Ouvrez l'index.php original à la racine du répertoire protostar dans le dossier templates avec un éditeur de texte. Recherchez la ligne :

/ Add Stylesheets

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

Ajoutez cette ligne juste en dessous:

$doc->addStyleSheet('templates/'.$this->template.'/css/remove-responsive.css');

Ceci indiquera à Joomla de charger la nouvelle feuille de style. Puisqu'il charge cette feuille de style après la feuille de style template.css, tous les styles de la feuille de style remove-responsive.css vont remplacer les styles de template.css.

Étape 3: Ouvrez un document vierge dans un éditeur de texte et enregistrez-le sous remove-responsive.css

Étape 4: Ajoutez les lignes suivantes dans ce nouveau document texte:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {

width: 960px;

max-width: 960px;

}

@media (max-width: 980px) {

.header .brand {text-align: left;float: left;}

.header .nav.pull-right, .header-search {float: right;}

.nav-pills > li {float: left;}

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {width: 23.4043%; }

.row-fluid .span6 {width: 48.9362%; }

.row-fluid [class*="span"] {float: left;margin-left: 2.12766%;}

.row-fluid .span4 {width: 31.9149%}

.row-fluid .span9 {width: 74.4681% ;}

.row-fluid .span9 {width: 100% ;}

.well {padding: 19px;}

}

Étape5: Téléchargez ce nouveau document via FTP ou le gestionnaire de fichiers de votre hébergeur dans templates/protostar/css/. Le fichier template.css devrait déjà être là.

Étape6: Ouvrez votre site Joomla et réduisez la taille de la fenêtre de votre navigateur. Regardez si le site reste à 960px, même lorsque la fenêtre est réduite. Tester le site sur une tablette et téléphone de la même manière.

Remarques particulières sur ce processus :

Ce style sert juste de point de départ. Vous pourriez constater qu'il y a des autres problèmes avec votre site ayant trait au style responsive. Un outil de diagnostic tels que Firebug pour Firefox permet de déterminer les styles. Vous pouvez ajouter des lignes au fichier remove-responsive.css afin d'annuler également ces styles complémentaires si vous le devez.

Les styles mis en place dans remove-responsive.css règlent le container à 960px. Vous pouvez modifier cette largeur comme vous le souhaitez.

Ces styles sont seulement pour le template Protostar. Les templates des extensions tierces peuvent avoir leur propre style spécial d'appliqué pour un site responsive.

Le style @media (max-width: 980px) réglera tout-ce-qui-est-en-moins-large-que 980-px. Ceci remplacera le style @media de template.css pour toute largeur plus étroite.

Si vous voulez utiliser et personnaliser le template Protostar par défaut, il est souvent suggéré que  que vous fassiez une copie et renommiez le template.

Remarque: Si vous allez dans le gestionnaire de Template Manager et cliquez sur Dupliquer, Cela ne COPIE PAS et ne RENOMME PAS les fichiers du template. Cela crée simplement un nouveau style dans la base de données.

Pourquoi devrais-je créer une copie et renommer mon template dans Joomla ?

Il y a plusieurs bonnes raisons pour lesquelles copier et renommer le template que vous allez utiliser avec votre installation Joomla:

• vous pouvez faire une copie du template original comme sauvegarde de sécurité

• Lorsque vous mettez à niveau votre installation, vous ne remplacerez pas votre personnalisation

• vous pouvez donner au nouveau template un nom associé à votre nom de site ou votre entreprise

Étapes pour COPIER un template dans Joomla 3

Étape 1:

Aller dans Extensions -> Gestion des Templates: Écran Style et cliquez sur le nom du template dans la colonne du template que vous souhaitez copier. En cliquant sur le nom du template, cela vous emmènera à l'écran gestionnaire de templates: Personnaliser le template

Étape 2 :

Cliquez sur le bouton Copier le template et une fenêtre contextuelle s'affichera en popup.

Entrez le nouveau nom pour votre template dans la zone de texte, puis cliquez sur le bouton Copier le template.

Si vous jetiez un oeil au répertoire de votre site avec un logiciel FTP, vous verriez qu'il y a un nouveau dossier avec le nom de votre nouveau template. C'est une copie de tous les fichiers et dossiers qui se trouvaient dans votre template d'origine.

En utilisant cette méthode de copie de template, le fichier templateDetails.xml pour votre nouveau template a été modifié afin de refléter le nom du nouveau template.

Étape 3 :

Si vous souhaitez modifier la mise en page dans index.php, créer une position personnalisée, créer une feuille de style personnalisée, vous pourrez tout faire dans le nouveau template.

Considérations à prendre en compte lorsque vous copiez un template dans Joomla

Il y a quelques éléments dont vous devez être conscient lors de la copie et la mise en œuvre de votre nouveau template:

• Pour les templates d'extensions tierces, il peut y avoir les droits d'auteur qui protègent les créateurs du template original.

• Vous pourriez constater des erreurs lors de l'implémentation du nouveau template, car il peut y avoir certains chemins d'accès aux fichiers qui continuent à pointer vers le template d'origine.

• Si vous mettez à jour votre installation Joomla, ce nouveau template ne le sera pas. Cela peut être à la fois bon et mauvais. Votre personnalisation ne sera pas supprimée, mais vous ne pouvez pas obtenir le bénéfice des corrections de bugs et autres changements qui ont eu lieu dans le template original.

Il se peut que vous souhaitiez avoir une zone de contenu plus étendue ou de plus larges colonnes à gauche et à droite. Voici quelques suggestions sur la façon dont vous pourriez aborder cette question. Regardons quels sont les paramètres par défaut dans index.php et template.css du template Protostar.

Paramètres par défaut de Protostar pour les colonnes de droite, de gauche, et le centre.

Colonne de gauche - position-8

Si vous avez le template Protostar comme template frontal et que vous placez un module en position-8, il apparaîtra dans la colonne de gauche. Voici un extrait de l'index.php qui place ce module position-8 dans le div #sidebar et lui attribue la classe .span3

<div id="sidebar">
<div>
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>

Colonne de droite - position-7

Pour un module placé en position-7, voici le code dans index.php pour cette position :

<div id="aside">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>

Style dans Template.css pour .span3

Template.css donne la largeur à .span3 avec ce style (pour les moniteurs à écran large).

.row-fluid .span3 {
width: 23.4043%;
}

Paramètres par défaut pour la colonne centrale

Le contenu principal et les modules mis en position-3 et position-2 sont placés dans la page Web dans index.php selon les lignes suivantes :

<main id="content" role="main">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>

L'élément <main> se verra attribué une classe .span6 s'il existe des modules à sa gauche et à sa droite. L'élément <main> se verra attribuer une classe Span9 si seulement une des colonnes a des modules publiés à l'intérieur. L'élément <main>se verra attribué une classe .span12 si ni la colonne de gauche ni celle de droite n'a de module assigné. Cela se fait dans la section <? Php ...?> Du fichier index.php. Avec une série de déclarations if et elseif, le fichier teste quelles positions ont été assignées et définit la valeur de la variable $span en conséquence. Ce code php suppose que les deux position-7 et position-8 sont affectées d'une classe de .span3.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

Voici les styles pour ces classes span dans template.css

.row-fluid .span6 {
width: 100%;
}
.row-fluid .span9 {
width: 48.9362%;
}
.row-fluid .span12 {
width: 100%;
}

Comment modifier les paramètres par défaut pour les classes .span de Protostar

Il y a plusieurs approches possibles pour modifier ces paramètres par défaut afin de personnaliser votre site Web. Vous pouvez modifier les pourcentages des largeurs pour ces classes span dans votre feuille de style personnalisée de surcharge. Vous pouvez modifier le index.php afin qu'il assigne des classes .span plus larges ou plus étroites à la colonne de droite et de gauche.

Modifier les classes .span pour les colonnes gauche et droite vers .span2 et ajuster la zone Centrale

Créez une sauvegarde de votre index.php dans Protostar avant d'apporter des modifications au fichier d'origine. Ouvrez index.php dans un éditeur de texte.

Vous aurez besoin d'ajuster la déclaration <? php...? > if pour donner à la colonne du centre une classe .span correcte.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span10";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span10";
}
else
{
$span = "span12";
}

Ensuite, vous devrez modifier les lignes de position-8 et position-7 pour qu'elles aient une classe .span2 :

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

<div id="aside" class="span2">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

Enregistrez votre index.php dans votre répertoire Protostar sur le serveur d'hébergement. Ouvrez votre site dans un navigateur Web. Les colonnes de gauche et de droite doivent être plus étroites et la zone centrale devrait être plus large. Il peut y avoir d'autre style que vous aurez besoin d'adapter pour affiner le contenu dans ces modules.

Changer pour span2 sur la gauche et span4 sur la droite

Le même concept s'applique si vous voulez avoir une colonne plus étroite sur la gauche et une colonne plus large sur la droite, sauf que vous devrez être plus créatif avec la déclaration php if dans index.php.

// Adjusting content width

if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span8";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span10";
}
else
{
$span = "span12";
}

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>


<div id="aside" class="span4">
    <!-- Begin Right Sidebar -->
    <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>