teddy-risation » CSS

25 Out of the Box Tutorials powered by jQuery and CSS3

Terry — Fri, 02 Apr 2010 00:09:53 +0000

Here is a list of 25 amazing tutorials that are powered by jQuery and CSS3. jQuery has recently released its latest version (v1.4) and some of the tutorials are making good use of the new functions (such as passing attributes to jQuery). Net Tuts Plus have compiled a handy list of new jQuery features that designers should be looking at. Oh, and speaking of CSS3, it allows simple CSS animations, rounded corners, text and box shadows and a lot more features initially unavailable in CSS2.1.

Now let’s forget about IE6 and have fun!

Random

Related posts that might interest you:

Borders – An experiment with border widths

Terry — Sun, 28 Feb 2010 16:32:42 +0000

After reading the fantastic writeups about manipulating CSS borders to create graphics that are impossible with grid-like elements on Slantastic and Border Slants, I was inspired to do a simply followup demo page on the capabilities of CSS borders. I started working on this secret, clandestine page on my domain since half a year ago but I didn’t had enough time to complete everything. Finally came my long-awaited semester break, when I can devote a day’s time to finish this demo page.

You can view the demo page here. Do not right click on the link, simply do a click-through.

view demo: Borders - An experiment with border widthsVersion 1.0 \ File size: 40.54 kB \ 447 downloadsA demonstration page on how we can manipulate CSS borders to create custom shapes and polygons.

Borders - An experiment with border widths

The visual elements shown in the remainder of this post will be drawn purely using CSS only – not images. Feel free to dissect the code for reference. It helps a lot if you can try imagining how you would want to construct a specific shape before referring to the source code to see how it is done.

The Basics

The principle behind creating custom shapes using border is the interface between two borders:

By increasing the border-width, the slant becomes more apparent. We can manipulate each of the border-widths to create the gradient that we want as well.

Triangles and Trapeziums

It becomes clear that we can create triangles and trapeziums based on the observation of such behaviours at the interface of two borders.

Trapeziums are possible too, if we increase the width of the empty

from zero to a positive numerical value:

Regular Polygons

Creating regular polygons require some calculation. Their parameters can be found in the source code, and you can scale the border-width and width properties in order to scale the entire polygon proportionately.

From left to right, we have triangle (trigon), quadrilateral (tetragon), pentagon, hexagon and heptagon. The demo page will have more regular polygons, up to decagon.

Creating Graphics

For more examples, refer to the demo page: Borders - An experiment with border widths.

One advantage of creating visual elements using CSS (and in this case, CSS borders) is that your visitors will not have to download images that are huge. Of course, this technique is usually experimental because certain image extensions such as .png and .gif will greatly reduce the size of images (given certain conditions) and that it is sometimes not feasible to code an image from ground up.

What you see on the left is one of the examples demonstrated on the demo page. The Christmas tree is actually constructed from 10

elements vertically stacked on top of each other. The topmost

has its borders modeled after a triangle, while subsequent

s have their borders modeled after trapeziums. Their border-width, margin and width has been adjusted so as to give the tree a tapered out look towards the bottom. I finished off the tree with a brown stump made from a single

again.

And there you go – the code for the lovely, purely CSS Christmas tree (all encoded in inline CSS so that you can understand how it works – and for the sake of clarity). Do remember to wrap it around a box with a defined width.

One may also explore other options of using CSS borders in creating visual elements – for example, you can use jQuery insert the necessary code into the start of list items, bulleting each item with a tiny triangle created by CSS borders. Of course, this method will be frown upon by semantics purists, but I’m going to leave the discussion open.

Credits, Resources & References

I would like to thank the genius designers who conceived the idea of creating custom shapes using border slants. It never came across my mind until I read Slantastic and Border Slants. I have also learned how to code for border slants from there too.

There are several aspects of the application of border slants that I fail to cover in this article and my demo page. The reason is simple – because they have been done before and little follow-up is needed. Try checking the two links above – they provide intricate explanation on how wrapping text around a diagonal shape is possible. Go figure!

There are a lot more techniques and ideas that I have included in the demo page. I did not include them in this article to keep it short and palatable :)

Your thoughts?

What are your thoughts on the manipulation of CSS borders and their applicability? If you have any questions regarding the demo page, feel free to post your questions in the comments below. I will be more than happy to help!

Random

Related posts that might interest you:

WP theme: teddy-risation Theta

Terry — Sat, 23 May 2009 18:25:39 +0000

teddy-risation Theta released!

So here we have, the eight teddy-risation WP theme in it’s fully glory. Just like the other write-ups that I do for my previous themes, I will be doing one for this one as well, no exceptions. Not only does this entry helps to catalogue my list of themes and my insights of designing them (I have goldfish memory, so a backup medium for my cranial storage is needed), but I hope it will also inspire others as well.

teddy-risation Theta is coupled with the tiny rebranding movement I’ve embarked on, to ditch the funky (and not very impressive) capitalised letters in the site name and my nick as well. Known by the pseudonym ‘teddY’ in the past, I am now changing back to ‘Teddy’ or as simple as it gets, my real name, Terry. You can address me with both names now, I really don’t mind, no worries!

This theme took the longest to design – the date of its conception was actually somewhere during and after my first year final semester examinations. Ideas always have to came at the wrongest of all wrong times, don’t they? I did a simple sketch on what I wanted on paper, and moved on to my studies. When the exams ended, I immediately started materialising the layout in Photoshop, starting from the header section.

Theme Hybrid

Theta is actually a child theme of Theme Hybrid. It is a free WP theme and you can modify it in anyway you want, or even create your own child themes that rely on the Hybrid framework. I did modify a few core files on the Hybrid theme, but other than that, all the styling and customisation you see here leaves the original Hybrid files completely untouched. That means that I can easily update my theme when Hybrid issues one, without breaking my child theme.

In the past I’ve always used Sandbox. However, I’ve decided to try out other new WP themes because sadly, the Sandbox creators have paused the development of the theme and the future is rather bleak. I have to say that I really loved working on Sandbox, Andy and Scott – I really appreciate the support and help you’ve rendered to users of your theme and your dedicated effort. Because of that reason, I realised that I have to start learning how to work on other WP themes – out of the many available options like Thematic, WP Framework, Whiteboard and The Buffet Framework, I’ve chose Hybrid… for just one reason – the main colour scheme is greyish blue. What a biased choice, isn’t it?

Hybrid was a little hard to tame at first, I find myself constantly referring to different files in the library for hooks, filters and etc. The styling was a little more challenging to do, because unlike Sandbox that came in plain and simple, Hybrid has a basic stylesheet built into it and it takes time to figure things out. One thing I really love about Hybrid is that it has wonderful typography – while I have inherited the font family from the previous theme, the spacings and arrangement of text-based elements are all inherited wholely from the 22px stylesheet. Hybrid comes with a few different stylehsheets – 18px, 20px and etc, indicating the line height. I wanted my text to be more spaced out, so I picked 22px.

Randomity, and the essence of it

This theme incorporated some interesting randomity in it – the gallery images in the gallery window changes everytime you load it – not only does the array of images displayed changes, their arrangement is also jumbled up upon each reload. I’ve combined several shuffling and randomising techniques to achieve that, maybe I’ll blog about it later :) if you want it, just tell me.

Another one is the Twitter users that I follow – I have their avatars displayed in the sidebar. I have a lot of them, but I only randomly display 14 of them while the rest is hidden so that I do not clutter the sidebar up. It’s a lot of PHP stuff that I had to do, but it was fun! I spent one whole day just doing the PHP part for the Twitter widget. Tedious, but very fun and enlightening.

Fonts and sIFR

The main typeface I use for the headers and the introductory paragraph is Alte Haas Grotesk by designer Yann le Coroller. The fontw as featured in the previous week’s Fonty Friday feature, which I run on a weekly basis. For the logo, I used Colaborate Regular by Ralph Oliver du Carrois.

Since not everyone has Alte Haas Grotesk installed in their computers and that the CSS support for @font-face is rather patchy, font replacement methods, whether is it by flash or by images, are preferred. I did a little research and decide to settle for sIFR – Scalable Inman Flash Replacement. I’ve made sIFR to only replace post and page titles, so that I won’t overload your computer and make performance sluggish – anyway, it’s really, really not recommended that you use sIFR for a big chuck of text! Keep it to headers only :)

Javascript-powered feautures that gracefully degrades

One feature that I put in a lot of effort struggling to make sure that it gets incorporated into the theme is gracefully-degrading javascript-powered features when javascript is not available or disabled. As you know, many sites nowadays are powered by javascript and many of them actually breaks when JS is disabled – a good example will be YouTube – try disabling JS in your browser and see what happens.

Most of the effects you see here are powered by jQuery, a very light-weight javascript library that helps you to achieve many things that requires advance knowledge of javascript in the past. Simple actions like the toggle effect in the comment form (try clicking on the labels and see what happen) and in the Twitter section on the sidebar (visible on main page only) are easily achieved by knowing just a little bit of jQuery. Lovely, isn’t it?

jQuery also allows me to select last-child of a parent element – the :last-child pseudo-class is not very well supported in every single browser (hint hint, IE6) and so we can actually use jQuery to insert a class to the last-child. If JS is disabled, the visual impact is not too obvious to be seen while in most JS-enabled visitors, it helps to achieve a uniform, consistent appearance of list items and etc.

jQuery is also used to create the fading effect of the header navigation links, as well as the Next and Prev buttons of the gallery window in the header. I might be writing a little more about how that is achieved in the future, but I shall not bore you to death in this entry.

I’m still learning how to use jQuery, so in this theme’s functions.js file, I’ve also added annotations and urls to useful websites for first-time jQuery learners. They are excellent resources where one can start learning jQuery, with little prior knowledge of any programming languages.

The 404 page

For this theme, I’ve also designed a cute little 404 page that people will land on if they’ve followed a broken link (it can be any, but I ‘m giving you this for convenience’s sake). Check it out!

Improved gallery

Last, but not least, the Gallery page has been improved upon too. Without the obstruction of the sidebar, there’s now more space for photos, heh!

That’s all!

I guess I shall keep this post short. If you have any questions, feel free to shoot! Anyway, I have a question for anyone who’s reading this: what WP themes do you use for your theme framework? Do you create a theme completely from groundup, or modify existing themes (like me) ?

Related posts that might interest you:

8 Javascript solutions to common CSS problems

Terry — Mon, 23 Mar 2009 20:34:45 +0000

8 Javascript solutions to common CSS problems

Jean-Baptiste Jung shares 8 ingenious jQuery-based javascript solutions on CatsWhoCode.comto circumvent the common CSS problems. While CSS is a semantically correct way of styling your webpages, not all popular browsers (like IE6, I know this comes very naturally for a designer) support CSS3 and there’s always this problem of cross-browser compatibility. Little do many people know that Javascript can actually fix a myriad of CSS problems – you’ve never thought they go along well together, do you?

From important fixes like the jQuery PNG transparency fix to the absolutely evil IE6-crashing script (so as to scare visitors into switching browsers, or is it more like scaring visitors away? That’s up to you), this article is a must-read for designers and coders alike.

Related posts that might interest you:

Easy Display Switch with CSS and jQuery

Terry — Sat, 21 Mar 2009 17:39:51 +0000

Easy Display Switch with CSS and jQuery

As javascript libraries becomes increasingly popular among designers and website visitors alike, your daily visitors are now expecting more than just static pages – they would be thrilled to see interactive, fluid pages. In 2006 A List Apart published an article on the holy grail of webdesign, which involves coding for fluid layouts in CSS. With the popularity ofÂ javascript libraries like jQuery, Soh Tanaka has written an excellent tutorial on teaching us how to incorporate fluid display options on our pages – allowing visitors to switch between different forms of display (think iTunes libraries). An interesting concept that is actually very simple, and can be easily done with a few lines of jQuery and CSS.

Basically, the technique behind the display switch is simply to style the list containing the gallery items separately – one in the thumbnail form and the other in the detailed listing form. And then you will use jQuery to add/remove a class that is appended to the list, to achieve the different appearance all coded by CSS.

Related posts that might interest you:

5 Ways to Instantly Write Better CSS

Terry — Wed, 25 Feb 2009 13:41:18 +0000

Five Ways of Writing Better CSS

Recently I read about an article that teaches web designers five ways to write better, neater and cleaner CSS by Trevor Davis, after following a link in a tweet.

In case you’re still wondering what CSS stands for, it actually means Cascading Style Sheets – the stylesheet part is easy to understand. CSS is created with a notion to separate content and styling, which explains why the ,

and etc. tags are deprecated and no longer accpeted in (X)HTML. The cascading part is a little tricky – it means that you can actually override certain properties in the stylesheet by being more specific in your selectors – for example, span.highlight can be overridden by div.content span.highlight if the is located within

Back to the post itself, here are the five ways Trevis recommended, with my personal opinions/comments. Of course, for more details you will have to follow the link (or else I’ll be slapped with a plagiarism charge):

Reset

I never had a habit to use a reset stylesheet in the past, and the different default styling applied to elements (such as a certain margin and padding for the tag, for example) drove me mad. It was until Jeff from Perishable Press wrote about them that I realized how important they are. For the moment being, my blog is using the 960 grid reset since I’m using the grid system as part of my layout. In the past, I’ve used Tripoli reset, and it was quite a good experience!

Alphabetize

I don’t think it serves much purpose, but the perfectionist side of me forced me to alphabetize my entire stylesheet as much as possible, except for the dimensions of the element (width and height), which I will place last.

Organization

I do organize my style sheet a little, just in case any curious person would like to took a peep at it. I divide my stylesheet into several sections. Although they don’t help much with navigation around the style sheet (I will just use the search function instead), they do keep things in order.

Consistency

Now the tricky part. I remembered reading a debate on what kind of way people prefer to organize their stylesheet – single line vs multiple lines. Let say we take one from my current style sheet, the single line way will look like this:

.entry-title a span.title-comments {background: transparent url(images/comment_bubble.png) 0 0 no-repeat; color: #cccccc; font-size: 90%; letter-spacing: -2px; margin-left: 4px; padding: 2px 2px 2px 16px;}

A multiple-line one will look like this instead:

.entry-title a span.title-comments {
   background: transparent url(images/comment_bubble.png) 0 0 no-repeat;
   color: #cccccc;
   font-size: 90%;
   letter-spacing: -2px;
   margin-left: 4px;
   padding: 2px 2px 2px 16px;
}

Of course, the first method saves you the line-breaks and your finger from all the scrolling madness, while the second method makes error-spotting easier – when you place the code under validation test, and when an error is found on a certain line you will immediately know which one went wrong.

Start in the right place

Just like what Trevis puts it, “Donâ€™t you dare touch your stylesheet until you have written your markup!” It is imperative that you get your markup right first – which includes ditching the hated table layout, removing deprecated elements, checking your file with a validator before hand – before moving on to CSS.

Related posts that might interest you:

Compacting contents using Glider script

Terry — Fri, 20 Feb 2009 23:25:17 +0000

Thanks to Iva for requesting for this tutorial! Finally I have something to add to my long-dormant list of resources. Iva asked me over Twitter whether could I write a tutorial on how I’ve incorporated the famous Coda glider effect on my blog header. The basic function of the glider script is to replicate the effects of the Coda glider. Gliders, like accordions, are very useful in compressing/compacting contents in an area of a fixed size, and animate the process when a visitor switches between the different ‘panels’ (which involves gliding, hence the name).

My previous themes were plagued with the problem of overcrowding, where I attempt to squeeze too much information into too little screen real estate space – resulting in a rather nasty, visitor-unfriendly clutter and confusion. When I redesigned my blog, I kept that problem in mind and I was very impressed when I saw The Wojo Group‘s glider in action. It then led me to discovering the original synthesis of this idea at Coda, and to the Google Code page of Glider.js.

What is glider.js?

Glider.js is a rather lightweight javascript effect that weighs around 4kb uncompressed. So far I’ve not seen much development of the script after it’s previous update in May 2007, but for the moment being, it doesn’t have much issues with most major browsers (including IE6, surprise!). I’ve tested it in Firefox 2 and 3, Safari, Opera, Safari and Chrome, and it excelled in all these browsers. It is downloadable over here.

So are you ready to continue with the tutorial? Goodies after the jump, I promise!

Using the glider

So now let’s move on to the part that lets you implement your own glider. There is a demo link at the end of the tutorial, but it’s always better to read through the details because that’s where the majority of the explaning goes to.

What you will need

Download the Glider.js and if you don’t have, Prototype.js and Scriptaculous.js. Of course, if you’re using WordPress, you don’t have to worry about the latter because they’ve been taken care of by your WordPress installation. It’s safer to check your blog header and see if they’re loaded. If they’re not, you don’t need to actualy download them – you can simply load Google AJAX Libraries to make things easier:

*Note: It’s absolutely important that you load the glider.js file after loading prototype and scriptaculous.

Alternatively, if you prefer to use the google.load function:

For WordPress users who prefer to place their glider.js file in their theme’s JS directory (recommended, and you can use any other names, just be sure to change the ‘/js/’ into something else – ‘/name-of-directory/’), replace the last line above with:

For more information on the Google AJAX Libraries, you can read Jeff’s writeup.

Prior to setting up the glider

Glider.js relies on using classes to identify the individual gliders, so you will have to make sure that the following classes are unused in your layout (except for elements meant for the glider):

scroller
section
controls

*Note to advanced coders: these classes are identified in the javascript file, so if you’re planning to use other classes, do keep track of the changes and replace the class names in the file with relevant ones.

Basically, you will have a

to serve as a window around the content, and then

to wrap around each individual panels (which will be glided over when the event is initiated by a user mouseclick on a link – we’ll come to that later) and then a

to house the control tabs. For some designers, you might want a forward and backward button to be present – if that’s the case, you can make do without the

part. Here’s a summary of what the individual classes serve as:

scroller – serves as a window in which sections will appear, one at a time
section – wraps around contents in individual panels in the glider
controls – wraps around the tabs to allow navigation to any panel in the glider

A very basic layout, as evient in the blog header in the current design, can be seen below:

Basic layout of a glider.

The basic idea is that we will have the scroller to be of the same width of the panels – it will be the ‘window’ in which the each section, or panel, is displayed. For this reason, all sections have to be of the same width. When the animation is not running, you will only see one section/panel in the window, and when you click on the navigation menu, the glider effects kicks in, fetches for the other section located outside of the window (see screenshot above) and repositions the new section in the window. That’s a mouthful! Now take a deep breath and try to digest it *burp*

And this brings us to the next section. Read on!

Step 1 – Adding an overall and a content wrapper

I have a habit of wrapping huge, chunky sections with a wrapper, so for this case, we will be using

...

Now we add in the scroller, and then the content wrapper that wraps around all the individual panels. We will also need to append the script that specifies the glider, after the entire glider element.

...

*Note: If you have a different id for your glider container, you will have to make changes to the script – change the ‘glider’ to ‘your-own-id‘. The same applies if you want to vary the duration of transition/animation.

For the CSS, we want each section to be 500px wide and 200px tall. So we need to make the window of the same size too. In addition, we will make it such that the

is of a very huge width (to contain all the scrollers):

.scroller {
overflow: hidden;
width: 500px;
height: 200px;
}
.content {
width: 10000px;
}

Everything cool so far? Now we move on to the second step.

Step 2 – Adding in the sections

Now we’re done with the wrappers (div-itis alert, yes, but that’s unavoidable). We shall add in the individual sections. Let’s say we want to have 5 sections, each 500px wide and 200px tall:

...
...
...
...
...

*Note to those who are unfamiliar with CSS – ‘id’ and ‘class’ are two different things. A particular id can only appear in the entire document once – although modern browsers render multiple elements of the same id correctly, this should not be seen as valid XHTML. A class can appear multiple times in a document. We will apply a general style for all sections, so we target the class instead of the id.

To fix the dimensions of each section, we will have to turn to CSS for help:

.section {
float: left;
overflow: hidden;
padding: 10px;
width: 480px;
height: 180px;
}

Some really, really important notes:

Float the containers to the left so that they will be arranged horizontally.
Hide potential overflows so that it doesn’t screw up anything, just in case.
The CSS box model: the total, intended height of an element is the sum of all the margins, paddings AND dimensions specificed. So if you want to have a 10px padding for contents in all sections, the width has to be reduced by 2*10px = 20px (because we have left and right paddings) and the same applies for height (because we have top and bottom paddings). For more information, read the Box Model article.

Step 3 – Adding and styling the controls

For the controls, I have used a tabbed structure to arrange the individual links to each section. We will add it outside the scroller but within the entire glider wrapper:

...
...
...
...
...
- Section 1
- Section 2
- Section 3
- Section 4
- Section 5

That’s a whole bunch of code! Basically what we are doing is that we’re adding an unordered list (which is to be styled, later) underneath the ‘window’ (as seen in my blog header) to be the navigation menu. There are five sections, so normally you will need to place five tabs, in five

tags.

Now the styling!

.controls {
overflow: hidden;
width: 500px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.controls ul li {
float: left;
width: 20%;
}
.controls ul li a {
display: block;
height: 20px;
line-height: 20px;
padding: 5px 0;
text-align: center;
}

This is what we’ve done for the CSS part:

Disable styles for the unordered list, set margin and padding to zero (just in case you haven’t done so in with a reset stylesheet, and defined its dimensions.
For the list items, we float them to the left to arrange them horizontally. There are 5 list items in total, so each of them take up 20% of the total width.
For the link in each list items, we set its display to block (by default, it’s in inline element) and by applying the box model, set height to 20px such that adding up the vertical paddings will be 30px. We also center the text.

We’re done with the basic structure of the glider! If you’re satisfied, you’re done for good!

Step 4 – Backward and forward buttons

The buttons can be implemented without the tabs, with the tabs or be thrown out of the window. It all boils down to personal preferences. For me, I’ve used a combination of both. So far, we’ve been doing the basic structure without taking the buttons into mind. If we want to, modifications to the structure above have to be made.

In this example, we will be adding buttons to two-sides of the scroller:

Previous
...
...
...
...
...
Next
- Section 1
- Section 2
- Section 3
- Section 4
- Section 5

So, we’ve added the previous and next links to the side of the scroller, and attached the javascript funciton to them to move the sections. We need to refine their appearance using CSS:

.side-nav {
float: left;
width: 20px;
height: 200px;
}
.side-nav a {
display: block;
text-indent: -9999px;
width: 20px;
height: 200px;
}
#nav-previous a {
background: url(images/previous-arrow.png) no-repeat center center;
}
#nav-next a {
background: url(images/next-arrow.png) no-repeat center center;
}

Basically, what we did to the buttons is:

To give them a definite width and height (preferably spanning the height of scroller).
Display links as a block element, indent the text by -9999px so that it’s off the screen but still readable by search engine bots.
Customize background images for each button.

Then replace the styles for certain elements with the new ones below:

.scroller {
float: left;
overflow: hidden;
width: 500px;
height: 200px;
}
.controls {
clear: both;
overflow: hidden;
width: 540px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 500px;
}

The modifications are necessary because:

We have added two 20px wide buttons on the side, so the overall width has increased to 540px.
The controls are widened to 540px as well, but if you want to keep the menu the same width as the scroller (at 500px), fix width to 500px as well and use automatic left and right margin to center the menu.
Clear the floats above the controls.

We also need to use the clearfix method to making sure that all the list items are cleared properly. Change

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Issues

There are several things that might not work well with this glider script:

If you’re using an older version of Lightbox, you might encounter a javascript error and the glider will not work – neither will the Lightbox. If that’s the case, I recommend you to upgrade to Lightbox 2. If you’re a WordPress user, I highly recommend Lightbox 2.8.0 plugin for WordPress – not only does it work perfectly for me, it allows you to customize your lightbox as well.
If you’re using an in the section that has a scrollbar, there might be a minor graphical glitch in Firefox. I am unable to reproduce the glitch in Safari, Chrome, IE (surprise!) and Opera. It seems to be an issue with Firefox?
Flash movie will show even when the section it is contained in is not in the ‘window’. So the conventional YouTube snippets will cause your Flash Movie to appear towards the left/right of the ‘window’. You will have to add the following lines to the code: within the element, add ; and to the , add wmode="transparent".

Finally, the demo!

Yes, there is a demo file that comes with this tutorial – just follow the link to the demo page. Do not right click and download, as the download manager I’m currently using masks the original URL, so you’ll be downloading a blank file instead. If you want to get the code, just follow the link and save the page that is loaded thereafter.

Download: Glider DemoVersion 1.0 File size: 4 KB 1644 downloads

I hope the tutorial and demo is of good use to you. Have fun! If you have any queries, feel free to leave a comment. Thanks!

Related posts that might interest you:

Presenting teddY-risatioNâ„¢ Eta

Terry — Sun, 30 Nov 2008 18:04:51 +0000

First of all, I’m terribly sorry for being away from my blog for two weeks. It’s a personal record for being away for so long. The previous hiatus was 10 days – I beat it by 4 days! Heh. Okay, basically during that period I was trapped in the midst of my exams, ensnared by the repeated threats our lecturers threw at us about how hard the papers are going to be. But all thanks to them, I rammed up my pace and managed to not freak out when I read the question (yes, the papers were indeed hard).

Today is day 4 after exams. I cooped in my room for 4 solid days working on this theme. According to my theme count, this theme is the seventh theme I’ve made over a course of two years. So here it is, teddY-risatioNâ„¢ Eta, Î·.

So here it is, teddY-risatioNâ„¢ Eta, Î·!

The theme works well in Firefox 3, Safari 3, Internet Explorer 7 and Google Chrome. There is basic support for Internet Explorer 6 but due to incompatibility issues, the visual quality has been compromised for IE6 visitors.

Just as usual, I always have writeups for my new themes ;) Not only I write for my personal record but also to share with my readers of how this theme came about. I’ve included some links in the writeup, so if you’re interested in where I got the ideas from, you can find it out after the jump.

So here is a comprehensive list of the changes I’ve made:

1. It’s Sandbox again!

Oh boy, I just couldn’t stop loving Plaintxt’s Sandbox theme. It’s almost CSS free (sans the few necessary rules) and doesn’t require any knowledge of PHP – best for people like me! I must admit I don’t quite understand PHP and can utilise my knowledge of XHTML and CSS. So Sandbox is definitely where I will start off.

2. Typography

This theme is considered one of the most serious revamped I’ve ever made – the typography from the previous theme, teddY-risatioNâ„¢ Zeta, was not inherited at all. I’ve decided to create a new set of typography from scratch – in fact, the large-sized Verdana from the previous themes kept ticking me off.

My thirst for a better typography first started when I stumbled upon Ember’s blog. It just blown me away with his beautiful typography. I poked around a little, and I found Hemingway. Hemingway has been around on the Internet for downloads for quite some time but I didn’t know much about the importance of typography. After reading a book on it, I realised how important is it to have a readable and clean set of fonts – by choosing the correct font family, not overusing different types of fonts across the same page and colour.

For this theme, the major font family is Lucida Sans Unicode while the headers used Tahoma. The logo was changed from Calibri from the previous theme to Myraid Pro. I just love the way it looks like.

3. Layout

If you have visited this blog before, one of the greatest changes that you might not like it is actually the sidebar being switched position. Due to how the header elements are arranged, I have no choice but to place the sidebar on the left side.

The header section was slightly expanded to a height of around 300px or so, since I have to contain the gliding container in it alongside with the header menu. Designing the header was the hardest part because I had to decide the column width – and for the sake of consistency, subsequent sidebar and content container will have to inherited the same width.

The basic layout of the header section was inspired byÂ The Cosmic Machine’s Event Box page. I love how their logo appeared on the header and partially in the content. I didn’t exactly use the idea of the logo crossing the header and content border because that’ll require my header logo to be too huge.

I’ve used the 960 Grid System for the header and footer layout. I was forced to not use the grid system for the content area due to semantics reason – the sidebar should always load after the main content, but this is unachievable using the grid system. I stuck to the good old float and margin stuff.

4. CSS sprites

I always loathed the number of images that I have to deal with, especially when I am working on graphic intensive ones. After seeing how Jeff gave his blog, Perishable Press, a fantastic makeover, I peeked at his CSS code *weak smile* and realised that his backgrounds were CSS sprites.

This is how CSS Sprite works – images intended for different purposes are laid out in a grid, and then through CSS you will specify the background-position of the sprite you’re using. If you do check the background images of this theme (for Firefox users, this is easy!), it all breaks down into two big files – one is backgrounds.png and the other is small_icons.png. So throughout the entire layout, I am actually using that two image files but with different coordinates for each element.

5. Glider

The part I like about this revamp is that I can finally squeeze more content into the header. I was browsing through the CSS galleries when the glider on The Wojo Group homepage – very sleek and elegant, and saves space as well. I googled a little about the glider and realised that it was modified from Panic Coda‘s glider code. And then finally I dug out this Google Code site hosting the glider.js code. It’s very easy to implement actually, and you can see it in action here. Very handy eh?

The glider has a little problem dealing with iframes (not that I wanted to but because the tagboard uses iframe) but I guess that’s ok for me. I might be replacing it with something else… let’s see.

6. Archives

If you do take a look at the sidebar, the archives is pretty unique – I was reading Dean Jr. Robinson and Shaun Inman the other day and I really love the way they’ve organised their archives. Compact, clean and not visually obstructive. Mine is a little cluttered because of the sidebar width, but we’ll have to live with that for the moment being. Their minimalistic colour scheme immediately caught my eye and that was where I developed the colour scheme for the sidebar and the footer.

7. Revamped resources page

Check out the revamped resources page! I’ve completely abandoned the previous layout for a cleaner and more concise layout, that is easy to navigate. Besides having pages for my Photoshop and CSS tutorials, I’ve added an extra page for icon packs – just in case I’ll be developing any more in the future.

For the same reason, I’ve redesigned the pages for Photoshop and CSS tutorials. Now they look a lot cleaner and neater than before.

8. Footer

The footer has been greatly reduced to just two sections – older posts and tagclouds. Although the old footer was well-loved, I decided that it’s too big for my taste and I squeezed some of the stuff into the header. That’s why I love glider.js!

9. Cross broswer compatibility

Throughout the whole design process I kept cross checking between four browsers – Firefox 3, Internet Explorer 7, Safari 3 and Google Chrome. So far the design looks okay on the four browsers. Due to the Internet Explorer 6′s antiquity and it’s inability to support transparent PNGs, I’ve decided to forgo IE6 compatibility completely provide basic support for IE6 but at the expense of quality. Visitors coming through on IE6 will be served a message, encouraging them to switch to non-1990s browser :razz: heh.

So that’s it! I hope you’ll love the new theme!

Related posts that might interest you:

Fix for buggy Flickr badge JS

Terry — Fri, 05 Sep 2008 14:34:36 +0000

Yep, you didn’t read it wrongly – the javascript which Flick gave you to insert your personalised Flickr badge is indeed buggy! It just happened over the afternoon – the Flickr badge JS has some new modifications which will potentially affect the layout of your blog.

The crux of the problem

If you have the script, look into the source of the script. The follow is the badge code for my script, after following Veerle’s simple steps of converting the code to make it XHTML valid: