Tutoriels sur Joomla et la création de site

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.