Month: February 2019

CSS Bold Hover/Active States – An Alternative

Lots of other places suggestion using text-shadow to handle bold hover/active states. My client had a complaint that it made the text look blurry (which it absolutely does). Here’s my solution (written using general CSS selectors). Let me know what you think!

a:hover,
a.active {
  letter-spacing: -0.15px;
  font-weight: 600;
}

The letter-spacing is not perfect, and there is still a tiny sub-pixel of movement, but it was a compromise between actually-bold text and blurry-bold text. Adjust to your needs.

Drupal 7 – Customizing Main Menu Links

I spent a number of hours yesterday trying to figure out how to customize individual links for the main menu. Drupal 8 is a bit more straightforward, but it isn’t quite so obvious in Drupal 7. There are no template suggestions or theme hooks in the HTML comments when you turn theme debugging on, so it took me a while to figure it out.

Thankfully, with the help of PhpStorm and xdebug, I was able to pinpoint what template file to create: menu-link--main-menu.tpl.php

Here’s my code that allows me to replicate the menu links exactly. Then customize as you wish. 

  •