A Portrait of my 1 year old son

The Pacifier, a tool to make a baby sleep and stop crying.

Criss David Day

Yes, I do love vectors. Lately, I’ve been creating different illustrations that I will be using for a personal project. Below is an example. It’s an illustration of the Philippine Jeepney, the most common form of public transportation, in the Philippines of course.

Web Standards Compliant Jeepney.

If you’ve noticed on this post, the image has styled captions. A feature the new WordPress 2.6 has. I’m also integrating it on Una, the free WordPress theme that I’ve released lately. And speaking about Una, I’ll be releasing the latest, widgetized updated Una tomorrow, so be ready to download it once it comes out. You may subscribe to my feed so you’ll get updated whenever I make a new post.

Why is that a problem? See this, you’ve been coding this cool design for hours, making pretty damn sure that you are using valid XHTML. And then you install a script and suddenly all the valid mark up that you’ve coded for hours becomes invalid because of a tiny tag.

To use SyntaxHighlighter, you must enclose your code snippet with a <pre> tag and set a name="code" attribute. But name isn’t allowed for this tag anymore. You can also use the <textarea> tag but shouldn’t that be inside a <form>?

The Quick Solution

So here’s a fast, simple and mean solution that I did to make my XHTML code valid again. I know I’m not the first one who discovered this but I’m just here to share.

First, open shCore.js with your favorite code editor program. Find this line:

if(tags[i].getAttribute('name')==name)

and then replace it with the following code snippet.

if(tags[i].getAttribute('title')==name)

Save your file.

So instead of setting the name attribute, you can now use the title attribute which is 100% valid for the <pre> tag. I’ll be using this simple hack for quite sometime until the SyntaxHighlighter developer comes up with something more pretty.

I would love to hear your comments and suggestions about this hack.

This theme is a little advanced for beginner bloggers but it doesn’t mean they can’t use it. Before you download and install this theme, you might wanna get into the details below to see what you’re getting.

Update

The theme is now Widget ready! For those of you who have downloaded and installed the first release, you may download the latest version and just overwrite the files.

Demo and Download

The live demo for this theme is used in this blog. What you see here is powered by Una.

The theme is tested on WordPress 2.5 and WordPress 2.5.1. I haven’t tested it yet on lower versions of WordPress and I’m not planning to. If you want this theme then you better use the latest and safest WordPress package.

The theme uses valid XHTML and CSS so please use valid mark-up in your content.

Una WordPress Theme (670)

If you find this theme useful, please consider donating a small amount.

Una WordPress Theme Screenshot

Installation

Before you activate this theme, there are a few things you must prepare for.

Mother Set-up

• Go to Settings > Miscellaneous and enter these values for the Thumbnail size. width=195, height=155. And make sure the “Crop thumbnail…” is checked

Required WordPress plugins

• Download the Twitter Tools Plugin. Install and activate. Configure your settings like the image below.
  
• Download the Advanced Excerpt Plugin. Install and activate. Go to the settings and set the Excerpt length to 25 and uncheck the img

The above plugins are not really required to make the theme work, however, if you want to optimize the output or the look of this theme, you must install these plugins.

Setting up your avatar

• Create a 36px by 36px avatar image, save it as avatar.jpg and upload it to wp-content/themes/una/images/

You can now skip this part. Una will automatically fetch your avatar image from Gravatar. If you don’t have a gravatar, the default gravatar will show up.

Setting up twitter on your sidebar

• Open sidebar.php and modify line 5. Change the value of the username to your twitter username

Thanks to Efren for the tip. This one will work automatically now. It will fetch your username from the Twitter Tools settings.

Setting up the footer about info

• Open footer.php and change line 8 to your own self introduction text

Setting up the accompanying image for eash post

This step is optional. The theme will work with or without this one. That’s how flexible and user friendly it is. If you have no image for the post, that’s ok. The theme will run smoothly.

• Create a 580px by 215px image. This will serve as the main image on the main page. While on the Write Post page upload the image using the Add Image button.
• After the image has been uploaded, right click on the thumbnail (in Firefox Browser) and choose Copy Image Location.
• Close the media window and expand the Custom Fields panel. Enter a new key titled post-thumb and paste the image location under the corresponding value.
• Get the direct URL for the original image. Enter a new key titled post-image and enter the direct URL of the image under the corresponding value.

About & Licensing

This theme is absolutely free for the taking. All I’m asking is the footer credits to remain in tact. I request that any distribution of the Una theme out of this website be notified to the author.

Bugs and Known Issues

• Sidebar Widgets is not supported
• Non-transparent comment icons
• Footer not sticking at the bottom

To Do

• Add the caption style for WordPress 2.6

Theme Updates

July 26, 2008

• The theme is now widget ready.

July 07, 2008

• Updated sidebar.php and footer.php so that you don’t have to manually upload your avatar for it to show up.
• Updated sidebar.php so that you don’t have to open the sidebar.pohp file and get your hands dirty. The twitter username will be automatically fetched from the Twitter Tools settings.
• Fixed a few bugs

If you have downloaded the theme and you find any bugs please report it by using the comments section below. I would also love to hear your suggestions! Thanks!

WTF, 5 Months?

So why did this very simple design took me more than 5 months to build? The answer is really plain and simple. Revisions, revisions and more revisions. I know this sounds crazy but the hardest client in the world to please is yourself. Of course that’s not all. I have been very busy with my work and family.

So, what is this shit all about?

Well, this website will be a place for my ideas, thoughts and a stage to showcase my past and ongoing projects. I will be writing stuff that will be of interest to you like design, web development and Wordpress stuff. In other words, this will be a playground where I will share my random thoughts and things that I discover everyday.

Who are you?

Oh yeah, I forgot to introduce myself. My name is Dino Latoga. I have been weaving web designs for almost 6 years now. I create my designs and layout using mostly Fireworks, Illustrator and Photoshop. I convert my designs into XHTML and CSS using the latest Notepad ++. Before, I used to take the bus when I go to work but right now I only need to make a few steps from my bed to my workstation. I am currently a fulltime freelance web designer and Wordpress theme developer for E.Webscapes, a professional blog design studio owned by the great Lisa Sabin-Wilson. You can check out some of the projects I’ve done under E.Webscapes on their website.

This is a neat design. Are you thinking of giving away this WordPress theme?

Thanks. Yes, I will be giving away for free the very design and WordPress theme that you see here. Right now, it’s not yet available for download but in a few days, maybe tomorrow, the theme will be all yours for the taking.