Oct 22
By Land, Sea or Air – A travel blog based on the MyKipple project
We’ve been talking about taking a road trip through the USA for a long time, so when my TV job ended in October we decided now was the time. And in true blogger fashion, a road trip required a dedicated blog just for that and nothing else. This also presented an opportunity for me to show people how far you can push the MyKipple.com design I created for my new book Sams Teach Yourself Micrsoft Expression Web 3 in 24 Hours.
The result was ByLandSeaOrAir.com – a WordPress based site with a theme that utilizes all the tips and techniques showcased in the book. Fact is if you go in and lift out all the code and graphics from the new site you’ll see that it matches the final project in the book almost line by line.
So the site serves two purposes: To tell the world of our travels and to show that there really is no limit to what you can do once you understand the principles behind HTML and CSS. Enjoy.
Aug 17
Why a CSS Reset should be at the core of your stylesheet
The CSS Reset is a little known and often overlooked tool in web design that makes cross-browser and cross-platform compatibility a lot easier. It also ensures that you start with a clean sheet when building CSS-based web sites, whether they be single pages, static sites, WordPress sites or anything else. In my view the CSS reset is so important that web designers, even those just starting out, should use it at all times and make it the foundation of any and all style sheets they create. In fact the employment of the CSS Reset is a main tenant in both my books on Expression Web 2 and Expression Web 3 and is the basis of all my own design projects including the free WordPress theme Typograph.
Why do I need a CSS Reset?
If you’ve never worked with a CSS Reset before I can pretty much guarantee that the question you are itching to ask is “why do I need a CSS Reset”. After all, you’ve designed or worked with numerous CSS-based sites in the past and even though they didn’t have a CSS Reset they work just fine. Right? Well, let me ask you this: If you’ve ever tried to design a site from scratch using CSS, and you’ve tried to make it cross-browser compatible, you’ve probably noticed that your styles don’t always look the same in different browsers even though they should. In most cases this has been a Internet Explorer vs. the rest type of battle and you’ve probably written it off as such and just picked a side. But that’s not the only, or right for that matter, solution. If you run into a browser incompatibility issue where CSS is concerned, it’s more often than not due to the fact you haven’t properly defined your styles leaving it up to the respective browser to make guesses as to what you want the site to look like.
To put it in simpler terms: If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead. And since different browsers have different parameters your site will end up looking different depending on what browser you use.
What does the CSS Reset do?
As the name suggests, the CSS Reset resets all the default CSS parameters to a neutral position thus overriding any predefined assumptions at the hands of the browser. That’s a bit of a vague explanation so I’ve made a visual example that illustrates it perfectly:
The image above shows the same piece of basic HTML displayed when no CSS is defined and when the CSS Reset is applied. It is pretty obvious what happens: When you create a HTML page with some basic tags like <h1>, <p>, <blockquote> and <ul> without defining the styles of these tags with CSS, the browser applies its default stylesheet to these tags. But like I said earlier, different browsers have different standard stylesheets and as a result the page won’t look the same across all browser. And although this isn’t really a big problem when we’re talking super-basic stuff like what is displayed above, it becomes a serious pain in the neck when you create complicated CSS layouts.
So all I’m doing is creating more work for myself?
Unfortunately the gut reaction from a lot of people when they see the image above is “Oh crap! Why would I ever do that? I just create tons of work for myself.” Well, that’s partly true: With a CSS Reset applied you do have to manually define all your styles unless you like the reset look (I don’t). But on the bright side that also means you are now in complete control of every aspect of your site and nothing is left to chance any more. And in my book the former far outweighs the latter.
If that doesn’t convince you, consider this: Before I startet using the CSS Reset in all my projects, I spent a lot of time trying to jury rig my code into playing nice in all browsers. This often included using IE hacks and JavaScript. After emplying the CSS Reset I only rarely encounter these problems, and when I do it’s usually because I made a mistake somewhere.
Alright, I’m sold. How do I start using the CSS Reset?
There are several CSS Resets available out there. The one I use is CSS guru Eric A. Meyer’s Reset Reloaded. It seems to be the most comprehensive reset and it is constantly being updated. To employ it I simply copy the code from the site and paste it in at the very top of my stylesheet. When it comes time to work on my own styles I make new ones leaving the CSS Reset intact. Cascading Style Sheets work as a cascade from the top down which means with the CSS Reset on top the browser will first read all the reset styles and then whatever styles I define below and apply them in order. That way the layout is guaranteed to be clean of browser junk and only shows my style code.
That really is all there is to it. So employ the CSS Reset and go forth and code.
Nov 27
Typograph – new WordPress Theme
I’ve closed the comments for this thread to consolidate all comments for the different versions of the Typograph theme in one place. Please leave all your comments at the Typograph page which can be found by clicking here.
I’ve been planning to launch a proper free WordPress theme for some time now but there have always been major projects in the way. This week I had some extra time so I sat down and developed the Typograph theme which is now available for anyone to use. For free.
The theme is as simple as possible with clear separation between the content and the sidebar, a calm gray and white design with popping red links, a tabbed sidebar box with navigation, search and other important elements and some other styling for increased readability and better navigation. It complies with the new WordPress standard elements like image captions and Gravatars and even has a customizable ad space directly under the first post on the front page. And last but not least, Typograph is fully XHTML and CSS standards compliant.
Download the Typograph theme from the WordPress Theme Directory here!
See a demo of the Typograph theme here
No images
Right before I began the design of this theme, Spyremag published an article about 5 ways to break your design habits, one of which was to design a site using no images. Seeing as I’ve become somewhat obsessed with CSS over the last year it seemed only appropriate to follow this advice and create a no-images theme. Not only would this be a bit of a challenge because I ususually use a lot of images to make my designs more vibrant, but it would also put my coding skills and my understsanding of WordPress themes to the test.
Styled from scratch
Over the last several months I’ve been refining and customizing a copy of the Sandbox WordPress theme to develop an ideal platform for quick and easy WordPress theme design. The plan is to create a “God Theme” if you will that has all the bells and whistles installed and ready to go so that new theme design is quick and efficient. To put the alpha version of this foundation theme to the test I used it to style Typograph from scratch.
Tabbed box navigation
When I created the new theme for Design is Philosophy I spent quite a bit of time developing and perfecting a JQuery and CSS based tabbed sidebar box that would contain navigation as well as other useful information for the visitor. For Typograph I further developed the tabbed box and isolated it in it’s own file to simplify customization for the user. It can also easily be deactivated by commenting out a single line of code in the sidebar.php template. The tabbed box contains navigation for pages and categories along with an about section, RSS link and search box by default. It takes standard WordPress tags and can be customized to include pretty much anything by editing the tabbedBox.php file found in the theme directory.
Download the Typograph theme from the WordPress Theme Directory here!
See a demo of the Typograph theme here
Nov 18
Highlight current page in WordPress menus
WordPress has a lot of built in functionality that you can tap for advanced customization. One of these which is often ignored is the ability to highlight the current page in menus with CSS. By default, WordPress assigns a special style class to the button that points to the current page. By styling this class differently from the “regular” classes the current page button is highlighted.
In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.
Identifying the custom styles
If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:
<div id="menu"> <ul> <li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.
By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:
page_item styles:
.page_item a { float: left; display: block; background: url("img/right-over.png") no-repeat right top; padding: 6px 15px 7px 6px; text-decoration: none; font-weight: bold; color: #DDDDDD; text-transform: uppercase; } .page_item a:hover { color:white; }
current_page_item styles:
.current_page_item { float: left; background: url("img/left-selected.png") no-repeat left top; margin: 0; padding: 0 0 0 8px; } .current_page_item a, .current_page_item a:hover { float: left; display: block; background: url("img/right-selected.png") no-repeat right top; padding: 6px 15px 7px 6px; text-decoration: none; font-weight: bold; color: #C7532D; text-transform: uppercase; }
If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?
Assign dynamic styles to hard-coded menus
To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.
If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:
<?php wp_list_pages('title_li=&depth=1'); ?>But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.
To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:
<?php if (is_page('home')) { echo "current_page_item"; }?>and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:
<div id="menu"> <ul> <li class="page_item <?php if (is_page('home')) { echo "current_page_item"; }?>"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9 <?php if (is_page('Lesson Files')) { echo "current_page_item"; }?>"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11 <?php if (is_page('About the Author')) { echo "current_page_item"; }?>"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13 <?php if (is_page('FAQ')) { echo "current_page_item"; }?>"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15 <?php if (is_page('Further Reading')) { echo "current_page_item"; }?>"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17 <?php if (is_page('Contact')) { echo "current_page_item"; }?>"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.
