View Larger Image

WordPress plugin Special Text Boxes

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

This is example of alert special textbox. This short code inserted with id “alert”. Highlighted text may be any length you need.

This is example of download special textbox. This short code inserted with id “download”.

Info Example

This is example of info special textbox. This short code inserted with id “info”.

جوجل

لإنشاء حساب جوجل ، انتقل إلى صفحة إنشاء حساب ، أدخل عنوان البريد الالكتروني الحالي واختيار كلمة مرور. بعد الانتهاء من التسجيل سوف تتلقى رسالة تأكيد بالبريد الإلكتروني. فقط انقر على الوصلة في أن البريد الإلكتروني لاستكمال عملية التحقق. [غوغل] حساب يتيح الوصول إلى مجموعة متنوعة من صور ، بما في ذلك تسجيل الدخول ، وسجل الويب ، بيكاسا ، وكثير غيرها.

Javascript mode

This is example of warning special textbox. This short code inserted with id “warning”. Inserting short code without ID will have same effect. 😉

This is example of Black box. This short code inserted with id “black”.

Info Caption

This is example of Info box. This short code inserted with id “info”.

جوجل

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:

[stextbox id="defined_id"]Highlighted text and/or short code(s)[/stextbox]
OR
[stextbox id="defined_id" caption="Some Caption"]Highlighted text and/or short code(s)[/stextbox]

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:

[stextbox id="download" caption="Download"][download id="4"][/stextbox]

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.

Warning

Use Grey Box (id=”grey”) only for highlighting short codes of another plugins. Text Box with this id not parsing any short codes.

Customising “On The Fly”

This is example of customised alert special textbox. This short code inserted with id “alert”. This short code inserted with id “alert” and customised with short code options.

This is example of Customising on the Fly

This is example of customised alert special textbox. This short code inserted with id “alert” and customised with short code options.

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)

Short Code of Example Above

[stextbox id="alert" caption="This is example of Customising on the Fly" color="000000" ccolor="ffffff" bgcolor="f7cdf5" cbgcolor="f844ee" bcolor="f844ee" image="//www.simplelib.com/wp-content/plugins/wp-special-textboxes/images/heart.png"]This is example of customised alert special textbox. This short code inserted with id “alert” and customised with short code options.[/stextbox]

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

function stbHighlightText( $content = null, $id = 'warning', $caption = '', $atts = null )

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)

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' => ''
);

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:

<?php 
  stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); 
?>

<?php

stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true"));

<?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;
} 
?>

<?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:

[stextbox id="info" defcaption="true"]Some text[stb id="download" defcaption="true" collapsing="false"]Some text in the indoor box[/stb][/stextbox]

CSS mode

Info

Some text

Download

Some text in the indoor box

Javascript mode

Info

Some text

Download

Some text in the indoor box

Special Text widget

Special Text widget wrote with using WordPress Widget Factory technology and this one can work only under WordPress 2.8 and higher

Special Text widget. Admin Page

Use PHP tags for inserting PHP codes in PHP evaluation mode.

Download

Special Text Boxes
Highlights any portion of text as text in the colored boxes.

Author: minimus, version: 6.2.5, updated: November 14, 2024,
Requires WP version: 5.6 or higher, tested up to: 6.7.1.
Download (248 643 hits) (20 votes)

Tests

Tested under Windows

1. Internet Explorer 7..9
2. Mozilla FireFox 3 .. 9
3. Opera 10.0 .. 11.52
4. Google Chrome 1.0.154.53 .. 15.0.874.121
5. Apple Safari 3.1.2 .. 5.1.1

Video Lessons

Awards

By minimus|2024-05-13T14:57:15+02:00March 8, 2009|Featured Posts, Wordpress, Wordpress Plugins|504 Comments

About the Author: minimus

Lead Frontend Developer (React, Node.js) at Digitals Technologies & Platforms. Also: Development using Object Pascal, C#, SQL, PHP, Javascript, TypeScript.

504 Comments

terry March 1, 2012 at 7:08 am - Reply

any way to get white space into caption”

example…

Chapter 1        In the Begining

instead of

Chapter 1 In the Begining




Total Comments by terry: 2
FreelanceWP.com March 8, 2012 at 7:15 am - Reply

WordPress plugin Special Text Boxes | SimpleLib //t.co/ghpuFsYs
CSS Styles: Favorite Colored Text Boxes, Callouts, Sidebars, and Quotes March 22, 2012 at 11:30 pm - Reply

[…] WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLib for great work and sharing it with us writers! [↩ go […]
Liz May 15, 2012 at 11:51 pm - Reply

This is a great plugin, thank you! I’ve made interesting use of it for a formatted Specials Board, by modding the CSS outside the plugin. However I’ve put in text links and they don’t appear clickable- why is this? Can it be fixed?
Thanks again, –Liz
Total Comments by Liz: 2
Liz May 16, 2012 at 12:36 am - Reply

Oh I found it! It was my use of floats. Works great now! –L
Total Comments by Liz: 2
Carsten May 24, 2012 at 7:53 pm - Reply

Hi there,

I have installed the plugin, put the settings, put it the short codes in a page: I get show the text box itself, but the opening/closing by using the arrow on the right does not work, as if it was not clickable… any idea why this could have happened.. running on latest version of WordPress and latest version of chrome..

Many thanks

Carsten
Total Comments by Carsten: 2
Carsten May 24, 2012 at 9:50 pm - Reply

Hi there,

big issue: Since I had once activated this plugin, suddenly all my main menu texts have been added a SHADOW! — which realldy dont need… the CSS seems fine, I cannot find any shadow addings there in the font style (like a text decoration).. PLEASE HELP – WHERE has this plugin being able to cause this? Also deleting the Plugin has not resolved this issue..

Many thanks! Carsten
Total Comments by Carsten: 2
- minimus June 3, 2012 at 8:54 am - Reply
  
  This problem is not problem of this plugin…
Omma June 9, 2012 at 7:16 pm - Reply

Hi there,
Such a great plugin, I use it a lot.
I am having trouble using it with Suffusion in the left-hand sidebar.
Can you tell me if there is a way to use this plugin for a sidebar in the Suffusion theme without breaking the footer? At the moment, it pushes the footer to the far right.
Thanks!
Total Comments by Omma: 3
Iain June 17, 2012 at 9:48 pm - Reply

Hi Minimus.

I’m trying to get the CSS mode working but it doesn’t want to display correctly.
The javascript method displays fine.
The code I am using us:

Why eScribe?

text here

Here is a screen capture of the result showing js at top and css at bottom:

Hopefully this image can be seen.

Regards
Iain
Total Comments by Iain: 2
- Iain June 17, 2012 at 9:53 pm - Reply
  
  Well that post didn’t display how I wanted it to.
  Here is the code again:
  [ stextbox id="custom" caption="Why eScribe?" mode="css" shadow="true" image="null" ] text here [ /stextbox ]
  url to screen capture is //www.escribecaptions.com.au/stb.png
  Total Comments by Iain: 2
Anderson July 11, 2012 at 6:31 am - Reply

Hello, I am encountering a problem with this plugin, it works perfectly, but I need it enters the screen with the option closed, so when you click the “+” it expands and opens the text, anyone know how to do this?
Total Comment by Anderson: 1
- minimus July 11, 2012 at 6:51 pm - Reply
  
  Use option collapsed=true for shortcodes…
Andy August 11, 2012 at 4:38 pm - Reply

I have just moved a site to a new domain and copied all the data files etc.
My big problem is that the special text boxes which I was using on the old site have not copied across. Nothing shows at all in published mode.
I am not sure, but in the ‘styles’ settings there used to be an image showing in the list (old site), now it only shows the word instead. ie, instead of showing the image for ‘info’ it now just says ‘info’!
I have tried uninstalling and reinstalling, but nothing changed.
How do I get the box back along with the images?
Many thanks for assistance.
Andy
Total Comments by Andy: 2
- minimus August 13, 2012 at 6:59 pm - Reply
  
  Download plugin from WordPress.org and reinstall again …
  - Andy August 13, 2012 at 7:34 pm - Reply
    
    Thanks for the reply.
    I did that, but nothing changed.
    Total Comments by Andy: 2
    - minimus August 13, 2012 at 8:11 pm - Reply
      
      Register on support forum and send me PM with registration data (account) created for me on you site.
Per Bergsjö August 22, 2012 at 11:38 am - Reply

@lauhakari Tack! Men det jag söker är en sjukt enkel lösning. Typ //t.co/ZL27SiqH. Men helt kodfritt, det är ovana pers som ska ha.
kelly August 31, 2012 at 1:26 am - Reply

Great plugin, works perfectly. Only thing I can’t seem to alter is the font style of the caption. I was able to change the size and font family in Javascript, but I can’t figure out how to UNBOLD the caption. I do believe it is bolded (or possibly a background shadow in the same color). this is only an issue in the caption. Any help would be greatly appreciated.
Total Comment by kelly: 1
jason September 9, 2012 at 7:19 pm - Reply

hello, can you tell me why its not showing text shadows in IE9?
text shadows show up fine in the other 4 browsers..
I’m using css mode but have tried all 3..
no dice.
im guessing a simple fix..

Total Comment by jason: 1
Tuan Vo October 3, 2012 at 5:54 am - Reply

Hello Minimus,
Today i received a announcement from my hosting that this script is caused of overload server wp-plugins/wp-special-textboxes/css/wp-special-textboxes.css.php
Could you please take a look to find out what’s happend?
p/s: i’m using lastest version of theme and plugin.
Regards,
Tuan Vo.
Total Comment by Tuan Vo: 1
BON October 12, 2012 at 5:36 am - Reply

very nice and useful plug in. but just one question, will it affect SEO? what will happen to those texts inside the codes..

thanks!
Total Comment by BON: 1
Shalu October 16, 2012 at 12:19 am - Reply

This is a good plugin that highlights the text. I could do with something like this.
Total Comment by Shalu: 1
Template | codezkingz October 23, 2012 at 2:33 pm - Reply

[…] WordPress plugin Special Text Boxes […]
Ryan November 2, 2012 at 12:53 am - Reply

Is there any way I can put columns into a box so I have to parallel lists. This is what I have now but it doesn’t form the columns just shows the short code for them.

[one_third last=”no”]
<ul>
    <li>Newspapers</li>
    <li>Magazines</li>
    <li>Books</li>
    <li>Textbooks</li>
    <li>Appliance Manuals</li>
    <li>Prescription Labels</li>
</ul>
[/one_third]
[one_third last=”yes”]
<ul>
    <li>Forms at a Doctors’ Office</li>
    <li>Employment Applications</li>
    <li>Drivers’ License Exam</li>
    <li>Voting Ballots</li>
    <li>Birthday Cards</li>
    <li>The Internet</li>
</ul>
[/one_third]

Total Comment by Ryan: 1
jazzymoods November 4, 2012 at 9:54 pm - Reply

Hello,
I have implemented this great plugin on a page that takes some time to load because of an image slider. Problem: I see the content of textbox first, and after some time I get the collapsed visual mode and the txt disappears. How can I make the text unvisible until the plugin is fully loaded? tried visibility=hidden in a div but then it stays invisible forever. Where can I switch the CSS or something to visibilty:visible as soon as the plugin is full loaded?
Thank you

Total Comment by jazzymoods: 1
Ayman November 23, 2012 at 7:59 pm - Reply

hello, i have problem with Special Text Box. stop working in my blog, when i add new post and click insert special text box, its show me white empty box.
any suggest please ? the plugin very importent to me.

Total Comment by Ayman: 1
Jason Mathes December 8, 2012 at 7:57 pm - Reply

I have a strange issue when I install/enable your plugin – I can’t update any plugins or use any plugins that make calls to external websites.

Soon as I disable your plugin? Things work again.

Any idea what could be up?

Thanks – and great plugin btw!
Total Comments by Jason Mathes: 2
dementiatoday December 12, 2012 at 8:29 pm - Reply

Hi There, I love this plugin, but it doesn’t seem to work with WordPress 3.5. The icon does not show up in the Visual Editor. Help! Thank you.
Total Comments by dementiatoday: 2
- minimus December 13, 2012 at 12:48 pm - Reply
  
  All works! Tested! Just select any text…
  
  Maybe some other plugin is generating a bug…
  - Jason Mathes January 16, 2013 at 11:43 pm - Reply
    
    True – at this point who knows what it could be. Just knew that when I disabled this one things magically started working. I’ll have to take a look again! Thanks!
    Total Comments by Jason Mathes: 2
whome December 16, 2012 at 7:59 pm - Reply

Hey! Is it possible to remove all the Icons and just use centered text. When I remove images and enter text in the box there is still empty space in left where the icon was. How to remove that empty space?
Total Comments by whome: 3
- whome December 16, 2012 at 8:07 pm - Reply
  
  Using javascript box without caption.
  Total Comments by whome: 3
  - whome December 16, 2012 at 8:13 pm - Reply
    
    Phhwww sorry for spamming. I found the code for it image=”null”
    Total Comments by whome: 3
Kristel P January 8, 2013 at 5:58 am - Reply

I have installed the Special Tex Box plugin to my website and my intention was to have 5 floating text boxes (3 floated left and 2 floated right). I am a complete amateur so I tend to make an “un”educated guess on the short codes etc. The floating works correctly on IE and safari however does not workcorrectly in Mozilla Firefox or Opera. In Mozilla Forefox and Opera only the first floated text box is shown and scroll bars appear in the body of page.
I have used

the page in question is //www.rapturephotography.com.au/packages/
Any help with what I did wrong would be appreciated
Total Comment by Kristel P: 1
Học Nguyễn February 3, 2013 at 7:10 pm - Reply

It works – my WP is 3.5.1. Thanks a lots 🙂
Total Comment by Học Nguyễn: 1
Robert March 12, 2013 at 1:15 pm - Reply

On this page examples, I see nice shades filling the boxes. I’m using the plugin in the latest wordpress 3.5.x and I can’t see the same shades. The boxes are filled of a flat color, i.e. the warning box is Orange caption bar and thin border and it is filled of a really light orange.

Can you kindly explain how to obtain the same graphic effect?

P.S. on the wordpress plugins page, this plugin is reported to be tested up to wordpress 3.3.x , are you planning to update its compatibility?

Thank you

Robert
Total Comment by Robert: 1
Jennifer April 18, 2013 at 8:48 pm - Reply

Hi Minimus,

How can I reduce the spacing that appears after the special text box. On my website, the spacing is too large. Also, I noticed a possible bug where a gray line appears after the special text box on my website. Any ideas on how to fix it?

Thank you, Jennifer

Total Comments by Jennifer: 2
Sue Deal May 1, 2013 at 11:11 am - Reply

Hi,

I am trying to create several of the same text boxes on one page but it will only let me do one. The others appear as plain text out of a text box. Why is this? What do I need to do?

They are just plain CSS boxes.
Total Comment by Sue Deal: 1
Jami Howard May 7, 2013 at 4:41 pm - Reply

One of my clients is using this plugin on her website and has immediately experienced slow-loading times. I’ve installed the P3 Plugin to check on what is causing the drag and it appears that your plugin is the culprit. Any ideas?
Total Comment by Jami Howard: 1