[résolu] Ajouter une ombre à la sidebar

KokopKokop Member
avril 2023 modifié dans Entraide

Bonjour,

Je modifie mon thème peu à peu, à partir du thème standard. Je voudrais ajouter une ombre à la sidebar, mais je n'arrive pas à la visualiser en entier.

J'ai rajouté le code suivant dans theme.css :

.aside {
  box-shadow: -4px 4px 9px 6px rgba(50,50,50,0.5);
  background-color: #eee;
  font-size: 1.4rem;
}

Et ça me donne une ombre uniquement sur les côtés gauche et bas. L'ombre n'apparaît pas en haut et à droite de la zone, malgré un "spread" important (6px, donc supérieur au décalage à gauche et en bas de -4).
(je n'arrive pas à joindre une image dans ce message pour vous montrer).

Une idée ? Merci !

Réponses

  • Bonjour,

    il faut décollé la side bar des bords de son conteneur pour que les ombrages puissent y apparaitre . (margin equivalent au minimun à ton spread )

    Ensuite, il faut réduire sa largeur d'autant que les marges ajoutées pour qu'elle ne passe pas dessous div.content. dans le thème par défaut div.content est à 75% de largeur et aside à 25% . en ajoutant une marge latérale à l'un d'eux, aside passe en dessous.
    Pour réduire la largeur de aside , ajouter par exemple max-width : calc(25% - 9px); . ou même methode si c'est .content que tu souhaites réduire légèrement.

    Le CSS peut devenir alors

    .aside.col.med-3 {
      box-shadow: -4px 4px 9px 6px rgba(50,50,50,0.5);
      background-color: #eee;
      font-size: 1.4rem;
      margin: 9px 9px 0 0;
      max-width: calc(25% - 20px);
    }
    @media (max-width: 768px) {
      .aside.col.sml-12 {
        margin:10px;
        max-width: calc(100% - 20px);
      }
    }
    

    Cdt


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • KokopKokop Member

    Merci beaucoup !

    Ca fonctionne. Je comprends bien la logique, tes explications sont très claires.

    J'ai fait joujou avec les propriétés css, et j'ai remarqué qu'Il n'est pas nécessaire de mettre une marge à droite, la max-width réduit le bord droit de .aside (qui est aligné à gauche dans le conteneur grid). En revanche si on veut que l'ombre ne déborde pas trop sur le conteneur '.content' à gauche, il faut mettre une marge à gauche dans .aside. Ce qui donnerait, avec un spread un peu exagéré de 12px (pour montrer ce que ça fait) :

    .aside.col.med-3 {
        box-shadow: -2px 2px 6px 12px rgba(50,50,50,0.5);
        background-color: #eee;
        font-size: 1.4rem;
        margin: 12px 0px 0 12px;
        max-width: calc(25% - 24px);
    }
    
Connectez-vous ou Inscrivez-vous pour répondre.