Nick Prosch online

deLight customization – no floating smileys

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

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

1 Comment to deLight customization – no floating smileys

Leave a comment