I’ve just finished a new theme called “Glass” and activated it on this site. This is my second attempt at a WordPress theme, and I re-used many of the lessons learned from my first WordPress theme. It uses a basic two-column layout with a minimal header and footer. The template is compliant with XHTML 1.0 strict, but I may convert it to HTML 5 in the future. It is also mostly valid CSS 3, although because CSS 3 is not finalized I did have to use some non-valid vendor-specific styles for cross-browser compatibility. Check the XHTML and CSS links in the footer to validate the site with the W3C validation tools.

The site is best viewed in Firefox 3.6 or an up-to-date webkit browser such as Google Chrome or Apple Safari. I did not worry too much about Internet Explorer compatibility, although I tested the site in IE 8 and it seems to render properly. Unfortunately IE does not support many of the new CSS 3 techniques such as box-shadow or border-radius, so drop-shadows and rounded corners will not be rendered. IE 6 users will see grey/green backgrounds to many of the images because I used .png files with transparency (IE 6 does not support transparent .png files), but the site should still be readable. Granted, pngfix is a viable option, but I did not want to use any hacks to make the site work for a browser that is nearly obsolete.

The “glass” effect is achieved using a large .png file that is about 60% opaque as a background-image for all of the main sections of the page. I created the image so that it would tile seamlessly; this required some careful positioning for the angled “highlights” in the glass. The “cut outs” in the glass for form fields and images are achieved by reversing the box-shadow effect and giving the fields the same background-color as the body. Pretty neat!

Here are some standard HTML elements to view how the theme renders them. Be sure to post your feedback in the comments!

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Strong text.

Emphasis text.

• List bullet
  • List bullet
    • List bullet

1. List number
   1. List number
      1. List number

Block quote. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Paragraph. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.