Special Text Boxes is very simple, very little and very useful WordPress plugin (for me and, I hope, for you). It adds little style sheet file and short code to blog for highlighting some portion of text in post as colored boxes. That may be warning, alert, info and download portion of post’s text.
(This post is available on russian language.)
Support Forum for this plugin.
Examples
CSS mode
Javascript mode
Installation
- Unpack plugin archive file.
- Put plugin folder to WordPress
wp-content/plugins
folder. - Activate plugin on Admin page.
Settings
You can set border style, text shadow, box shadow and Allow or disable rounded corners for your special text boxes.
Available languages of Admin Panel:
- English
- Russian
- Italian by Gianni Diurno
- Belarus by Fat Cower
- Uzbek by Alisher Safarov
- Polish by Daniel Fruzynski
- Arabic by مدونة رسين
- Dutch by Rene
- Ukrainian by official ukrainian localization team
- German by Renate
- Czech by Stanislav Čihák
If you want and can translate this plugin to your language, do it, and send me .po file by e-mail (minimus AT simplelib.com). Thanks.
Styles Repository
Starting with version 4.0.65 plugin allows you to have as many styles as you want. All styles are stored in the styles repository (database table) and can be customized to suit every taste. Styles fall into two categories: predefined (system and special) styles, and custom styles. The parameters of all styles can be changed by blog administrator. The difference is that the slugs (unique names) can be set only for custom styles. Slugs for predefined styles can not be changed.
Use this repository to customize existing and create new styles of blocks.
Usage
To embed special textbox to your post, use short code as this:
where defined_id may be alert, download, info, warning, black, custom and gray.
You can insert short code(s) of another plugin(s) inside wp-special-textboxes short code. For example:
There is example of using Download Manager plugin short code with wp-special-textboxes plugin short code. The result of using this code construction you can see below in the Download section of this post.
Customising “On The Fly”
Customisation Short Code Options:
- color – body font color
- ccolor – caption font color
- bcolor – border color
- bgcolor – background color (CSS mode) or start color of background gradient (Javascript mode)
- bgcolorto – stop color of background gradient (Javascript mode only)
- cbgcolor – caption background color (CSS mode) or start color of caption background gradient (Javascript mode)
- cbgcolorto – stop color of caption background gradient (Javascript mode only)
- image – full URL of pictogram image. Use null value as URL to disable image output
- big – use this parameter in case plugin settings are different with your needs. May be true or false. CSS mode only.
- mode – drawing mode (css|js)
- float – turn on floating mode of Special Text Box. May be true or false.
- align – alignment of box in float mode. May be left or right.
- width – width of box in float mode (pixels)
- collapsed – display STB in collapsed mode if collapse/expand mode enabled. May be true or false.
- mleft – left margin in px.
- mright – right margin in px.
- mtop – top margin in px.
- mbottom – bottom margin in px.
- collapsing – allow/disable collapsing (default|true|false)
- defcaption – allow using name of style as caption of block (true|false)
- direction – language direction (default|ltr|rtl)
You can use Insertion Dialog to insert short code to post. Just select text you needed and click “Insert Special Text Box” button.
Special Text Box anywhere in blog
You can use function stbHighlightText to output Box anywhere in your blog.
This function defined as
1 |
function stbHighlightText( $content = null, $id = 'warning', $caption = '', $atts = null ) |
- $content – text in the Box (string)
- $id – ID of Box (string)
- $caption – caption of Box if needed (string)
- $atts – extended attributes of Box (array)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
atts = array( 'id' => 'warning', 'mode' => '', 'level' => 0, 'caption' => '', 'defcaption' => '', 'color' => '', 'ccolor' => '', 'bcolor' => '', 'bgcolor' => '', 'bgcolorto' => '', 'cbgcolor' => '', 'cbgcolorto' => '', 'bwidth' => '', 'image' => '', 'big' => '', 'float' => 'false', 'align' => 'left', 'width' => '200', 'collapsed' => '', 'mtop' => '', 'mleft' => '', 'mbottom' => '', 'mright' => '', 'direction' => '', 'collapsing' => 'default', 'shadow' => '' ); |
- color – body font color (six HEX digits of color without # as string)
- ccolor – caption font color (six HEX digits of color without # as string)
- bcolor – border color (six HEX digits of color without # as string)
- bgcolor – background color (CSS mode) or start color of background gradient (Javascript mode) (six HEX digits of color without # as string)
- bgcolorto – stop color of background gradient (Javascript mode only) (six HEX digits of color without # as string)
- cbgcolor – caption background color (CSS mode) or start color of caption background gradient (Javascript mode) (six HEX digits of color without # as string)
- cbgcolorto – stop color of caption background gradient (Javascript mode only) (six HEX digits of color without # as string)
- image – full URL of pictogram image. Use null value as URL to disable image output (string)
- big – use this parameter in case plugin settings are different with your needs. May be true or false (boolean as string). CSS mode only.
- mode – drawing mode (css|js)
- float – turn on floating mode of Special Text Box. May be true or false. (string)
- align – alignment of box in float mode. May be left or right. (string)
- width – width of box in float mode (pixels) (string)
- collapsed – display STB in collapsed mode if collapse/expand mode enabled. May be true or false. (string)
- mleft – left margin in px.
- mright – right margin in px.
- mtop – top margin in px.
- mbottom – bottom margin in px.
- collapsing – allow/disable collapsing (default|true|false)
- defcaption – allow using name of style as caption of block (true|false)
- direction – language direction (default|ltr|rtl)
- level – nesting level of the block. Only Javascript mode. Allows you to defer the drawing of the indoor block as long as parent block will be drawn. (0|1)
- shadow – enables/disables shadow of block vs default settings
You can partially define atts array (version 2.0.22+). For example:
1 2 3 |
<?php stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); ?> |
or
1 2 3 4 5 6 |
<?php if(class_exists('StbBlock')) { $block = new StbBlock('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); echo $block->block; } ?> |
In this example the image of block was redefined as “wp-b.png” image and this one was defined as big image.
Inserting Special Text Box into Special Text Box
If you want insert one STB to another, you can use additional short code “stb“. For example:
CSS mode
Javascript mode
Special Text widget
Download
Tests
Video Lessons
Awards
© 2009 – 2024, minimus. All rights reserved.
Wonderful plugin, but it’s working only with Internet Explorer 8 on Windows Vista (and without shadows and rounded corners).
It’s not working with Mozilla Firefox 3.0.15 on Windows Vista, nor with Internet Explorer 6.0.2800.1106 on Windows 2000, nor with Mozilla Firefox 3.0.15 on Windows 2000.
What can be done?
Best wishes,
Carlos
Total Comments by Carlos: 3
You have conflict between Special Text Boxes plugin and MicroAudio plugin! MicroAudio plugin loads oldest version of jQuery directly …:
Loading libraries directly is not good idea … It is direct path to the conflict between plug-ins (sorry for the taftology 😉 ).
Total Comments by minimus: 167
hello
I would like to ask for your help to install the plugin Special Text Boxes
I uploaded plugin dir to the / wp-content/plugins / directory
I Activated the plugin through the Plugins menu in WordPress
Is it necessary to do anything else?
As detailed in the attached picture I can not click on the icon (Text Boxes)because it is disabled
I wait your help as soon as possible
Best Regards
Dario Silva
Total Comments by Dario Silva: 4
Give me URL of your blog, I will look that there happens…
Total Comments by minimus: 167
I do not have any post with Special Text Boxes, I try to insert but I do not know how to do
Best Regards
Dario
Total Comments by Dario Silva: 4
Oh! Excuse me! Just select the text which wish to highlight and press the “Insert Special Text Box” tool button. When you select text this button will be enabled.
Total Comments by minimus: 167
I have a problem when I press the button, I sent you by mail the picture of the result
Best Regards
Dario
Total Comments by Dario Silva: 4
There are not all plugin files uploaded to your blog. Repeat uploading!
Total Comments by minimus: 167
First of all sorry for the inconvenience, but happens the same thing. After the new upload
I keep it with the same problem.
Best Regards
Total Comments by Dario Silva: 4
I do not understand. Do I need to install more plug-ins for this to work or I am missing files for this one plug in?
Total Comments by Mike Conors: 2
I try to understand what happened … Your theme are using jQuery, may be this …
Total Comments by minimus: 167
Thanks for the ultra-fast reply to my former comment.
As you told me that there is a compatibility problem with Microaudio (because of jquery versioning and direct load) I dropped this plugin and migrated to WPAudio.
I still can’t see the box, the shadow and the icon from Mozilla Firefox 3.0.15 (on Windows 2000 and Windows Vista).
Using IE in Windows 2000, I see the box only after refreshing.
Using IE on Windows XP I see two boxes, with one line each.
Maybe there is another plugin compatibility issue.
Thanks in advance for your help.
Total Comments by Carlos Reynoso: 3
Try new version at first …
Total Comments by minimus: 167
Hello,
This is a great plugin. I have one issue though, I suspect related to conflict with jscript on other plugin: The icon shows up in the edit page/post screens in my dashboard, but it seems to be grayed out.
When I click it, I only see “JSCRIPT;” displayed on the lower left side of the browsers status line.
This happens on two of my sites: uijttewaal.com and pimuijttewaal.com
Do you have any suggestions what could be blocking this? Thanks a lot, Pim
Total Comments by Pim Uijttewaal: 7
Are you selecting any text before pressing tool button?
Total Comments by minimus: 167
Haha… That’s pretty lame of me! Thanks! That’s it.. sorry…
Pim
Total Comments by Pim Uijttewaal: 7
You are not the first … 😉
Total Comments by minimus: 167
Actually, I am selecting text and the box appears. I can select options and click insert. But nothing is getting inserted. I am having to manually enter the code and then again it is appearing in “Visual” tab while it should only be seen in “HTML” tab in “Add post” page of WordPress.
Total Comment by Bubaipal: 1
Hi I want to know how to insert a link inside the box. Thank you.
Total Comments by Edson Souza: 2
Hi I discovered how to insert links. Thanks for the plugin
Total Comments by Edson Souza: 2
😉
Total Comments by minimus: 167
Why not share it with the rest of us?
Total Comments by Charlie: 11
Nice plug in. Can the font size in the caption be increased? (and the size of the caption so that it matches the new, larger font size)?
Total Comments by Jeanette: 2
No in this version … Thanks!
Total Comments by minimus: 167
too bad. This is a good plug in that could be much better with that small change – after all, this plug in is primarily aesthetic, so the title size is a design issue.
Total Comments by Jeanette: 2
May be in next version … 😉
Total Comments by minimus: 167
Where can I find support. I have this great plug in installed at //thecommissionpayload.com/bonus and looks wonderfull on firefox but when I checked it on google chrome and explorer it does not the same at all. The color of the boxes do not show up making the drop down boxes missing and/or out of order. They do not drop down at all but in firefox 3.5 everything is perfect. Checked on 4 computers. All the same. Even went to a site with a multi browsers check for webmasters and still the same. Does this have to do with the wp theme i am using or the plug in itself?
Total Comments by Mike Conors: 2
Maybe you’re using an outdated Internet Explorer?
Total Comments by Charlie: 11
Hello
Thanks for the plugin . I understand that you can use the following code to insert directly in the template
which i understand. But how can I insert this with a caption text.
thanks
Total Comments by Jimmy: 2
Total Comments by minimus: 167
Thanks for the code and I really appreciate your support. thanks
Total Comments by Jimmy: 2
Anyone else having problems with this plugin working in WordPress 2.9? It has quit working altogether for me.
Total Comments by Charlie: 11
Hi, Charlie! What happened? I use WordPress 2.9.1 RC1 – plugin is working!
Total Comments by minimus: 167
Hello,
Thanks for the great plugin, it is very useful.
I have a question regarding usage: when I insert a text box, the body portion of the box is wider than the caption portion.
Hopefully this diagram will help:
|____caption____|
|_________body_________|
Any suggestions?
Thanks
Total Comment by Ram Raghavan: 1
Insert captioned box anywhere in blog and give me URL …
Total Comments by minimus: 167
[…] WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLibfor great work and sharing it with us writers! […]
hi friend, i use your plugin for all things, it’s the best ^^ but i want do something
look my home page, you can see one message for no-register user but i would like to disappear the box when the user are log, it’s possible ?
thank for your answer
Total Comments by bibiyanki: 2
Try this code:
Total Comments by minimus: 167
hi friend
it’s beautifull plugin, i use in my homepage for advise to no-member of register
and i would to know, i would to disappear the box when the user are log, it’s possible? because in my box i tell at the visitor to register for look the rules
thank for answer and your plugin
Total Comments by bibiyanki: 2
Hello,
I cant seem to use this anymore. The small window, the dialogue screen pops-up empty in edit/page post (after selecting text and clicking the icon in the visual editor)
Re-downloading/Reinstalling (many times) doesn’t work. I also tried chmod -R 755 wp-special-textboxes on the directory, but doenst help also. Do you have any more suggestions?
Thank you for any suggestions
Pim
Total Comments by Pim Uijttewaal: 7
[ Sorry for reposting this but I initially posted this by replying to an old message 🙁 ]
Hello,
I cant seem to use this anymore. The small window, the dialogue screen pops-up empty in edit/page post (after selecting text and clicking the icon in the visual editor)
Re-downloading/Reinstalling (many times) doesn’t work. I also tried chmod -R 755 wp-special-textboxes on the directory, but doenst help also. Do you have any more suggestions?
PS: Link to screenshot: //wimuijttewaal.nl/wp-content/gallery/geupload_door_gebruikers/example-of-dialogue-error-with-textbox.jpg
Thank you/ Domo Arrigato for any suggestions 🙂
Pim
Total Comments by Pim Uijttewaal: 7
I’m trying to repeat situation …
Total Comments by minimus: 167
Thank you so much. Please let me know, if there is anything I can do to be of any assistance / do some more testing.
I am on a dedicated server (just recently) so basically I can change anything myself.
I would very much like this plugin to work as it is such a nice added functionality for my blog.
Thanks again,
Pim
Total Comments by Pim Uijttewaal: 7
Hi, Pim!
Try next:
1. Click on any picture in any post (WYSIWYG mode) to open image properties window. If this window will be empty you have conflict of some plugin with TinyMCE editor. In this case deactivate all plugins one by one to find conflicting plugin. After each deactivation you must try to open STB Insert window to see is it empty or not. If is not empty, you have found a clashing plugin.
2. Otherwise you should open a file wp-special-textboxes/js/dialog.php by FTP client and check up it on content presence. This file is the content of STB Insert window.
Inform me about results … 😉
Total Comments by minimus: 167
Hello,
Thanks a million, for your tip! Using your instructions. I’ve now found that in fact, a plugin which I installed not so long ago (Contact Form 7 //contactform7.com/ ) Is the culprit. Deactivating it results in a working special text-box and re-anbling it causes the empty window.
I will report this to the author, maybe it helps?!
Thanks again for your help.
Pim
Total Comments by Pim Uijttewaal: 7
Hello,
FYI. Downloading the development version of Contacts 7 did do the trick.
( //downloads.wordpress.org/plugin/contact-form-7.zip )
Thanks again for your support.
Pim
Total Comments by Pim Uijttewaal: 7
Ok, Pim! 😉
Total Comments by minimus: 167
[…] WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLibfor great work and sharing it with us writers! [go […]
[…] WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLibfor great work and sharing it with us writers! [go […]
nice plugin ..
arabic language file :
//www.r-sn.com/wp/wp-content/plugins/download-monitor/download.php?id=wp-special-textboxes-ar.zip
I hope add :
– Customize position of image .
– select width – height of ( the box and Caption ) .
Total Comments by مدونة رسين: 4
Thanks a lot! I’ll add it to next version!
About your hopes:
– Customize position of image .
You want that I have added support of right-to-left text?
– select width – height of ( the box and Caption ) .
You can use “float mode” or define left and right margins. Or you want something else?
Total Comments by minimus: 167
I mean “td” and “th” ..
but
How do I insert (special-textboxes) in the file php ?
Total Comments by مدونة رسين: 4
or
Total Comments by minimus: 167
@mathemagenic was looking into this the other day and found //www.simplelib.com/?p=11 . haven't tried it yet though
@dina installing wp-special-textboxes //www.simplelib.com/?p=11 now, we'll see
Thanks for creating this great plugin! It’s exactly what I need for end of review data. I just have one question. When I separate data in a custom text box with hard returns, I get the equivalent of an extra return at the end of the box (a blank line with no text). If I remove the returns in the text box separating data, the last line of text appears at the bottom of the text box as it should. Any idea what might be causing this behavior?
Total Comments by Chuck Miller: 2
To know, what to do, it is necessary to know how it works. The plugin adds tags ‘div‘ in the beginning and the end of the selected text. To add the text consisting of paragraphs it is necessary to insert double line feed after a start short code, after the termination of each paragraph and before a finishing short code of a plugin.
If you simply wish to start the text from new string, insert a tag ‘br‘ or single line feed.
Total Comments by minimus: 167
Thanks! That did the trick. A donation will be forthcoming!
Total Comments by Chuck Miller: 2
Doesn’t work in 2.9.1 – button is not clickable.
Total Comment by Markus: 1
You have problem with some clashing plugin. Deactivate all plugins one by one to find conflicting plugin.
Total Comments by minimus: 167
when I try to use this plug , wp site gave me an internal server error.
why?
athaualpa theme and wp 2.9.2
Total Comment by giuliano: 1
I think you need more RAM (48Mb or, better, 64Mb)…
Total Comments by minimus: 167
Hi,
nice plugin, but why isn’t it working with qtranslate.
I only geht the boxes displayed in one language (the default language of the blog)
greetings
eferdi
Total Comments by eferdi: 2
I solvest the problem.
Qtransalte worked with the folder mode, in this mode the css files do not load.
after changeing qtranslate to the query mode all worked well
Total Comments by eferdi: 2
Thanks for info … 😉
Total Comments by minimus: 167
i try to validate the code generate when use special boxes and the ids of divs for each special box its the same “stb-container” and i wonder if i take out these id of all special boxes can affectsbehavior of these?
or the behavior will be the same?
Total Comments by godie: 2
“std-container” is a container for all types of STB. It is necessary for the correct display of STB in the floating mode. Also, this container is needed for the correct determination of the “parent/child” elements for the implementation of collapsing/expanding actions.
Total Comments by minimus: 167
Thanks for sharing this! I’ll definitely try this one! 😉
Total Comment by essay writing: 1
Great plugin! Is there anyway to change the font-family of the caption? Thanks.
Total Comment by andy: 1
Open file /wp-content/plugins/wp-special-textboxes/css/wp-special-textboxes.css.php, go to line 165 and add font-family style …
Total Comments by minimus: 167
Sent.. thanks for looking
Total Comments by andy bird: 5
I just discovered this plugin, and I really find it useful. I’m beginning to find all sorts of places on my sites that I can use it.
You can see it in action here:
//sitesubscribe.com/features/addons/
I like the ‘customize on the fly’ idea, but is there a way to incorporate a custom type that I can apply a CSS style?
That would make this plugin really great.
I’ve done some CSS customization already with the existing classes and like the result, but am looking to be able to add more custom special text box types (so I can change the image for example).
I’d like to be able to do something like this, and change the styles merely using CSS:
[ stextbox id=”discount” class=”savings”]
[ stextbox id=”external-link” class=”demo”]
Thanks ,
~Jeff
MileHighTechGuy
Total Comments by MileHighTechGuy: 8
Ok! Added to TODO List! 😉
Total Comments by minimus: 167
I love this plugin, but I’ve been unable to find a solution to a problem I’m having. How do I make boxes of different sizes? When I click on the Special Text Box icon in my WordPress menu it offers me “box width” as an option, but, no matter what or how I enter the desired width, the width defaults to the saved settings. I’ve tried defining the default margins at “0”, but that didn’t work either. I assume that since we’re offered the possibility of varying the widths that it is possible, but I can’t make that feature work. Any help would be much appreciated!
thank you!
Total Comment by Claude: 1
Box width is for float mode only! Use Float mode …
Total Comments by minimus: 167