Nick Prosch online

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: css, themes, wordpress

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: css, themes, wordpress

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 {
      float:left;
      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 {
      float:none;
      margin:0;
}

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: css, themes, wordpress