Let me preface this post by saying that I did not come up with this code on my own. Although I did tweak it and adapt it to use with the Thesis theme, I have long since lost the original link and can’t credit the original author. Now - on with the post…I’m switching gears today to bring you a little customization tip that you can use to help customize your Thesis install or any blog for that matter. It wasn’t long ago that I switched Building Camelot over to the Thesis theme and I wanted to share a little tip on how you can tweak the note and alert styles of by adding an icon to the left.Since I’m using the Thesis them, this post is geared toward anyone using the same theme. However, you can modify these code snippets to match your .css file and implement them on any theme you like. It’s a pretty simple modification, but one that can add a little professionalism to your blog and help your readers notice a certain part of your post. To get started, all you really have to do is this:Find and upload two icons that you would like to useModify the custom.css file that comes with ThesisHit the save button1. How to customize the “Alert” style:Upload an icon that you wish to use and modify your .css file with the following code. It adds the image to the background and positions it 7 pixels from the left x position and 50% down y position so it always stays centered no matter how much text you include..custom .format_text p.alert background: #ffffa0 url'###URL to your image location###' center no-repeat;border: 2px solid #e5e597;background-position: 7px 50%; /* x-pos y-pos */text-align: left;padding: 5px 5px 5px 45px;Creates this:This is how the new alert class works after you implement the changes above. Notice the nifty icon to the left It’s 32 px. square and you can use any icon you wish2. How to customize the “Note” style:Same as above, the only difference here is that you would want to link to a different icon..custom .format_text p.note background: #f5f5f5 url'###URL to your image location###' center no-repeat;border: 2px solid #ddd;background-position: 7px 50%; /* x-pos y-pos */text-align: left;padding: 5px 5px 5px 45px;Produces this:This is how the new note class works after you implement the changes above. Notice the nifty icon to the left It’s 32 px. square and you can use any icon you wishIf you’re using Thesis, you can easily modify your custom.css file by using Rick’s OpenHook plugin. Using his plug-in allows you to modify and save your custom.css file through your Wordpress dashboard. Otherwise you would have to constantly upload a new custom.css file to your server every time you made changes.Feel free to download and use the icons you see here and note that you can use any icon you wish. If you want to use these icons, just download them, upload them to your site and change the “###URL…###” in the above code to the new image location.You can, of course, use any size icon you wish. The code above is built around an icon that is 32 pixels square and you’ll have to adjust the padding if you use a larger or smaller icon. I would avoid using an icon that’s too big since it might not look right if used with a one-line alert or note.If you’re interested in trying to implement something similar on another theme, just drop me a comment below and I’ll get back to you as soon as I can.