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.
Hi minimus,
I would like to resize the special text box width in a static page. I saw, that there is a “Insert Special text Box” dialog which can be activated with a special button. I can’t find this button. Can you help me?
Thanks in advance…
gabor
Total Comment by Gabor: 1
Button in toolbar of visual editor. Just select any text…
Hi there, is there any way to change the size of the small grey drop down arrow for the captioned boxes? It would be great if I could make it more prominent.
Apart from that, it’s a great plugin!
Thanks, Hannah
Total Comments by Hannah: 2
Or, is there any way that I can make the whole caption bar a link to expand the drop down – ie that the whole bar would work like the arrow? cheers.
Total Comments by Hannah: 2
WordPress plugin to add important text boxes on your website: //t.co/ApQxO1L otherwise code your own: with css //t.co/WqLcx5k
WordPress plugin to add important text boxes on your website: //t.co/gGDZaVL otherwise code your own: with css //t.co/vcAgQnM
How do I generate or find the short code?
Thaks
Total Comment by Ben: 1
I am trying to change the size of the boxes and even when I enter a size in the selection box I still get a full width box. How can I fix it?
Thank you this is a great plugin.
Total Comments by Mireille: 2
Only boxes in float mode can have custom width…
Thank you that is a great help. I love your plugin and I will try the float mode as soon as I can.
Total Comments by Mireille: 2
Hi,
I am able to install and activate the plugin, modify values to create a custom look, and have used the plugin button to add the shortcodes around the text I would like to highlight in a text box.
However, nothing happens. Here is an example:
//www.cihe.co.uk/test-2/
Where it says “Text box!!!” there should be a text box.
In the line below where it says “On the fly text box” I have added my own values in “Extended Settings” but as you can see they are not formatting properly, basically its just colouring the background.
I have a feeling this is something to do with our theme, or perhaps one of the plugins. As I did not create the theme we are using I don’t know why it would not allow the plugin to utilise its own CSS. I am also trying with each plugin disabled one by one but I have to be careful not to lose settings so this is time consuming.
Any suggestions much appreciated!
C
Total Comment by Constantino: 1
I’m just trying to put some text and links about a series of blogs in a box at the beginning. This seems like a good way to do it but i can’t figure it out. Look at the website to see the series. I just added some code to make the boxes in there. Can you help show me how I would use special text box instead. I went into the settings in my admin and made them like I want. I just don’t understand what code to use and how to say which text and links to surround.
thanks,
Duke
Total Comment by Duke Dillard: 1
Just select needed text and select box from insertion dialog…
Whenever I disable and re-enable the plugin (i.e. to debug some other problem), I lose the custom box settings. Is there a way to prevent that from happening? If not, could you please fix this in the next version?
Total Comment by Housing Revolution: 1
Now I am preparing to publish a new version of the plugin. Principally new system of keeping box’s styles already is developed…
Hello! Thank you for this plugin! I really find this plugin of yours useful.
I have some questions though.
How come the WP-special boxes takes a lot of resources to load? And sometimes causing my site to crash (500 internal server error). I’m using hostgator so its limited to 25 processes. Everytime I look onto the process list, I see a lot of it coming from this plugin.
Glad if you can help me with this problem.
Will there be an update soon?
Total Comments by Mike: 2
Now I am preparing to publish a new version of the plugin. I will try to accommodate your wishes …
Great plugin!
I do have a problem though. I set it to “float mode” and put 100px in the “box width” field but it still is the whole length of my text area.
Thanks,
Jeff
Total Comments by Jeff Sneeringer: 2
I figured it out. It doesn’t wrap the words!
Total Comments by Jeff Sneeringer: 2
I have installed the special text box plug in and it works fine in firefox expands and collapses fine. In IE it loads as collasped (what I wanted) you can click on the arrow and it will expand and collaspe once but when you try it again it will not work. any suggestions. I have looked over the comments and have tried different settings for the last hour. I have enabled the collapsing and expanding.
Also is there any way to have some of the text box showing even when it is collapsed?
thank you for your time would love to get this working and buy you a coffee!
Paula
Total Comments by Paula: 2
Hello, I have downloaded your stb and it works fine in firefox I love it but not in IE 7,8. I am using twenty eleven theme, I only have this plugin activated. I have tried different things but nothing seems to change. It is collapsed when page is loaded (I wanted that) then it expands when clicked on arrow and then collaspes when click again but then it won’t work after the one time. Any ideas what I may have done wrong? On this page they work fine in IE browser.
Also while I’m here a 2 question if you don’t mind. Is there a way to have some of the text box showing while it is collasped and then expands more once the arrow is clicked?
hope that makes sense
Paula
Total Comments by paula: 2
Hello! Thank you for this plugin! Its realy very good!
But I have a wish. Сan you make opening and closing of the block by click on the title? or is it done? If it’s done how can I use it?
Total Comments by Alex: 2
Wait new (4) version… Example!
It’s great! Thank you!
Total Comments by Alex: 2
Hello! When will be the update?
Total Comments by Mike: 2
Very soon …
I love this WordPress plugin for adding text boxes to posts //t.co/o3DKGSNF
I love this WordPress plugin for adding text boxes to posts //t.co/NNq9PIEG
I love this WordPress plugin for adding text boxes to posts //t.co/MhX2tpMG
I like the look of the new version, however the new version doesn’t render inside the wordpress post tabs plugin anymore. I assume it’s because of javascript. This conflict will likely kill many uses for your users who are trying to use special text boxes inside other plugins. Can this be fixed somehow?
//wordpress.org/extend/plugins/wordpress-post-tabs/
Total Comments by dgodfather: 10
Thanks for info! I will think how to fix it …
Try these changes in file stb-class.php:
Line 74:
to
And line 274:
to
I want to know result of changes!
This didn’t change anything.
Total Comments by dgodfather: 10
Any other suggestions?
Total Comments by dgodfather: 10
I am having the same problem of not showing up in Post pages.
I see a very tiny box (2-5 pixels square) in the upper left corner of the post.
eDave
Total Comments by eDave: 20
Try this beta of next version …
This version does not fix my problem.
Total Comments by dgodfather: 10
If you add a checkbox option into the settings to not load your bundled version of jquery it may fix my problem. I think it may be trying to load multiple versions or the same library.
Total Comments by dgodfather: 10
URL of blog?
//profaneentertainment.com/league/frag-league-wiki/
Total Comments by dgodfather: 10
Firebug for Firefox reports this:
opts.textShadow is undefined
//profaneentertainment.com/league/wp-content/plugins/wp-special-textboxes/js/jquery.stb.min.js?ver=4.1.68
Line 7
Total Comments by dgodfather: 10
This too:
Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMCanvasRenderingContext2D.fillText]
//profaneentertainment.com/league/wp-content/plugins/wp-special-textboxes/js/jquery.stb.min.js?ver=4.1.68
Line 7
Total Comments by dgodfather: 10
Look over here! Do you like it?
It looks good in IE (but not FF – see attached), however I’d like to use the javascript method. I’m not having problems with the CSS method.
Firefox – //postimage.org/image/esufwi8bf/
Total Comments by dgodfather: 10
Look again! You can test it…
Looks great and works great! Thanks for creating a fix. I really do appreciate it.
Total Comments by dgodfather: 10
The beta didn’t fix my problem either
Total Comments by eDave: 20
URL?
//atwatermerced912ers.com/
//atwatermerced912ers.com/2010/03/17/mission-statement/
look in the page source and you will see the table missing that shows up as two cells only.
Our Mission
To propagate the Founders Constitutional values and to preserve the Republic under God through self education.
Our Vision
To become aware, articulate and persuasive individuals – comfortable and confident to speak boldly on our personal values.
Total Comments by eDave: 20
I did figure out that this is a problem in Javascript mode, but not in CSS mode.
Total Comments by eDave: 20
WordPress plugin Special Text Boxes 4.0.65 is released! //t.co/KCIoN8yq
Hey Minimus,
Using your plugin on a couple of blogs, been very impressed with the last few round of updates, you’ve really taken it up a notch. On one blog though I found the latest update stopped the short code tags working altogether. The plugin backend functions fine and it doesn’t hinder any blog functionality it just doesn’t add the text box styling in to pages/posts.
Any ideas or can a way to contact you to go through see if we can find the bug?
Total Comments by Craig: 2
Give me URL of page containing bug of STB output …
Bug is fixed. Try fixed version …
Hey,
Thanks for the reply, sorry I was a little slow trying out the modded version.
Still not go JS version working but CSS collapsing boxes work now.
//bit.ly/sjdFn7 is the page I am testing this stuff on, was all working fine until last update! 🙂 I have “mixed” mode on at the moment
Total Comments by Craig: 2
I made some changes – you must redownload plugin again… It’s needed for debug…
Love the plugin! Good Stuff
the text and graphics on the right hand side of the javascript dropdown box is overlapping to the post with outside of the box. take a look at the second box on the sticky post. tnx
//bootsnslippers.com/
Total Comments by eDave: 20
Thanks for good words!
About overlapping! I can not do anything in this case, since the width of child element (content of box) is more than width of parent element (content of post). Sorry!
I see that in the graphic, but the text should be wrapping?
Total Comments by eDave: 20
Also, the smaller graphic is right justified, and overlapping the STB boarders.
Total Comments by eDave: 20
No! The big image increases width of the parent container and the text is arranged according to new width of the container containing it.
When I upgraded to the latest version of WordPress, or maybe it was when I upgraded the SPT plugin, Special Text Boxes stopped working. Thanks for any help you can provide.
Total Comments by Rick: 3
Sorry, I meant to say STB no SPT
When I upgraded to the latest version of WordPress, or maybe it was when I upgraded the SPT plugin, Special Text Boxes stopped working. Thanks for any help you can provide.
Total Comments by Rick: 3
FIXED, please disregard my previous comments. Special Text Boxes magically reappeared and everything looks beautiful. I think the problem was that after the upgrade I needed to change the settings for Special Text Boxes and I changed them BUT . . I didn’t see the changes right away because the server at my website host was caching the page and showing me the old version, then a day later I am now seeing the new version.
Total Comments by Rick: 3
This plugin just work wordpress 2.8, not to wordpress 3.3.1?
Total Comment by Sholeh: 1
Why do you think so? It works under WP 3.3.1 …
Hello, I appreciate so much your work, however since the last version of STB and WordPress, the javascript button in TinyMCE does not work any more. Did you already encounter the problem ?
Total Comment by Florian: 1
Did you select any text before clicking button?
Hi there,
Is there any way to alter the font of the Title in the special text box?
Thanks!
Omma
Total Comments by Omma: 3
Parameters->Javascript for js mode …
Thanks for this. I think I found a way to do it that works with the boxes I have (not the javascript ones) – in the ‘Special Text Boxes > Settings > CSS tab’ there is an option to change the font of the caption 🙂
Total Comments by Omma: 3
Hi,
love the plugin but I have an Opera only issue with it (works fine with FireFox). When I click on the TinyMCE, the code is automatically entered twice, like this:
Info
Info
I can manually remove the second part and then it’s fine but I though I let you know anyways.
Total Comments by crinrict: 2
Since the code was replace in the previous post, I added some spaces so you see how it looks in my Visual Tab.
[st extbox id=”info” defcaption=”true”]Das Bild wurde anonymisiert. Bild und Name des Sims sind weiterhin vorhanden.[/st extbox] [st extbox id=”info” defcaption=”true”][/st extbox]
Total Comments by crinrict: 2
To my mind this is problem of Opera…
Hi Minimus, any updates about why 4.2.70 breaks the shortcodes of the MP3-jPlayer plugin?
//forum.simplelib.com/showthread.php?572-STB-4.2.70-breaks-shortcode-for-plugin-MP3-jPlayer
Thanks!
Peter
Total Comment by Peter: 1
Hi, since a few Weeks STB gives me, when i click on the icon, in the Cofigurationwindow only an Internal Server Error. See Screenshot
What can i do?
Thy for help!
Total Comment by tribun: 1
At first, look the “Error log” in your hosting account…