[Résolu] Modification barre latérale (Créer un compte)

Accueil › Forums › Thèmes › [Résolu] Modification barre latérale
  • WordPress :6.1
  • Statut : résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • 21 avril 2023 à 6 h 44 min #2453090
    brandygo
    Participant
    Padawan WordPress
    68 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : celle de l’hébergeur
    • Thème utilisé : ASTRA
    • Extensions en place : elementor, Ithemes security, loco translate, simple sitemap, tablepress, wp optimise, Yaost seo
    • Nom de l’hébergeur : LWS
    • Adresse du site : atuct81.fr

    Problème(s) rencontré(s) :

    Dans ma barre latérale, les espace entre les titres ( derniers articles, liens utiles, archives) des blocs widget et le contenu est très grand. je souhaite les réduire. Je pense que l’on peut intervenir dans les zone CSS personnalisable d’Astra mais je n’ai pas les compétences pour trouver les bon codes. Quelqu’un peut-il m’aider. Un grand merci.

    21 avril 2023 à 10 h 28 min #2453097
    Li-An
    Participant
    Maître WordPress
    28871 contributions

    Bonjour,

    Il y avait un questionnaire affiché, c’est dommage de ne pas l’avoir complété entièrement, car il peut aider à vous aider.
    Alors, merci de le copier-coller et compléter du mieux possible dans votre prochain post. Vous pouvez utiliser cette extension https://github.com/zitezinfo/infosite et copier/coller les informations affichées.

    Pour l’installer : téléchargez le fichier .zip indiqué dans le lien puis Extensions>Ajouter, cliquer sur le bouton Téléverser une extension (utilisez le fichier zip).

    21 avril 2023 à 10 h 33 min #2453102
    momofr@free.fr
    Modérateur
    Maître WordPress
    7388 contributions

    Salut, la règle CSS est la suivante :

    .widget-title {
    	margin-bottom: 0.2em;
    	line-height: 1.1;
    }

    Tu adapte les valeurs selon tes besoins. Le code est à placer dans Apparence -> Personnaliser -> CSS additionnelle, ou dans la feuille de styles de ton thème enfant si tu en utilises un (il faut peut être forcer les attributs avec un !important).

    21 avril 2023 à 12 h 14 min #2453119
    brandygo
    Participant
    Padawan WordPress
    68 contributions

    Merci de cette réponse rapide.

    J’ai bien mis le code dans la zone css en bas du menu de la barre latérale, mais rien ne change. Je l’ai aussi mis dans la zone css propre au widget titre mais idem!!! En fait il me semble qu’il faudrait réduire la marge sous le titre ou au dessus des widget derniers article, liens utiles…

    Qu’en pensez vous?

    A bientôt

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    21 avril 2023 à 18 h 22 min #2453145
    momofr@free.fr
    Modérateur
    Maître WordPress
    7388 contributions

    Salut, le test que je fais en local avec le thème Astra marche très bien chez moi.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    21 avril 2023 à 18 h 41 min #2453148
    ferman
    Modérateur
    Maître WordPress
    7285 contributions

    Bonjour,

    Je pense qu’il y a des erreurs dans les titres. On voit dans le html:

    <h4 class="{ margin-bottom: 0.1em !important; line-height: 1.1 has-medium-font-size" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">Liens utiles</h4>

    <h5 class=".widget-title { margin-bottom: 0.2em; line-height: 1.1; } has-medium-font-size" style="line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">Derniers Articles</h5>

    Vous n’avez certainement pas mis les CSS au bon endroit.

    • Cette réponse a été modifiée le il y a 1 année et 7 mois par ferman.
    • Cette réponse a été modifiée le il y a 1 année et 7 mois par ferman.
    21 avril 2023 à 23 h 36 min #2453155
    brandygo
    Participant
    Padawan WordPress
    68 contributions

    Bonsoir,

    Je ne comprends pas; J’ai bien mis le code dans la bonne zone widget mais cela ne change rien! Il y a toujours un grand espace. J’ia effacé la cache avant de publier. Certainement un conflit quelque part! Si quelqu’un trouve le bug. Merci. Bonne soirée.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    22 avril 2023 à 9 h 05 min #2453159
    ferman
    Modérateur
    Maître WordPress
    7285 contributions

    Bizarre. Essayez pour voir le code ci-dessous dans les CSS personnalisées du thème:

    aside h4, aside h5 {
    	padding-top: 1em;
    }
    aside[id*="block"]{
    	margin-bottom:10px;
    }

    • Cette réponse a été modifiée le il y a 1 année et 7 mois par ferman.
    22 avril 2023 à 12 h 16 min #2453168
    momofr@free.fr
    Modérateur
    Maître WordPress
    7388 contributions

    Salut, quand tu dis « J’ai bien mis le code dans la bonne zone widget » tu commets un erreur car tu ne connais pas le principe des CSS dans Gutenberg.

    Le champ en bas sert à saisir une « classe » CSS pas une « règle CSS« , ce qui fait que l’on trouve dans le code ceci :

    <h5 class=".widget-title { margin-bottom: 0.2em !important; line-height: 1 }">Archives</h5:>

    Alors que cela devrait être :

    <h5 class="widget-title">Archives</h5:>

    Je t’ai indiqué plus haut où il faut saisir la règle,  cette section permet d’embarquer des règles CSS additionnelles à celle du thème, normalement elles sont chargées après celles du thème et écrasent celle-ci (si même nom de classe). Parfois, selon le thème, il faut forcer les règles avec !important.

    Ma proposition ne peut pas marcher car j’ai utilisé des bloc Gutenberg anciens semble-t-il, dans ton cas la structure est un peu plus complexe puisque qu’elle utilise le même élément pour les titres et les contenus (aside.widget.widget_block) si on touche à la marge de ce contenu (margin: 0 0 2.8em 0;) tous les éléments se rapprochent verticalement.

    La balise H5 a une marge bottom en plus, on va cibler les titre H5 et appliquer une marge verticale négative pour rapprocher ces derniers du contenu qui le suit avec cette règle :

    .sidebar-main .widget_block h5 {
    	margin-bottom: -30px !important;
    }

    Dans cette règle je cible la barre latérale principale (sidebar-main) les blocs de widget (widget_block) et enfin les titre h5.

    Tu supprimes tes ajouts dans les widgets de la colonne latérale et tu saisis cette règle dans : Apparence -> Personnaliser -> CSS additionnelle.

    22 avril 2023 à 12 h 51 min #2453178
    brandygo
    Participant
    Padawan WordPress
    68 contributions

    Merci de toutes ces précisions technique. J’ai donc effacé tous les css additionnels propres aux widget titre (H5) et j’ai mis ton code css dans la zone principal. Le résultats est que les titres ont remonté diminuant ainsi l’espace avec le bloc précédant, ce qui me convient. Par contre il restait un écart important avec le bloc suivant. Par analogie avec ce que tu m’as proposé j’ai donc ajouter du code avec un marging-top et ça marche! houra!

    .sidebar-main .widget_block h5 {
    margin-bottom: -40px !important;
    margin-top: -40px !important;
    }

    Encore un grand merci pour ton aide et ta compétence.

    Passe un bon week-end

    Cordialement

  • Auteur
    Messages
10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.