[résolu] Ajouter une ombre à la sidebar

Kokop

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 !

gcyrillus-nomade

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

Kokop

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);
}