If you have objects that need to be aligned, select them and then Object > Group. This puts them in a group and they become safe from the alignment themselves; their center point is what is centered. Then use the selection tool or more informally, the black mouse. Then in the middle of the attributes bar, there is a black-square that allows you to specify alignment – either to the artboard or to the crop area. Choose the former. For a center alignment, use Horizontal and Vertical center align and that’s it. You might also want to ungroup your previously grouped objects, but that’s up to you.

The old front page did little to promote finding me online. As that page is directly visible on my business cards, in my email address and essentially is the #1 in Google Juice™ for “ryan rampersad”, it is important to utilize the landing and funnel people into other avenues of connecting with me.

The new design has some technical bonuses. It is based off of HTML5 with the NormalizeCSS. It’s so much easier to use than the ResetCSS of the days of yore. In fact, I wrote my own grids because after all the time I’ve spent trying to get frameworks to stop sucking, I realized it’s actually easier to calculate the sizes, paddings and everything myself. And the flexibility is infinite too, so it’s better this way.

The design high lights two aspects better: me and social. Me as in my huge name sprawled across the top and social as in my nice array of badges representing my socialite locations.

It’s not a big leap, but it was enough to look refreshed.

That is all.

Also, I fixed a couple bugs when post titles were long enough to form a second line. Sometimes, the title would end up overlapping itself.

Over the weekend, I’ve started working on new a new theme. It’s still going to be powered by the excellent hybrid theme but won’t rely on the hybrid classic child theme. The child theme has been a separate installation for a long time now and it’s time to move on from it. It’s changed a lot since the old days.

Here’s a quick preview of the new design. It’s not finished yet, but it’s getting there. It’s a breath of fresh air.

An example of the new Aside post format! (Click for full-size.)

You know what I think? It’s a little too white. I need some help with that.

The MDC page for the :last-child selector explains it the best.

The :last-child pseudo-class matches any element that is the last child element of its parent.

This can be useful in all sorts of ways. For instance, if you had a bunch of floated elements, you could easily clear the last one so that the page doesn’t go out of crazy. If you had a list and needed to adjust the padding on the last element so that it fits better, you can do that too. You can checkout my example as a jsfiddle too.

However, it should come as no surprise that older browsers don’t support this. No Internet Explorer supports this and other younger browsers like Firefox 2 or Safari 3 may not support it either.

Happy selecting!

Hybrid Original child theme updates

I love hybrid theme. I suck at designing so anything that makes it kinda easy to make this blog look halfway decent is great. It’s hard though to keep this old child-theme relevant though. The updates to it are few (although that’s not really a problem) and it seems like it’s become stale. That stale vibe probably something to do with me and my content though.

However, to keep the entire theme looking in time with the rest of the web, I felt like some new rounded corners were needed. The boxy theme that it originally was can be great is come settings, but I think it looks better for my use this way. The main post area and the widgets has a 10 pixel border radius while the navigation area has only 5 pixels, since they’re smaller.

But, I can’t really stop there. I need to make the text on this blog readable. It sucks reading this highly designed font (can you tell I’m not a designer, when I don’t know the real definition of serif and sans-serif?) Right now, the fonts are by default supposed to be Georgia, Times, Times New Roman and serif. Those might be great for a site introduction blurb on an introduction page, but for every single word in this blog? No, it’s terrible.

Fonts like helvetica, geneva and arial are all great fonts that are totally plain. I like plain and boring. But when replace the font, I run into the problem of the font size. Hybrid Original has it’s default post font size set at 16 pixels because it was meant for a serif font, with all sorts of fancy bits. It had to be huge to see it. To fix it, setting the sans-serif font to just 14 pixels, I solved that problem. However, there is another problem: it applies to everything. Instead, I want these plain fonts to only apply to the posts themselves but not any code blocks or blockquotes. Fine, I got it now.

I’m reasonably happy with this now. I have fixed the font I’ve hated for ages and I added rounded corners. Excellent. I hope you enjoy the new pleasing to the eye, more relevant, design.

Anyway, I always forget the syntax for the border radius property. It’s not hard or anything, but it’s not, rounded-corner: 5px or anything obvious like that. That said, it’ll be a dream come true when Webkit, Gecko, Presto and Trident all realize the unified and plain border-radius property without any prefixes.

Firefox 3.6+ (gecko)

-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Safari 4+, Chrome 2+ (webkit)

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

CSS3: Border Radius

Opera 10.50+ (presto), Internet Explorer 9 (trident)

You’re in luck. The cutting edge versions of Presto and Trident in Opera 10.50 and IE 9 support the prefix free border radius property.
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Of course, I wouldn’t leave you with just the border-radius property syntax. I’ll give you more than that. I’ll give you this very handy border-radius declaration generator from border-radius.com!

Enjoy your rounded corners!

As a hypothetical example, imagine you read my post about highlighting author comments with Hybrid from a week or so ago. What if you wanted to be more precise with your selectors, so you could target that list element like so: list item comment with administrator entry-author ryan which highlights the list element with the comment, adminstrator and entry author classes on it.

Doing this is painfully obvious in retrospect. I can’t believe how this slipped by w3schools. So how, now, brown cow? Easy. Please enjoy my silly examples with follow.

div.comment {padding: 5px; margin: 5px;}
div.comment.admin {background-color: #ff00ff;}
div.comment.conscript {border: 2px solid #ff3312;}
div.comment.user {border: 1px solid #a3a3a3;}

And some basic html.

<div class="admin comment">Hi there, from the admin! - ryan</div>
<div class="comment admin">Hello, from another admin! - chris</div>
<div class="conscript comment">So, having fun? - loyal conscript, emily</div>
<div class="user comment">of course I am! - user, joe</div>

Styling elements with multiple selector is easy. Just write the classes together, tag.class1.class2.

Happy styling.

mntbd javascript clock

What you’ll see there is my pretty neat javascript clock! It is something I made maybe three months ago. Before I released it, I had wanted to make it slightly better codewise. The clock is pure javascript and css, it even generates its own elements for the blocks. I used YUICSS in order to make it look consistant and of course the wonderful Mootools library to do all of that fancy javascript.

My plans for mntbd are a private uploading system and also a private shortlink system, which once coded, would be released to the public for people’s own private use.

This marks my return to blogging, at least, I hope.

Why do it anyway? It is to promote good standards for writing (x)html and using the web standards. Dustian Diaz has this on his site,

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

That sums it better than I can. For me, wordpress is taking care of it. I gladly support better markup and semantic correctness that we can try to achieve in the future. Not all structures have meaning, but at the very least, we’ll try.

Happy CSS Naked Day!