53 Responses to “WordPress – Simple CSS Text Boxes In Posts”
This page contains comments from the WordPress – Simple CSS Text Boxes In Posts article.
Click the icon
to subscribe!
Subscribe
to subscribe!
Stephen Cronin is Manager of Online Service Delivery at a Queensland Government department & has been a freelance WordPress developer/consultant since 2007
*Content on this site is my own and is not related to my employer
Hire me - I'm expensive, but I'm very good!
WordPress Plugins
- DualFeeds: Offer both full & summary feeds to your readers!
- IFrameWidgets: Stop slow javascript widgets breaking your page!
- FeedEntryHeader: Add copyright info to the TOP of your feed!
- LocalCurrency: Show values to readers in their own currency!
- KeywordLuv: Reward commentators with keyword rich links!
- Comment Warning: Detect potential spammers and warn them!
- Eclipse Crossword Integration: Publish crossword puzzles!
- Ajax_the_views: Make WP-PostViews work with caching plugins!
- Remove Widget Titles: Remove widget titles on the front end!
Want a Custom WordPress plugin? See my Services page.
Greasemonkey Scripts
- Google Numbered Search Results: Number Google SERPs
- Bing Numbered Search Results: Number Bing SERPs
- Disable Ctrl-W: Disable the CTRL-W key so you don't lose work
- markItUp! for Greasemonkey: Enable markItUp! for text areas
Visit my home page at Userscripts.org.
Excellent tip!
I am in the process of digesting some CSS basics right now and this is a great example of its power. Look forward to your next article.
Hi K-IntheHouse,
If you are talking about the Rounded Text Boxes in Posts article, I wrote it months ago – I just didn’t link to it above (I’ve done so now!).
Will I need to pay WordPress for external CSS even if I host it on my own server with my own domain name?
CJ, No, that’s only if you use wordpress.com (ie the same way you might use blogspot.com). WordPress.com impose limitations on what you can do.
If you install WordPress on on your own server (or a hosted server), then you have total control over everything, including CSS. And it”s free (apart from any hosting and domain name costs of course). That’s the way to go!
I am not using wordpress but I tried this in a text editor and in KompoZer. The boxes work great in I.E. 6 but nothing in firefox 2.0.0.7. Is there something else that should be done to get the textbox to show up in firefox?
I am using the external style sheet.
Thanks.
By the way it is showing up in firefox if I do it as inline. I am just hoping there is a way to do it externally.
Thanks again.
I found the problem. Actually a markup validator found it. It seems firefox didn’t like the curly bracket between the .textbox entry and the next to last entry in my style sheet.
I’ll be glad when I learn this stuff.
Thanks anyway.
Hi Thomas,
I’m glad you worked it out so quickly (before I could even respond!). It’s often the little things, like ‘punctuation’ that cause trouble. IE is more forgiving, but it’s better to get it right for the other browsers. It’s well worth learning the basics of CSS because you can do so much with it. Anyway, good luck!
Thank you.
I was just getting the basics of HTML and have made a couple of websites on cd that I sent to my daughters to run locally. Now I find out about CSS. Now there are two markups I don’t know enough about.
I am grateful that there are tutorials like this. I don’t plan on becoming and expert but with what I am learning I WILL be able to create a decent website.
Thanks for the tutorials.
Hi Thomas, Sorry I’m so slow responding this week.
Wait until you discover Javascript!
Seriously HTML and CSS is great place to start. The thing is, you don’t need to know them both inside and out to create a decent website. Simply learn the basics, then if you have anything that you’re not sure how to do, use Google – there are loads of tutorials all around the Internet. If you want to make sure what you’ve done is correct, you can validate your HTML and your CSS.
It may not be quite as simple as I make it sound, but the point is that the information is out there, and if you persist you’ll learn a lot. Anyway, good luck!
Thanks Stephen,
You are correct. The information is out there and I am learning. You are also right about not having to learn the stuff inside and out to build a decent site. I have mine up and running and I think it’s pretty good. I just wish I had known links in menus aren’t accessible to crawlers before I put those nifty menus on all my pages. Good thing I’m trying to figure out the site map thing.
By the way if any of you get a chance check out http://alongtheway.110mb.com/
Hi Thomas,
I’ve checked the site out and that’s good! The menus you’ve got at the moment should be fine. The links are there in the HTML – even there is some javascript involved, the bots will find the links as the <a href’s are there in the HTML. It should be fine.
Thank you Stephen,
I was hoping that would be the case. Since the menu links themselves are HTML and in the document and the javascript just handles the images, size and placement of the menu.
I am so glad I am finding all this info. I started trying to make a website with a site builder online but it gave no control. Then I found kompozer but couldn’t position things how I wanted. Now that I have learned some things I do it all in notepad2. CSS is cool. Now I have control.
I must again thank you and everyone else who takes the time to share this knowledge.
Thomas,
Nice to hear from you again. I’m glad it’s going well. I used to use DreamWeaver, but I do everything in a text editor now for the reason you mention: control!
Another great tips!
Using this box would add variety to my posts.
What I often do to break the blandness of WP posts is just by inserting pictures between paragraphs.
thank’s
debt advisor, that’s a good point. I do use text boxes sometimes to break up the text. It can make a real difference to a long post.
Thanks for sharing this simple method of creating simple text boxes by just using some html tags and CSS.
I personally prefer the first method using internal CSS as it’s far more easy to implement, even though you can’t just modify the look of the text box in all posts at once. It could potentially become an issue in the event you wish to change templates/themes.
Have you ever notices some blog posts posting square 250*250 ads at the top of every post and the text just gets automatically arranged around it? Do you have some post or guide as to how I can implement that please. Not just to inset ads, even for inserting individual pictures for posts.
Thanks
Hi Drunk Text,
Inline CSS is certainly easier, but it’s better to go with the external one for the reasons mentioned. Of course if I ever finish my half written WordPress plugin, that will be better still!
For the ads, I don’t have a guide on it, but they are probably just using CSS float. For example, add a style section to the img tag (or whatever tag you’re using), as such:
<img style=”float: left;” src…
That’s obviously not finished and you may also want to add other style attributes (such as margin etc), but that should get you the basic effect. You can use float:right instead of left if you want the image on the right hand side.
Hope that helps.
Hmm well I’ll check it out and see how I go, to tell you the truth I never tried using CSS to do it, I’ve tried doing it in HTML a while back using tables and putting the first paragraph of the post in a row with two columns one for the image and the other for the text.
The only problem was that when the first paragraph was too long or too short (not the right number of lines) the layout was far from good looking.
Hi DT,
Hi Stephen,
I was playing with this textbox on my website. I found that if I tried to add some things like headers or url the textbox would break. I see from your note about using div will not work for worpress but I found that for use on my website it works great.
On a textbox I want to add certain styles or url I just replace p with div. This textbox just keeps getting better. I now have about 4 versions in my stylesheet.
Thanks again and may God bless you,
Thomas.
Hi Thomas,
I have a feeling that there has been a change in the way that WordPress treats div tags – maybe in 2.3. I’m not really sure though. But if it works for you, great! I’m glad it’s working for you..
Sorry Stephen. I should clarify. I am doing this on a non wordpress site.
I pointed out your note on div and wordpress so as not to make others think to try this in wordpress. I’m just using notepad2, filezilla, and a free server space.
I originally found your article searching for a simple textbox. That’s what is nice about your suggestions. They can also apply to those learning html who don’t use wordpress. That is why I stumbled this article last night. Others could benefit from this as well.
Hi Stephen,I’ve tried your box solution but have run into a small problem.If you look at my homepage – http://www.fatburningreviews.com, you’ll see in the far right sidebar I’ve added two boxes.The bottom one connects to surveymonkey, and here your box solution works fine.But in the top box where I’ve inserted AWeberemail list subscription code, the box doesn’t seem to work – or at least intermittedly.Any idea?Thanks!
Hi Derek,
I had a quick look and it seems that you’ve got a tags instead of p tags. I hope that helps..
Hey Stephen this is a great tip and there are also alot of other websites out there that can teach you css is a very understandable way. Just search google for “css tricks” and you’ll get hundreds of beneficial websites. Also, check out youtube for css videos. You’ll be surprised at how many there are.
This is a good tip. I use boxes like these frequently on my blogs to make ‘calls-to-action’ stand out.
I just tried this in one test post both ways; one with the stile in and second in css file. It’s useful for showing code or edited/added content to a post etc. Because i will use the stiling decoration only at times (but with a few paragraphs in one larger block), I tried adding the css style right in html code and only to the particular article post and it worked fine or the styling can be added to the page of the page also, e.g.:
.divtest {
background: #f7f7f7;
border: 1px solid #ccc;
padding: 0 1em;
margin: 1em 15 0;
}
Test text....
.....
.........
.......
.....
etc.
I hope the code above will show okay.
Sorry, it didn’t show encasing opening and closing tags for:
style type=”text/css” and after the stile code /style and h1, div’s, p’s, font.
Basically all goes into the html in WP Tool when writing the article.
That my friend is some sexy CSS. I’m going to use this in conjunction with the rounded box tool to get some sexy results.
I’m still new to writing my own CSS for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.
This is a great tip, thanks. I use this to make requests stand out, like RSS feeds.
This is a great tip. thank you so much. I am just learning web design and this is a big help.
I am still new to writing my own styles for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.
Sorry, I removed the link because it points to a pharmaceutical product…
The quick tag stuff is pretty confusing, hope I get a hang of it!
Thanks for the tip on inline css, I use a CMS and and can’t access the internal css files, so this makes it easy for me to add unique call-to-action boxes.
Nice work. If anyone ever needs this i am just going to send them to your post. You have some great step by step tutorials and links to other sites.
It is also entertaining to note that we can modify or over-ride an external CSS style, through the in-line method. Just reference the class, they add some additional style. Here is an example.
CSS file:
.textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}
Code:
p class=”textbox” style=”background-color: #CCCCCC;” text /p
@Abdul the quicktags look scary at first but they aren’t too bad once you stop and think about it.
Thanks for the great tips
Thanks – great post content! It seems like a more elegant way of emphasizing text than just ‘bolding’ it. I’m going to test it out on my blog later today!
This tip is really useful, and not to mention really easy. Back when I was just starting out to web design (I was scrawny, HTML-semi-literate kid of 11 then), I would’ve probaby made a bunch of graphics for the background and borders, and then proceed to code it in a complex way. That was before I discovered CSS.
So up to now, I’m still amazed at the what CSS can achieve with minimal and simple coding. Thanks for this!
Wow! great coding. Keep up the good work.
Really nice tip. I have used the technique you described to beautify my code snippets:
Howto:
http://ricochen.wordpress.com/2009/07/01/beautify-your-code-with-pygments/
Example:
http://ricochen.wordpress.com/2009/06/28/output-df-command-in-colors/
Thanks Rico,
Glad it was of use.
Thank you so much for putting this out there. This is very very useful information! I have bookmarked your site. I always wondered how people were able to do this. I have already added to some key places on my site. Works Great!
after hours of trying to find a plugin for this type of thing this page saved my life and two sites that needed this! great job!
The quicktags.js in wordpress 2.9.2 and 3.0 are all scrambled and like of locked like on a cheap free theme footer.php, your tut is going by older versions is there a new way to do this now? I am doing it with exterenal CSS but a pain adding it at every block and need a quicktag so my client can do it on his own later.
Hi Jay,
I guess the method has for Quicktags has changed – you’re right this post is pretty old now.
Anyway, these days I use a plugin for quick tags: http://wordpress.org/extend/plugins/post-editor-buttons/
You should be able to use it with my code above, so hopefully that solves the problem!
Hello Stephen,
Your external CSS method seems to work with Internet Explorer, but not with Chrome.
For example: http://www.kevinkane.com/2010/12/write-short-articles-nobody-reads-anything-else/
Is there a way to make this external CSS work with Chrome?
Thanks!
Hi Kevin,
Your site seems to be working for me in Internet Explorer, Chrome and Firefox. The textbox shows for me in all three browsers. For the record, I’m using the latest version of Chrome (8.0.552.224) with no add-ons. I think that either it is a caching problem (ie your Chrome has your old css file cached and you need to Ctrl F5) or you have a Chrome add-on that’s causing a problem (unlikely, but could be possible). Can you try the Ctrl+F5?
Thanks Stephen.
After I made the change and clicked on “Preview Post” in WordPress, I couldn’t see the text box.
But then I refreshed the page and I saw it.
I love these text boxes!
Thank you. You’ve helped a lot of people.
How can i create scrollable text boxes?