Thoughts from Mike Templeton

As a member of the internet that embraces the ideas of openness, transparency and sharing, I am always looking at other websites, blogs and services as an opportunity to expand my own knowledge. For the most part, all of my HTML, PHP, CSS, etc. skills have been self-taught. That means I’ve bought and read through how-to guides, watched numerous online tutorials and asked other experts in the field. Each of these represent great tools for the beginner, but my favorite way to learn is still to just dive into the source code behind a website and figure out how it works.

Tonight’s learning experience came via my task of updating the logo for my blog (at the suggestion of this video). I wanted to use a graphic for the header logo, but I also still wanted the text-driven headline for search engine purposes.

By default, WordPress adds the name of your blog (in my case, Mike Thoughts) into an H1 tag at the top of the page. The title of the blog, as listed in the Settings tab of WordPress, is what gets broadcasted across the web whenever new posts are added or when you get listed in Technorati. That blog title also determines what goes into the header of the browser window you are using, so simply changing it to “mikethoughts.com” probably isn’t the best idea.

With some ninja CSS code that I scooped from Bright Kite’s stylesheet and source code, I was able to replace the title with a graphic that resembles my URL exactly, keep the actual blog title the same and include an H1 assigned header tag for the official blog title that will help me out when people start searching for my site.

The source code for the page looks pretty normal. It has a header wrapper, a logo tag, the link for the logo and the website headline, just like we wanted. But how do you get your logo to show up instead of the headline text? That’s where the ninja CSSing comes into play.

The logo is handled fairly standardly, with an id tag and attributes for hyperlinks (the “a” part of the tag). This syntax tells the website to insert the masthead_logo.png image wherever the #logo div is included with an a href tag. The second part of the solution, and where the magic really happens, is the simple inclusion of a span tag with display: none as the attribute. Wrap this span tag around your blog title headline and it will disappear when viewed in the browser, but will reappear when viewing the source code.

Now that I’ve explained how Bright Kite got it to work, take a look at my files and see if you can’t figure out how I got my blog title working with the rollover image and hidden H1 headline.

Thanks to Daniel Scocco for making the YouTube video that spawned this small project and thanks to Bright Kite for helping me learn a few new CSS tricks to add to my arsenal.