web-dev-qa-db-fra.com

Personnalisation de Protostar - Espace vide dans le modèle Joomla Protostar

OK, je suis donc nouveau dans Joomla et je le découvre au fur et à mesure. Je veux dire, c’est la raison pour laquelle Joomla est capable de le faire soi-même.

Je suis donc restée assise pendant deux jours à la fin pour tenter d'éliminer ce gaspillage d'espace irritant dans mon modèle Protostar. pour être exact, il y a un espace vide d'environ 1 pouce au-dessus du module Position-1 dans le modèle.

Ci-joint une image indiquant la zone en surbrillance rouge que je veux disparaître. J'ai cherché des forums, des publications et tout, mais aucune des informations ne m'aide

Empty Space at top of page

joomla-3.xtemplatescsstemplate-managerprotostar
1
Barend

1. Regarder votre CSS

Pour supprimer complètement l’espace au-dessus de votre menu:

.body .container a une bordure de 1px

.header a une marge inférieure de 10 pixels

.navigation a un rembourrage de 5px pour haut/bas.

.navbar a une marge inférieure de 18px;

Ceux-ci doivent être changés/remplacés. Donc, quelque chose comme ceci, dans votre Custom Css fichier pourrait fonctionner:

.body .container {border: 0;}
.header {margin-bottom: 0;}
.navigation {padding-top: 0;}
.navbar {margin-bottom: 0;}

Remarque:
Si vous voulez donner plus de spécificité et donc une priorité encore plus grande à vos règles personnalisées, vous pouvez ajouter le .site sélecteur avant les autres. Par exemple, les règles ci-dessus finiraient comme suit:

.site .body .container {border: 0;}
.site .header {margin-bottom: 0;}
/*.... and so on....*/

Répondre aux mises à jour

Modification du modèle Protostar - Meilleures pratiques

J'ai oublié de mentionner qu'il semble que vous modifiez directement le modèle de base Protostar. Notez que toutes les modifications que vous apportez à ses fichiers centraux risquent d'être écrasées (perdues) après une future mise à jour de Joomla.

Il existe deux options principales pour ce faire, en fonction du niveau de personnalisation requis:

1. Ajouter un CSS personnalisé

Le modèle CSS Protostar peut être modifié directement dans le gestionnaire de modèles. Mais le problème avec la modification des fichiers de base est qu’ils peuvent être écrasés par une mise à jour. Donc, pour éviter d’ajouter encore et encore aux personnalisations CSS, la solution consiste à ajouter un fichier CSS personnalisé. (Ceci est implémenté depuis Joomla 3.5. Il suffit de créer un nouveau fichier nommé user.css et placé dans le dossier css du modèle protostar. Là, nous pouvons ajouter nos propres règles CSS personnalisées. Voici un guide plus détaillé sur la procédure à suivre via le backend de Joomla:

2: le clonage de Protostar

Si vous voulez aller plus loin et personnaliser davantage le modèle Protostar , en modifiant sa mise en forme et son html, vous pouvez copiez/clonez-le et créez votre propre modèle.

Cela peut être fait facilement via l'interface Joomla Template Manager. En suivant les liens ci-dessous, vous trouverez comment procéder:

2
FFrewin

Ok, vous ne chargez aucun module à la position-0, non?

Ceci est la partie en-tête dans le fichier index.php:

<header class="header" role="banner">
        <div class="header-inner clearfix">
            <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                <?php echo $logo; ?>
                <?php if ($this->params->get('sitedescription')) : ?>
                    <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                <?php endif; ?>
            </a>
            <div class="header-search pull-right">
                <jdoc:include type="modules" name="position-0" style="none" />
            </div>
        </div>
</header>

Il est possible que l'un des éléments ait une hauteur, un rembourrage ou une marge. Vous pouvez vérifier cela très facilement en utilisant les outils de développement (F12 ou clic droit -> élément de vérification).

Si vous n'avez pas besoin de la section d'en-tête ici, vous pouvez l'exclure avec les modifications suivantes:

<?php if ($this->countModules('position-0')) : ?>   
<header class="header" role="banner">
            <div class="header-inner clearfix">
                <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                    <?php echo $logo; ?>
                    <?php if ($this->params->get('sitedescription')) : ?>
                        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                    <?php endif; ?>
                </a>
                <div class="header-search pull-right">
                    <jdoc:include type="modules" name="position-0" style="none" />
                </div>
            </div>
    </header>
<?php endif; ?>

Ceci vérifie si un module est activé pour la position 0, sinon ignore cette partie, sinon l'en-tête sera affiché avec la position du module.

1
Dennis Heiden

Il existe un plugin gratuit qui améliore considérablement l’affichage et les fonctions de Protostar sans modifier les fichiers de base ni perdre les modifications lorsque Joomla est mis à jour. En fait, un utilisateur peut créer de nombreux thèmes CSS et modèles d'affichage personnalisés et les sélectionner dans une liste de détection automatique.

Il est également convivial pour les développeurs afin que les thèmes installables puissent être distribués. Des champs de formulaire supplémentaires peuvent être ajoutés aux paramètres du modèle à votre guise, simplement en ajoutant un fichier personnalisé avec un nom unique en tant que nom_thème.xml et en générant les valeurs via un fichier personnalisé nommé nom_thème.php. Le paquet est ensuite installé normalement via le programme d'installation des extensions de Joomla. C'est génial pour la créativité et la capacité d'expansion. Cela permet de faire avec Protostar, tout ce que font les modèles commerciaux. http://protostar.websitedons.net/

0
Nadal

Donc, il y a 3 problèmes:

  1. Comme @ Dennis Heiden mentionné, vous devez ajouter une instruction PHP if autour de vous <header> comme il est toujours affiché dans le DOM. Alors suivez les instructions sur sa réponse en premier.
  2. Votre barre de navigation (.navigation) a un 5px top padding qui ajoute un peu plus d'espace en haut
  3. Le dernier numéro provient du code suivant:

`` `

ul.maximenuck {
    clear: both;
}

`` `

qui, comme vous pouvez l’imaginer, vient de l’extension maximenu que vous utilisez et que je ne recommanderais jamais de rien.

0
Lodder