#89: Tweaking the Gallery Bar

In this video we make a bunch of tweaks to the bar we have set up with most of the functionality of the Gallery. Design is all about tweaking, isn’t it?

We adjust some padding to make things line up better. We style the dropdown so the menu that is revealed looks a bit nicer. While adjusting that, we make sure they have a plenty big clickable/tappable area (display: block links). This is a perfect example of where the style injection from CodeKit is super useful. We make sure the rollover is strong, visually, so it’s very clear what you are selecting. Very important in a layout like this where everything looks so similar.

We do a little WordPress trickery where we remove the title attribute from the tag links (which are worse than useless in this case) by using a filter function and returning nothing.

We add a submit button, position it on the right of the bar, and create a button style that works in the context of the gallery bar.

The gallery on this site is a bit unique in that there are a couple of templates that are distinctly different but need to look very similar. For example, the homepage of the gallery and the page for gallery taxonomies. We notice this problem and take some time to make the changes needed to make them the same. We employ some techniques we’ve used over and over in this series, like making an include to use on both templates so we aren’t repeating ourselves.

We probably spend a bit too much time being stumped but a weird thing where we’re trying to either echo the current tag or a unique string – depending on which type of page you are on. It’s always the dumbest little things that take the longest.

We also struggle with a dumb little specificity thing where we want links and buttons in the header to be slightly different. We have such a light touch with selectors in this project. That is usually great, no nasty specificity wars, but it’s also occasionally a pain where other very light (low specificity) selectors override others and you need to go stronger than you would like to fix it. C’est la vie.