Blog: Styling

Enqueue Fontawesome in WordPress, without a plugin

Fontawesome for icons is … awesome.  The easiest way to use it is their CDN. It’s one less thing to serve from your hosting and, as it’s widely used, your site visitors may already have it cached in their browser (evidence here). In WordPress, to use the fontawesome CDN without using a plugin, and to use the best practice enqueue method, add this to your (child) theme’s functions.php   add_action( ‘wp_enqueue_scripts’, ‘prefix_enqueue_awesome’ ); /** * Register and load font awesome

Accessible font sizes

A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body. There are three solutions to counter this problem: Apply font-size to each element separately Remove monospace from the font stack and treat it as a

Menu Challenges 2

IE6 is broken. [sourcecode language=”css”] #menu ul.level2 li { display: block; } #menu ul.level2 li a { display: block; float: none; border: 1px solid transparent; /* Stops the box from jittering on hover */ margin: 0.25em 0px; padding: 0.3em 0.6em; background: transparent; color: #666666; font-weight: normal; } #menu ul.level2 li a:hover { background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x; color: #ffffff; border: 1px solid #f2683d; -webkit-border-radius: 3px; -moz-border-radius: 3px; } [/sourcecode] 2 major problems. There is a large margin on the

Menu Challenges 1

Ok, so I’m getting into my site now. The wrapper is in place, and I’m moving on to the menu: As you can see, this isn’t your ordinary set of tabs and is causing a number of problems for browsers. Rounded Corners The problem with this menu is that it’s got a curved highlight hover. There are 4 different ways to curve boxes: 1. Nifty Corners: Uses JavaScript to insert <b> 1px in height and reducing in width. PROS: Scalable,