[EDIT] This has been updated with a fix for Mozilla where the textarea used to jump to the top on addition of a tag. The updated script is in the same file, and some instructions have been added.
I tweaked, redid and added some Javascript quicktags in WordPress. Quicktags, for those that are unaware, are those small little buttons above the post content form in your admin interface. Some of the features added include:
Automatic CSS dropshadows for images
Automatic CSS dropshadows for text
Capitalization (can be used for many purposes)
Small size and large sized text
Left or right floating pictures and text etc.
You can see an example of the stuff this is capable of here:
http://mindfulmusings.net/weblog/2003/5/24/this-is-another-test/
To install this hack, download this file. Unzip the contents on your computer. Copy the images directory to the root of your WordPress folder. Rename quicktags.txt (in the zip) as quicktags.js. Rename the original quicktags.js in your wp-admin folder to something else for backup and copy the new file into your wp-admin folder.
Now open your wp-layout.css (or whatever else you call your CSS file) and add this to the end of that file:
.img-shadow {
clear: both;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
.p-shadow {
width: 90%;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 30px !important;
margin: 30px 0 0 15px;
}
.p-shadow div {
background: none !important;
background: url(images/shadow.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
Note: You can change any of the CSS elements or the elements in the quicktags.js to suit your needs. These javascript functions and CSS tags can be used in other blogs/sites as well and the inspiration comes from Dunstan Orchard and http://www.alistapart.com/
I would like to know if there are any other useful tags/CSS tricks that people would like to see in Quicktags.
David Blangstrup (2 comments.) 
Julio C. (1 comments.) 
Teeth Maestro (1 comments.) 
Steve (1 comments.) 
Ragle (1 comments.) 
Malexx (1 comments.) 
Solo.twin 
Thanks! It’s great to know how to modify quicktags, and the dropshodow trick is wonderful.
I have one issue now though and I’m wondering if it has nothing to do with the img tag …
emoticons are not working in my posts although I have the option selected to show images in the admin. Any ideas?
I would make sure the location for the images of the emoticons are set correctly. They show up on the same admin panel.
abcd
Bible Read search in Arabic Studys Stories Testimonies Hymns and Poems Answers Books Links Daily devotions Music/
Alnemat Journal Arabe Chrétien La Grâce la Revue Arabe sur Internet offre La Sainte Bible Al-Injil L’Evangile de Jésus Christ
gratuit
I can’t seem to get the Quicktags to work for me in Safari (Mac) or IE (both Mac and XP). I have been able to see/use the new Quicktags with Firefox on both XP and MacOSX, but that is it. Any ideas as to why this is? Is there anything that I can do to workaround this besides using Firefox?
I seem to have spoke too soon…
I checked this again from my iMac at home, and now it works fine on both Safari and IE. This must have been a cache issue with my iBook, although I did clear the cache a few times…
Glad you got it working!
wow, that’s my site….
if you’re using the pic as a hyperlink, do you place the “divs” nested inside the href tags and outside the img tags?
I currently have the div tags nested outside of it all…and it doesn’t validate that way.
Thanks
Mark, did you happen to fix your code so that in Mozilla/Firefox once you enter a quicktag it doesn’t jump to the top? I know that Alex fixed it on his, but just wondering if you had an updated one?
Thanks!
Not yet. It will be soon though now that you have brought it to my attention.
Sounds like you are missing a quicktags.php file
can’t seem to get the new quicktags to work. after following the instructions, i’m getting the following errors in the UI:
Warning: main(quicktags.php): failed to open stream: No such file or directory in /homepages/44/d108849036/htdocs/viewblog/wordpress/wp-admin/edit-form.php on line 72
Warning: main(): Failed opening ‘quicktags.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /homepages/44/d108849036/htdocs/viewblog/wordpress/wp-admin/edit-form.php on line 72
I was having the same problem as Mark (now resolved). Tried closing ftp app, refreshing cache and index page. However, I quicktags didn’t show up until I refreshed the Admin page, *while I was logged in*.
Hi. Great pulgin. Just one question. I dont want the image to be left or right. Just on top or buttom of the text. Is that possible?
Thanks
HI, Great tool, and I’ve even got it mostly working (but then I am a dope!). I have a few problems/questions though if I may:
. Sadly it is workign fine in IE. My HTML is too weak to figure it out still.
First, the layout in Firefox is all jumbled and the following post after a dropshadow is pushed up into the shadowed post
Second is that I thought I understood there was a featrue for text wrapping around a left/right aligned pic as well. I may just be off on that one though.
Thanks for sharing your work!
Chris
Great design etc, shame that the layout is a bit messed up with firefox so I have to use a couple of
tags to push it down again which will probably damage it on IE.
I’m having trouble with getting my posts to come out right. A few of my posts that I tried the drop shadow to that (