In recent posts, I outlined how to create both simple and rounded text boxes within a post. I’ve now created a Colour Selector for both types of text boxes, which allows you to select colours you want, see a preview of the text box, then gives you the code for it. Try it below! (may take some time to load the image)
Colour Selector
Preview:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Code:
Copy the following code to the end of your external CSS file. See my rounded text boxes post for information on this and on calling the style.
Code will go here when generated
Note: If your background is not white, you will need to replace the #FFF with the appropriate hex code for your background colour. If you are unsure what your background colour is, I’d suggest using a Firefox extension, such as ColorZilla or Web Developer.
Stephen,
Thanks for this great colour selector and the css text box idea. I’m only barely code literate so the simplicity of your text boxes is fantastic. Thanks for so generously sharing your skills.
Lizanne, You’re welcome – I glad it helps!
This is one great color selector. it make it so simple for me to select the colors that use to take me forever. I use to have just a few that I knew the codes to but this opens up a nice change. This one I will need to bookmark and use again.
Hi Brian – actually my eventual intention is to embed this in a WordPress plugin. It’s half written, but I’m not sure when I’ll finish it. I’ve changed the technique I use for rounded corners too. Anyway, if it helps people great, but sometime in the next few months I hope to sort it out…
Wow this is amazing, may I was what language did you use to code that? Is it javascript.
I don’t know much about you since I just came across this blog by accident and just got stuck here reading you posts. Are you a coder? and if so what type of languages do you master?
I’ll be coming back here in a few hours so see you then 😉
Hi Drunk Text,
It’s mostly JavaScript. The actual colour selector script comes from ecritters.biz although I’ve changed it a little. The rounded corners are by Nifty Corners. I just tied it all together (previews and code etc). I normally code in PHP, Javascript, etc – which is why I like WordPress so much! I’m going to turn all of the above into a WordPress plugin some day (it’s been half done for 6 months!).
Anyway, thanks for stopping by!
No problem 🙂
I code a little PHP as well, haven’t really had the time to look into wordpress plugin yet, and I haven’t got the slightest idea of what it’s all about.
I’m not really a big fan of wordpress plugins, I installed a star rating script a few months back on one of my blogs and it totally messed up my database, from then on I usually go with the basics 😛
Anyway if you ever start releasing plugins i’ll check them out 😛 I’m subscribed to your RSS so most probably I’ll be notified by a post when it’s official right 🙂
Have a good day.
Hi Drunk Text,
Yes, it’s worth installing plugins on a test blog before installing them on your real blog. There’s always a small chance that it will conflict with another plugin you have running, or your theme, etc.
WordPress plugins aren’t hard to create, especially as you can look at the source code of existing plugins to see how they work. You should give it a go! 🙂
I’ve actually released 4 WordPress plugins so far. They’re listed at the top of my sidebar. 🙂
Stephen,
This is possibly the one of the BEST articles I have seen on wordpress post writing. I actually think it is the first article I have seen that incorporates using CSS in your posts to create some very creative looking posts. Great job. I’m subscribing!
Stephen,
Love this tool! I have been looking for this for weeks. Thank you for your contribution!
Can we float this float this text box to left of right of text?