News for July 2011

WP Theme Hackers

There’s nothing wrong with hacking WordPress themes. Not only is it a wonderful way to learn, but it can save you a bunch of time customizing your own theme. What I see all to often however, is not fully utilizing some of the wonderful shortcuts the WP core provides. For instance..

Say you want to add a special graphic, but don’t want to add it into WP’s built in media manager. All to often I see this..

<img src="" />

Sure that works fine but once you move your theme somewhere else that special graphic becomes broken! Try this instead.

<img src="<?php bloginfo('template_directory'); ?>/myspecialgraphic.jpg" />

Now many of you out there will find this elementary, but this is for those of you who starting out that don’t recognize this.. well this is to make managing your links much easier. That bloginfo('template_directory') template tag automatically links to your theme directory no matter where you move your files. And you should know that bloginfo() can be used for all sorts of things. I’m sure spotted it at the top <?php bloginfo('name'); ?> which displays the name of your blog. Or in the header.php file <?php bloginfo('stylesheet_url'); ?>, you guessed it! It adds a relative path to your stylesheet within your theme. WP themes are built on these tags and once you learn what is available you can really begin manipulating your site.

Check out the WordPress Codex for more information.

Posted: July 9th, 2011
Categories: Wordpress
Comments: No Comments.

Multiple CSS shadows? I had no idea!

Well it’s true that you learn something everyday!  I truly thought I had mastered the art of the CSS shadow.  We have the traditional box-shadow, the extremely helpful text-shadow, and of course all of their vendor prefixed counter parts for those browsers that haven’t quite caught up yet.  So if you didn’t know a traditional text or box shadow in css might look like this.

box-shadow: 2px 2px 10px #666;

That’ll give the object your styling a shadow that is 2 pixels down, 2 pixels right, 10 pixels of blur or smoothness (it’s the part that makes it look realistic), and a medium gray colored shadow.  What I didn’t know is you can take it a step further.

box-shadow: 20px -15px 30px red, -20px 15px 30px lime, -20px -15px 30px blue, 20px 15px 30px yellow ;

That will apply a crazy rainbow shadow. Do as many as you would like! Just place a comma after the first shadow and start another. Feel free to choose any color you want!  I feel like that should be published in more places as I’ve been doing box and text shadows for a long time and no one shared that with me until today!

Just FYI… if you’re on my portfolio right now reading this then you should know I’m using text shadows on the text text.. and even though its the text-shadow property and I’ve actually made it a highlight so the text looks inset.  I’m also using a box shadow at the very bottom.  As Bill Nye would say, “Now you know!”

Posted: July 3rd, 2011
Categories: CSS
Comments: No Comments.