Determining poly image map coordinates

Thursday, September 9th, 2010 | (X)HTML/CSS, Quirks, Tech-savvy | No Comments

I am currently working on a “self inflicted” project where I record all my old tapes. Expect a post about this soon. Doing so I took pictures of my tapes, linking the displayed tapes to their corresponding playlist. As this can result in non-rectangular shapes I am using poly image maps, but determining the coordinates became a drag, as my ancient Photoshop 5.5 only displays one x/y coordinate at a time. Writing this post I dl the current GIMP, because I want to know whether this tool lets you get a list of all coordinates of a polygon at once.

Anyway, googling I found Eleomap, a pretty neat online tool that lets you enter a link to a web-accessible picture (no upload supported) and draw your shapes right onto the picture. It supports multiple shapes and multiple maps. You need to get used to the usage a little bit (RTFM), but after that you will be able to get your poly coordinates in no time.

P.S. The GIMP dl just finished, I installed it, and – how could it be any different – it provides a brilliant image map tool (Filters -> Web -> Imagemap) – how kewl is that?

Tags: , , ,

deLight … (I’m sorry to say it) … sucks.

Friday, November 21st, 2008 | (X)HTML/CSS | No Comments

Even though I (still) use this theme (because I like the look of it) I have to say that the impl really sucks. First the image/smiley positioning bug, now this: I enabled the tagcloud
widget yesterday, the outcome being a messed up tagcloud. This is due to the line-height not being adjusted properly. Maybe I’ll fix this later. Damn, designers who want to be coders, it’s just not working.

Cobbler, stick to thy last.

All right, here is the dirty quick fix:

/* line height high enough to harbour *big* tags, tags justified */
div#tag_cloud div.box-right-content {
 line-height: 22pt;
 text-align: justify;
/* cloud element's shouldn't be aligned at the baseline IMHO
   tags with white spaces shouldn't wrap at eol */
div#tag_cloud div.box-right-content a {
 vertical-align: middle;
 white-space: nowrap;

Tags: , , ,

deLight customization – images aligned the way you like it

Wednesday, September 17th, 2008 | (X)HTML/CSS | No Comments

Okay, I’ve had enough. First I got rid of the floating smileys, but try to do such an extraordinary hard task such as positioning an image with the deLight theme. I had to change the theme’s CSS – even a child theme doesn’t help here, cause deLight simply forbids anything but left floating images in the content. This kinda sucks, but maybe there was an intention behind this that I am not getting. Here is the change:

.box-left img {
        /* float:left;
        margin:0 10px 10px 0; */

After that you can simply use the alignment features of the editor, no more overriding from the parent theme! I also erased the margin – this is something you can do with the editor as well. If you want to you can delete the whole thing from the CSS which is basically the same as commenting it all out. This also renders my smiley post obsolete – in the end a smiley is just an image, too. If someone found a way to change this behaviour without touching the original theme please let me know.

Tags: , ,

deLight customization – suddenly it fits

Thursday, September 11th, 2008 | (X)HTML/CSS | No Comments

My next attempt optimizing the deLight theme is about positioning the content. Two things are taken into consideration:

  • centring the content (the original style looks awkward on high resolutions IMHO)
  • make use of the available space AKA this page should fit easily on my eeepc

Okay, the page is divided into 4 parts, namely header, menu, content and footer. All these elements use a margin left of 100px. To centre an element we use an auto margin horizontally. That’s basically it. There was just one error in the original style that made the page break out to the right. #footer p is to blame. It had the size of the content (940px) and the 100px margin resulting in a size of 1040px. With the auto margin all elements have the same space around them so no elements breaks the page.

Here is the CSS to centre the deLight theme:

#header, #menu, #content, #footer p {
      margin: 0px auto;
#content {
      padding: 0px;

I also got rid of the bottom padding of the content.

Tags: , ,

deLight customization – no floating smileys

Thursday, September 11th, 2008 | (X)HTML/CSS | 1 Comment

I just installed webdemar‘s very nice deLight theme. But as soon as I wrote my first post I was disappointed ’cause my smiley wasn’t aligned properly. It was positioned on the left border, completely torn apart from the context I wanted to use it in.

There are more things that in my opinion could need some tweaks, I will write about these in future posts, let’s just stick to the smiley problem.

The solution is very easy: As the CSS properties of the smiley reveal, the smiley is floating and has a margin. Both properties are not suitable for elements that should be displayed inline. Originally these CSS props where used to align pictures left – I don’t know whether you need this option anyway ’cause you can align pictures while inserting them into your post. Anyway, this is the CSS that’s causing the problem:

.box-left img {
      margin:0 10px 10px 0;

I didn’t want to change the original code, so I inspected the smiley element again, just to see that a smiley image comes with the CSS class wp-smiley. How nifty! So what I did is adding these lines to the CSS file:

.box-left img.wp-smiley {

Et voil√°, no floating, no margin for smileys and no other element harmed!

If you don’t want to mess up your theme’s CSS use so called Child Themes as webdemar describes here for the deLight theme: WordPress Child Themes

Tags: , ,