Nous avons une maquette de ce à quoi nous voulons que nos zones BuySellAds ressemblent, alors commençons à la construire pour de vrai. Le site Web BuySellAds fournit le code que nous devons mettre sur notre site pour que les annonces s'affichent. Nous copions et collons cela.
Nous essayons de désactiver le CSS que BSA injecte sur le site pour les styliser (car nous nous en occuperons nous-mêmes) mais malheureusement si nous le désactivons maintenant, cela affecte également le site en direct, nous devons donc simplement lutter contre l'injection. CSS pour l'instant.
Nous passons le reste du temps à positionner et à styliser les annonces pour qu'elles s'affichent exactement comme nous le souhaitons. C'est assez facile car nous en avons déjà tellement en place, comme des mixins pour les piles de polices et les couleurs, etc.
Nous rencontrons une chose que nous rencontrons plusieurs fois dans cette série, où ce serait bien pour @extendune classe qui n'existe que dans un autre fichier, ce que malheureusement vous ne pouvez pas faire. Dans cet exemple, nous essayons de créer un div injecté BSA avec le style .moduleis, ce qui est un cas classique pour extend, mais hélas, nous devons copier et coller certains styles.
Nous réfléchissons à ce que flexbox nous aide ici, mais décidons qu'il est trop tôt pour cela. Cela faciliterait la mise en page et nous donnerait des hauteurs égales. Eh bien, nous allons le mettre sur la future liste de souhaits.