Dear Clients…

Please please please stop pasting into your WordPress and Drupal sites straight from MS Word without converting to plain text first! There is nothing I love more than going to see a clients sites in use only to be blown away by hideous font action that has nothing to do with my theme styling. I check out the code view and what do you know? Tons superfluous in-line MS Word styling.

Sometimes if I am not busy I actually go in and clean it all up. Leading to strange questions like “why do my fonts keep changing?” I take that opportunity to re-introduce them (sometimes for the third or fourth time) to the paste as plain text function in their WYSIWYG editor. I also encourage them to write directly into their CMS’ and save as drafts or keep them un-published until ready to go live rather than writing entries in word and just pasting them in.

So please help your site stay pretty and always press that paste as plain text button BEFORE you paste from MS Word. It is one extra click but don’t be lazy.

More changes and updates

Lots of minor changes to the site over the weekend. I cleaned out even more extraneous css from my theme’s style sheet and I also pimped out my contact forms and my comment forms and their submit buttons. Sorry IE users your comment areas have ugly scroll bars waiting to scroll (it’s your fault for using a browser that’s dumb enough to do that)

In observance of Black History month I have made my El Creature lucha man an afro-american.

Internet Explorer Input Backgrounds

When creating snazzy search forms be sure to wrap the input field in a div and add the background image to the div while setting the input background to transparent with no border. Make the div the actual size of image and make the input field be the size of the image minus all padding added to center text in input field vertically.

If you don’t wrap the input field in a div and someone starts typing a search query longer than the background image, the background image will begin to scroll left as you type. If you type enough the background just scrolls right out of view. Code below should be enough to get you headed in the right direction, obviously make the background image url point to an image on your server.

#searchform .input-bg {
background:url(images/input.png) no-repeat left top;
height:28px;
width:92px;}

#searchform input {
background:none;
border:none;
height:22px;
padding:3px 3px 3px 6px;
width:83px;}

<form id="searchform" action="#">
<div class="input-bg">
<input type="text" value="search" /></div>
<input id="searchsubmit" type="submit" value="Search" />
</form>

Edit: I used a drupal tutorial I found on styling the submit button to create an all css submit button that doesn’t add a bunch of weird xy coordinates in the url after submitting like an input type=image and the button tags do(?). It basically just shifts the text out of the way and makes the text color same as background creating the illusion of a nice button. View tutorial here. That css code looked like this (below) and matches the form html above.

#searchform #searchsubmit {
border:none;
background: url(images/search.png) no-repeat left top;
cursor: pointer;
display:inline;
height:28px;
letter-spacing:100px;/*moves text out of way for ie*/
text-indent: -9999px;
width:32px;}