WordPress.Fun

It’s hard to pinpoint what attracted me to this particular design. Was it the grungy look, the colors, the new style footer or its overall uniqueness? Whatever it was, I decided to begin my long theme development journey with WordPress.Fun. One great feature about the smashing magazine theme is that all of the source materials were provided. Armed with the psd and my limited design skills I decided that I first wanted to pick colors that were more to my liking. With the help of a designer friend, the colors you see were updated in the file and the development could begin.

Sandbox

I have been using the sandbox theme as starter wordpress code for sometime with client work, so I decided to begin my masterpiece there. After modifying the code and adding all the hook’s and divs that I like to use, the design started to take shape. I cropped, copied and rotated the textured backgrounds in order for them to repeat correctly (as this is a scaling layout) and used as many advanced CSS3 techniques as I could to produce front-end code I could be proud of. The only images used in the design are the four or so textured backgrounds and the colored footer transparencies. For the rest I used the border-radius, box-shadow, text-shadow and other advanced CSS.

That’s the overall gist of how we got here. I could go into more detail but I think that would be too much excitement for one post. I will now let you peruse the site and check out some of the new features. As always comments and suggestions are welcome and encouraged. One of the things I always wonder about blogs sites I visit is ‘what plugins the site is using’ so I will now leave you with a  list of the ones I have used on this site. Many hours of research went into picking them and I encourage you to check them out for your site.

Note: This list is current as of the day of this post. The list may change over time. I may keep an updated list on the site somewhere, but for now, this will do.

Plugins

• Art Direction – Per post styles for new age art direction
• CSS Naked Day – Automatically strips off stylesheets without editing themes during the Annual CSS Naked Day
• Domain Theme – Allows you to specify more than one domain name with your WordPress installation and associate a specific theme for each domain
• Easy Contact – Easy Contact is a simple, semantic contact form that utilizes the Sandbox design patterns
• Google Analytics for WordPress – Makes it simple to add Google Analytics
• Google XML Sitemaps – Generates a sitemaps.org compatible sitemap of your WordPress blog
• IM Online – Displays status for MSN, Yahoo!, AOL, Jabber and ICQ via onlinestatus.org
• Lifestream – Displays your activity from various social networks
• MobilePress – Turn your WordPress blog into a mobile website/blog
• Raw HTML capability – Lets you enter raw HTML in your posts. You can also enable/disable smart quotes and other automatic formatting on a per-post basis
• Sociable – Automatically add links on your posts, pages and RSS feed to your favorite social bookmarking sites
• SyntaxHighlighter Evolved – Easily post syntax-highlighted code to your site without having to modify the code at all
• Theme Switch – Use different wordpress theme for logged in user
• WP-MostCommentedPosts – The name says it all

I hope this will serve as a reference for people to get all of the the info they need in one place and not have to visit two or three sites. Without further adieu let us begin.

I want to start off by saying that I think retrofitting for older browsers (yes IE 6 and below are too old) is a bad idea. We should be moving forward with our development in CSS3 etc... while making sure the older browser are still readable. They do not necessarily need to look the same. Now, with that said, I work as a web developer and know that this idea is rarely accepted by designers and clients alike. I just wanted to get my feelings out there because that is the whole point of this blog. On to the method already.

Wait for it...

The CSS

* html #id {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}

yep! That's all it is. No fancy javascript, no special image name with transparency behind it, nothing. Throw that in your IE style sheet or right below your 'good browser' statement in your screen style sheet and you will be good to go. Remember: the path is relative to the page you are on, not the CSS file. So absolute path to the image is probably the best way to go.

Notes

As always there are some things to be aware of when using the filter method. If you make sure to follow this rule, you will save yourself a lot of headache. On the element your are using the filter. DO NOT set a position. On any element inside of the element with the filter, DO set position to relative.

(eg.) If your transparency is on your wrap div, do not set a position. Set position relative on your content div and all items within content will be OK.

Now your links and text will be clickable and selectable.

<div id="wrap">
<div id="content">
<h1>Site Title</h1>
<h2>Tagline</h2>
<p>Some <a>long-winded</a> content with a link</p>
</div><!--end #content-->
</div><!--end #wrap-->

#wrap {background: url(../images/image_name.png);}
* html #wrap {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}
#content {postion: relative;}

As with all other posts you have read about the filter method. The background image will stretch to fit the element, so there is no background-position usage etc...

If you are unable to use a separate (slightly modified) design to handle your transparency needs for IE then the above method will save you a lot of pain when dealing with them.

Below is the code for a snippet to add the above CSS to your style sheet easily with Textmate or e text editor

create a new snippet
add:

background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/${1:image_name}.png',sizingMethod='scale');$0

to the big block
Activation: tab trigger > iepng
Scope Selector: source.css

Further Reading

• http://www.hrunting.org/csstests/iealpha.html

As I have found with the twitter app, this should help to bring a more consistent schedule to my blogging.

Maybe this will get me to work on that design I have not worked on yet.

1. When a user resizes the text, the box will not expand.
2. You will need a new image for each different size of input you need.
3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image

In order to work through these issues and out clean scalable rounded corner form elements we will first begin by creating the HTML code for the input elements.

• <strong>
• <em>
• <span>
• <span>

These will provide the hooks our CSS will need in order to create the rounded corners. You can use any HTML tags you would like to surround the code as long as you can add a style to it.

The strong and the em tag will receive longer images that will account for and size changes on the input fields and text size increases. The other two images will just be images of the corners. The two longer images will need to have a transparent background for the color inside the lines. If you have a non-solid color background just make the bottom left image have the background and the top right image transparent.

The CSS

strong {background: url(/images/input-bottom-left.gif) no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong em {background: url(/images/input-top-right.gif) no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong em span {background: url(/images/input-bottom-right.gif) no-repeat 100% 100%; display: block; float: left;}
strong em span span {background: url(/images/input-top-left.gif) no-repeat; display: block; float: left;}
input, select, textarea {margin: 1px 3px; border: 1px solid #fff;}

The HTML

<form>
<fieldset>
<legend>Rounded Corner Form Elements</legend>
<label for="txtFirstName">First Name:</label>
<strong><em><span><span><input id="txtFirstName" maxlength="50" name="FirstName" size="25" type="text" /></span></span></em></strong><br />
<label for="txtLastName">Last Name:</label>
<strong><em><span><span><input id="txtLastName" maxlength="50" name="LastName" size="15" type="text" /></span></span></em></strong><br />
<label for="txtaraComment">Comment</label>
<strong><em><span><span><textarea id="txtaraComment" cols="50" rows="10" name="Comment"></textarea></span></span></em></strong><br />
</fieldset>
</form>