Well after a year of neglect, the MetaSkills.net blog has been reborn on Mephisto. Previously I was using Drupal and it finally got to a point where I was so deep into ruby that I did not even have the gumption to open up a PHP session to publish anything. The sad part is that I told myself that this PHP disdain would help me get off my butt and move to Mephisto. You know, eat my own dog food – obviously procrastination won out – but not forever. For the past week I worked hard to get the Meta theme for Drupal converted to Mephisto. You can use this theme yourself if you want, the source is available on my github and I am making updates often. Heck... feel free to fork the project and make some changes or let me know if you want me to incorporate them into mine.

The Meta theme was originally written for Drupal in late 2005 and converted to Mephisto in March 2008 for version 0.8, the Drax Edition. The theme incorporates quite a few publishing conventions which are listed below and in the section pages listed to the right. I must say that the Meta theme is not a web 2.0 accomplishment. The CSS and presentation is very '05. That said the theme is a technical accomplishment in that it uses zero tables for layout, on the down side, it does use a lot of PNG background images in the CSS to accomplish the soft edges and translucent effects. Be warned, if you choose to use the Meta theme, make sure your Apache expires settings are set right!

I would love feedback and will happily accept revisions and/or feature requests. The source for the theme can be found on my Github page.

• UPDATE: 03/21/2008 Added reddit link to blogosphere partial.
• UPDATE: 03/26/2008 Adding an attached image div on articles/pages.

The MetaTools

The MetaTools at the top of the page are just some simple user preference switches. They can choose to customize the width, font size and presentation color of your site. When a user option is selected a cookie is set that controls which stylesheets are on/off right before the body section of the page is loaded. The default values for these are set in the meta.js file at the top of the page. Feel free to customize these with the options listed.

Lightbox JS

The theme includes the lightbox image display javascript. For usage please visit the author's website at huddletogether.com. For an example, see my old Mac Mini NOC article.

Within a paragraph <p> tag you can use <code> tags to denote a command. When you do this, the text within the code tags will show up highlighted in a monospace font. For example... you must type in sudo port install ruby when installing ruby via MacPorts.

If you use the CSS class .external-link on an <a> tag, then that link will do two things. First it will show a small icon to the right that denotes the link will be opened in a new window. Second, when the page loads the MetaContent javascript class will add a target="blank" to the link so that it opens in a new window. The reason for this is that target attribute is not XHTML compliant.

If you use <pre> tags outside of a paragraph then the it will appear in a code sample box like the first example below showing some shell environment variables. However if you give the tag a command class like <pre class="command"> then the enclosing text will be presented in a similar box that shows that this command is a shell command by displaying a corresponding graphic.

  # My PATH Environment Variables
  export PATH="/opt/local/bin:/opt/local/sbin:/usr/local/mysql/bin:$PATH"
  export MANPATH="/opt/local/share/man:$MANPATH"
  export INFOPATH="/opt/local/share/info:$INFOPATH"

sudo port install ruby

The Meta theme incorporates CSS for Mephisto's implementation of the CodeRay library. To have mephisto use CodeRay to syntax highlight your code, wrap the code with <macro:code lang="ruby">code</macro:code>. The code will look like the example below.

1
2
3
4
5
6
7

  # Ruby 1.9 introduces BasicObject.
  # Use Builder's BlankSlate until then.
  unless defined? BasicObject
    require 'blankslate'
    BasicObject = BlankSlate
  end

If you want to use a <blockquote> tag, please put a <div> immediately inside of it to get the best formatting.

I believe that the purpose of life is, at least in part, to be happy. Based on this belief, Ruby is designed to make programming not only easy but also fun. It allows you to concentrate on the creative side of programming, with less stress.

Obviously the Meta theme uses a lot of PNG images for styling its structural presentation. Many of these had to be striped for IE 6 since that browser can not use PNG files natively in content nor CSS elements such as background declarations. Fortunately however, the Meta theme does incorporate a JavaScript routine that enables PNG support for Internet Explorer in all the content areas. Meanwhile IE 7 does support PNG images. In this case it will ignore the IE 6 JavaScript fix.

If you are using Internet Explorer 6, the image's shadow below it should feather out smoothly to the paper background of the page. Normally IE 6 and lower will show a PNG with a light blue background. If you are using Firefox, Safari and the like, great, PNGs are supported natively.

If you want a fancy border that mimics a photo with a white border and shadowed edges, use this code snippet around your image tag. Since this snipped is styled using PNG images with CSS, the shadows are not compatible with version 6 or below of Windows Internet Explorer. In this circumstance the meta theme will substitute a gif file instead and hence get rid of the shadow effect.

1
2
3
4
5
6
7
8
9
10
11

<div class="photobounding">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="bl"></div>
  <div class="br"></div>
  <div class="photoborder"></div>
  <div class="phototime">
    <img src="/files/yourpicture.jpg" alt="" width="" height="" />
  </div>
</div>

When using the snippet, please follow the rules below:

• Width of image can not exceed 523 pixels
• Width of image is less than 523, must use inline style on bounding +28 pixels.
• Width of image can not be less than 143 pixels
• Width has to be specified in the image tag
• Height of image can not be less than 220 pixels

Max Allowed Width - 523px

Here is an image styled using the photo fancy border snippet. In this example the width of the image has been specified to the max number of 523 pixels. The height has also been specified, but this is optional. When using the MetaTool width preferences above, this image will stay centered in the content area. Again, the image will stay centered in the page.

1
2
3
4
5
6
7
8
9
10
11

<div class="photobounding">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="bl"></div>
  <div class="br"></div>
  <div class="photoborder"></div>
  <div class="phototime">
    <img src="/files/meta-home.jpg" alt="Meta Home" width="523" height="268" />
  </div>
</div>

Less Than Maximum Width - 300px

Here is an image that is only 300 pixels wide. In this case we have to use a little bit of inline CSS to control the width of the bounding box. The width of the bounding box has to be 28 pixels larger than the image.

1
2
3
4
5
6
7
8
9
10
11

<div class="photobounding" style="width:328px">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="bl"></div>
  <div class="br"></div>
  <div class="photoborder"></div>
  <div class="phototime">
    <img src="/files/puppylove.jpg" alt="Puppy Love" width="300" />
  </div>
</div>

Less Than Maximum Width - 300px (aligned left)

Here is the exact same image as above, but this time its been floated left and put right before a paragraph tag. The inline CSS now also includes the float command and a margin-right command to keep the paragraph text from running into the image. If you want to, you can float the image right but the margin command should be changed to 'margin-left' to match.

Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis.

1
2
3
4
5
6
7
8
9
10
11

<div class="photobounding" style="width:328px; float:left; margin-right:20px;">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="bl"></div>
  <div class="br"></div>
  <div class="photoborder"></div>
  <div class="phototime">
    <img src="/files/puppylove.jpg" alt="Puppy Love" width="300" />
  </div>
</div>

One of my few New Year's resolutions was to blog often in the year 2006, in fact, I promised myself I was going to write at least one post every day. Well it's been two weeks since my last update and the world has missed some pretty good brain dumps from yours truly (sorry about that) but I have been keeping good notes and I do have great news about today!

Over the past few weeks I have been cooking up a storm in my digital kitchen with one of the best content management systems around, Drupal. This is the same CMS that runs the metaskills.net site and it has a good history for not just being a Blog or Forum software but an entire community platform, thus Drupal's tag line, Community Plumbing.