# 89: Optimieren der Galerie-Leiste - CSS-Tricks

Anonim

In diesem Video nehmen wir einige Änderungen an der Leiste vor, die wir mit den meisten Funktionen der Galerie eingerichtet haben. Beim Design dreht sich alles um Optimierungen, nicht wahr?

Wir passen einige Polster an, um die Ausrichtung zu verbessern. Wir gestalten das Dropdown-Menü so, dass das angezeigte Menü etwas besser aussieht. Während wir dies anpassen, stellen wir sicher, dass sie einen großen klickbaren / tippbaren Bereich ( display: blockLinks) haben. Dies ist ein perfektes Beispiel dafür, wo die Stilinjektion von CodeKit sehr nützlich ist. Wir stellen sicher, dass der Rollover visuell stark ist, sodass klar ist, was Sie auswählen. Sehr wichtig in einem Layout wie diesem, in dem alles so ähnlich aussieht.

Wir machen einen kleinen WordPress-Trick, bei dem wir das title-Attribut aus den Tag-Links entfernen (die in diesem Fall schlimmer als nutzlos sind), indem wir eine Filterfunktion verwenden und nichts zurückgeben.

Wir fügen eine Senden-Schaltfläche hinzu, positionieren sie rechts von der Leiste und erstellen einen Schaltflächenstil, der im Kontext der Galerieliste funktioniert.

Die Galerie auf dieser Website ist insofern etwas einzigartig, als es einige Vorlagen gibt, die sich deutlich unterscheiden, aber sehr ähnlich aussehen müssen. Zum Beispiel die Homepage der Galerie und die Seite für Galerietaxonomien. Wir bemerken dieses Problem und nehmen uns etwas Zeit, um die Änderungen vorzunehmen, die erforderlich sind, um sie gleich zu machen. Wir verwenden einige Techniken, die wir in dieser Serie immer wieder verwendet haben, z. B. das Erstellen eines Includes für beide Vorlagen, damit wir uns nicht wiederholen.

Wir verbringen wahrscheinlich etwas zu viel Zeit damit, ratlos zu sein, aber eine seltsame Sache, bei der wir versuchen, entweder das aktuelle Tag oder eine eindeutige Zeichenfolge wiederzugeben - je nachdem, auf welcher Art von Seite Sie sich befinden. Es sind immer die dümmsten kleinen Dinge, die am längsten dauern.

Wir haben auch Probleme mit einer dummen kleinen Spezifität, bei der wir möchten, dass Links und Schaltflächen in der Kopfzeile etwas anders sind. Wir haben einen so leichten Kontakt zu Selektoren in diesem Projekt. Das ist normalerweise großartig, keine bösen Spezifitätskriege, aber es ist auch gelegentlich ein Schmerz, wenn andere sehr leichte Selektoren (niedrige Spezifität) andere überschreiben und Sie stärker werden müssen, als Sie es beheben möchten. So ist das Leben.