Mamy makietę tego, jak chcemy, aby wyglądały nasze strefy BuySellAds, więc zacznijmy budować to naprawdę. Witryna BuySellAds zawiera kod, który musimy umieścić w naszej witrynie, aby reklamy się wyświetlały. Kopiujemy i wklejamy to.
Próbujemy wyłączyć CSS, które BSA wstrzykuje do witryny, aby je stylizować (ponieważ sami sobie z tym poradzimy), ale niestety, jeśli teraz wyłączymy, to ma to również wpływ na witrynę na żywo, więc musimy po prostu walczyć z wstrzykniętym CSS na razie.
Resztę czasu spędzamy na pozycjonowaniu i stylizowaniu reklam tak, aby wyświetlały się tak, jak chcemy. Jest to dość łatwe, ponieważ mamy już wiele na miejscu, na przykład mieszanki stosów czcionek i kolorów i tak dalej.
W tej serii napotykamy na coś, z czym często się spotykamy, gdzie byłoby miło, gdyby @extendklasa istniała tylko w innym pliku, czego niestety nie jesteś w stanie zrobić. W tym przykładzie staramy się, aby element DIV z wstrzyknięciem BSA miał taki sam styl, jak .modulejest, co jest klasycznym przypadkiem rozszerzenia, ale niestety musimy skopiować i wkleić niektóre style.
Zastanawiamy się, czy flexbox może nam tutaj pomóc, ale zdecydowaliśmy, że jest na to za wcześnie. Ułatwiłoby to układ, a także dałoby równe wysokości. No cóż, umieścimy to na przyszłej liście życzeń.