Bienvenue dans cette leçon, nous allons terminer le style de la page de spectacle du camping à la fin de la dernière vidéo.
J'ai mentionné certains des changements que nous devons apporter.
Cela ne peut pas être traité avec bootstrap pur.
Nous devons ajouter des styles personnalisés.
Donc nous devons changer la largeur de cette image ici afin qu'elle prenne jusqu'à 100 pour cent de la vignette.
Nous voulions ajouter un peu de remplissage ici.
C'est ce qu'il devrait ressembler où nous avons rembourrage et vous pouvez voir l'image prend tout le conteneur.
Et pour accomplir cela nous pourrions aller dans le montré à chaque oui et ajouter une étiquette de style vers le haut ici.
Mais ce n'est pas vraiment une bonne idée.
Donc, au lieu de cela nous allons ajouter dans notre première feuille de style personnalisé et pour faire ce travail, nous allons faire un répertoire public comme nous l'avons fait dans une leçon précédente.
Donc je vais rendre le répertoire public et ensuite je ferai un autre répertoire dans le public.
Celui-ci sera appelé les feuilles de style ainsi public slash feuilles de style et nous aurons un autre éventuellement pour notre javascript est le front et Javascript et nous allons frapper entrer et puis nous allons faire un seul fichier à l'intérieur de stylesheets public sosh style Feuilles slash et nous allons appeler cela signifie Dotsie SS Tout comme ça.
D'ACCORD.
Maintenant, nous voulons ouvrir cela.
Donc, nous allons ouvrir ce fichier vers le haut stylesheets gutsiest principal nous et commençons par ajouter quelque chose de vraiment évident dans ici comme le réglage de la couleur d'arrière-plan pour le corps d'être violet et enregistrer et puis nous devons aller de l'avant et obtenir ce connecté.
Donc, dans le cas de l'application, nous devons ajouter une ligne ici où nous faisons une application point utiliser Express qui est statique.
Et puis ce que nous avons fait la dernière fois a été juste ajouter en public, mais il ya effectivement une façon légèrement meilleure de le faire que je ne voulais pas montrer tout de suite.
Mais je veux le montrer maintenant tout ce que nous avons à faire est d'ajouter un underscore underscore cher nom nom de répertoire plus slash public dir name fait référence au répertoire que ce script était en cours d'exécution.
Alors laissez-moi vous montrer ce que cela ressemble.
Si je viens de faire une console, mais de souligner souligner le soulignement à votre nom comme ça et enregistrer et redémarrer le serveur.
Remarquez ce que je reçois ici.
C'est le nom du répertoire de l'espace de travail du chemin entier luxuriante de camp slash v 5.
Donc, en ajoutant dir name plus slash public, nous sommes juste être plus sûr, car si potentiellement en quelque sorte cela a changé le répertoire actuel obtenu bizarre quelque chose s'est passé que nous n'attendions pas.
Qui, espérons-le, ne fera jamais mais si elle ne faire votre nom sera toujours le répertoire dans lequel le script vit.
Donc, nous sommes juste plus en sécurité et ajouter slash public et c'est juste la façon plus conventionnelle de le faire en.
Nous ne verrons pas de différence du tout.
Nous allons donc économiser.
Nous pouvons nous débarrasser de cela et ce que nous avons fait est ajouté dans notre esprit simple.
SS Mais nous ne l'avons pas encore lié.
Nous avons donc servi l'annuaire public.
Nous servons maintenant tout dans ce répertoire qui est vraiment juste un seul dossier stylesheets et un seul fichier peut nous finir.
Mais maintenant let's go lien vers ce fichier et nous allons le faire sur le fichier d'en-tête.
Donc, je vais à C9 vues slash Parshall slash hetter et puis en haut de la tête après bootstrap.
Je vais ajouter une autre balise de lien et celle-ci va être H ref est égale à slash stylesheets slash C principale Ss et puis nous allons également ajouter en ligne ici pour être feuille de style.
D'ACCORD.
Nous avons maintenant lié, je l'espère, notre feuille de style que nous servons maintenant dans l'annuaire public.
Et testons-le s'il fonctionnait.
Il sera sur chaque page unique parce que chaque page qui a l'en-tête partielle inclus.
Examinons cela.
Nous allons simplement à notre page de destination.
Voilà.
C'est tout pourpre et si nous allons voir notre terrain de camping Il ya aussi un fond pourpre totalement jusqu'à vous si vous voulez le garder comme pourpre.
Je vais le changer.
Mais je vais ajouter dans le style que nous avons gagné et ces styles vont affecter les vignettes.
Ce sont donc les vignettes ainsi que cette vignette.
Nous allons faire en sorte que l'image prenne 100 pour cent de la largeur de sorte que sur la page de spectacle et la page d'index que nous voulons que cela se produise afin que nous puissions revenir en arrière et changer et upsy évaluer.
Nous allons donc commencer par sélectionner toutes les images à l'intérieur des vignettes.
Nous avons donc besoin d'une vignette parce que c'est une classe d'amorçage.
Et puis balise d'image avec l'espace entre eux qui est tous les balises d'image à l'intérieur des vignettes.
Et puis, nous voulons simplement définir la largeur à 100 pour cent juste comme ça.
Et si nous sauvegardons et rafraîchissons et allons à une page d'exposition, vous pouvez voir notre image prend maintenant jusqu'à 100 pour cent de cette vignette.
Ensuite, nous avons besoin de résoudre ce problème de rembourrage qui est vraiment facile à fixer ainsi où nous voulons nous débarrasser de cet espacement pour faire que nous devons sélectionner la vignette elle-même.
La vignette div et se débarrasser du rembourrage et il suffit de le mettre à zéro.
So Dot thumbnail rembourrage 0.
Enregistrer.
Gardez l'œil sur ce rembourrage.
Maintenant il est parti.
Et si nous retournons à notre page d'index, vous pouvez voir que ceux-ci sont également maintenant vider.
Nous n'avons pas de rembourrage là non plus.
Personnellement, je préfère sans rembourrage ici sans espace entre les deux.
Mais c'est une question de préférence personnelle et si vous ne voulez que l'espace de retour là-bas ce que vous pouvez faire ne s'applique pas ces styles ce style en particulier à chaque vignette unique.
Au lieu de cela vous pourriez donner sur notre page d'exposition vous pourriez donner cette vignette juste ici un ID ou une classe spéciale et alors vous appliqueriez seulement ce rembourrage zéro à cette classe ou à deux cette identification.
Mais je vais le faire à tous et puis l'autre question que nous devons résoudre est le rembourrage ici.
Donc, à l'intérieur de cette légende ful si nous l'inspecter, c'est la div que nous avons créé peut voir ici, c'est une légende div classe pleine.
Nous voulons ajouter un peu de remplissage là et le nombre que nous avons décidé dans la dernière vidéo était de 9 pixels.
Permettez-moi donc de fermer le con ..
Retournez ici et je vais juste sélectionner plutôt que tous les poulains de légende Je vais seulement sélectionner les pliages de légende à l'intérieur d'une vignette.
So Dot miniature espace légende complète et nous allons leur donner rembourrage de neuf pixels tout comme ceci sauver nous allons rafraîchir la page.
Voilà.
Nous obtenons cet espacement que nous recherchons.
D'accord.
C'est tout ce que je voulais faire.
Reprenons rapidement ce que nous avons accompli.
Nous avons fait un nouveau fichier SS nazi et nous avons mis cela à l'intérieur du répertoire public à l'intérieur des feuilles de style et finalement ils auront plus de feuilles de style un pour la page d'atterrissage en particulier et nous aurons également javascript qui vont ici aussi.
Et puis pour utiliser réellement le répertoire public, nous devons interagir Oui dire express pour servir l'annuaire public.
Et je vous ai montré ce soulignement souligner votre nom et la dernière chose est que nous l'avons inclus sur le fichier d'en-tête.