Currently, there exists no mechanism to select the parent of a matched child selector. There is no look ahead, like in regular expressions or XPath. This sucks, because it means that you have to define additional styles to affect parents, and parents with specific children differently. Two methods strike me as do-able at the moment to achieve what we are trying to do, and they both use Javascript, which wasn’t meant to do things like this.

Bottom up

In pseudo-code, we can do:

children = get_elements_by_tagname('xx');
for(i in children)
    if(children[i].class_name == 'yy')
        /* do something to "children[i].parent" */

Which means that if we want to style the parent of all a.child tags, we need to get all the a tags (time lost looking for unnecessary tags), check their class name for the required condition class (time lost iterating through unnecessary tags) and finally apply the styles to its parent. A simpler (and possibly faster¹) way would be to use $('parent child').parent() with jQuery, but that will require including a library for just one or two statements.

Alternatively, you could also get all the parent elements, and based on the child match, add a class to the parent. Then, in your CSS, a definition for that class will style your parents appropriately.

They are both clunky methods to do something which I am sure doesn’t need too much effort to implement natively. By the looks of it, this will not be included in CSS3. Looks like a job for Textual!

There’s something about being a designer or just a plain computer person that makes you want to tweak everything to the way you want it to look. I have tweaked the life out of Geekaholic, and am currently in the process of designing my landing page at www.adityamukherjee.com. I would love it if Facebook allowed some tweak-age, but I’m not hopeful. So it was a welcome change to the outlook of my Twitter profile, that I thought of going all ‘designer’ on it since it was the only tweak-able non-tweaked page from/about me on the web. Earlier, it was a copy of Geekaholic’s background with a few colours changed. But since I got a black and white avatar, I thought it was time to jazz it up a little and give it it’s own identity.

I don’t think many people look at Twitter profiles as design opportunities, thinking that people don’t visit those profiles. I think otherwise, although I’d love to see some square figures to back me up on this. I visit a few Twitter profiles everyday to have a look at where the discussions are going, and invariably stumble across a few well designed ones.

I know that there aren’t too many options to change, but that is why it’s a challenge, and what I like about it. Challenges to designers make their job interesting, not cumbersome, and the allowance of changing only the colours of the text and sidebar, and the background image makes it a respectable challenge for any designer looking to stand out from the crowd.

A plain paper textured background is too simple and boring on a page buzzing with activity. Plus, a design replica of Geekaholic on my Twitter page will be a very un-designer-ish thing to do. I began with the avatar. It needed a change, so I put up a new grayscale one because then I would be able to go back to my favourite monochromatic colour scheme. With the new picture up, the design had to be changed around it. The busy-ness of Twitter pages made me want to make a noisy background, but I didn’t want a visit to be a jarring experience. Hence, I looked back to the De Stijl concept, something a friend had introduced me to a couple of years ago. They are very abstract and hence can be moulded to any form creativity allows. What finally emerged might not conform to the De Stijl principles completely, but that’s what derivative art is all about.

There was the thing of the coloured boxes, because a lot of the page is covered by the updates section, and the sidebar drops off after just 25% of the page. Too few would seem empty, too many would deviate from the foundation. But I think a random click here and there got that hitch out of the way real well. The colours for the text and sidebar were a natural pick, to stay with the grey. Although I wanted to pick a light on dark scheme for the sidebar, the foreground colour is universal, and the tweets section’s background is not changeable. I picked a charcoal grey to keep it dark enough to read, but light enough to not be a black. The sidebar colour came from the fill colour on the extreme left box, albeit a little lighter to maintain legibility. Creates a strange kind of harmony between the two sides.

Twitter profiles are one of the better evidences of designing prowess. How much one can do without having complete freedom. If you have a profile design you are proud of, let me know. I’ll be glad to link it in a ‘Best Twitter profile designs’ post sometime in the future.