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="http://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' => "http://www.simplelib.com/images/wp-b.png", "big" => "true")); 
?>

<?php

stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "http://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' => "http://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' => "http://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: 4.3.72, updated: February 13, 2012,
Requires WP version: 3.0 or higher, tested up to: 3.3.2.
Download (66 401 hits) (32 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

Awards

Popularity: 97%

Comments

Jason Mathes says:

December 8, 2012 at 7:57 pm

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

December 12, 2012 at 8:29 pm

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 says:
  
  December 13, 2012 at 12:48 pm
  
  All works! Tested! Just select any text…
  
  Maybe some other plugin is generating a bug…
  
  - Jason Mathes says:
    
    January 16, 2013 at 11:43 pm
    
    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 says:

December 16, 2012 at 7:59 pm

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 says:
  
  December 16, 2012 at 8:07 pm
  
  Using javascript box without caption.
  Total Comments by whome: 3
  
  - whome says:
    
    December 16, 2012 at 8:13 pm
    
    Phhwww sorry for spamming. I found the code for it image=”null”
    Total Comments by whome: 3
    
Kristel P says:

January 8, 2013 at 5:58 am

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 http://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 says:

February 3, 2013 at 7:10 pm

It works – my WP is 3.5.1. Thanks a lots
Total Comment by Học Nguyễn: 1

Robert says:

March 12, 2013 at 1:15 pm

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

April 18, 2013 at 8:48 pm

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

May 1, 2013 at 11:11 am

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

May 7, 2013 at 4:41 pm

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

WordPress plugin Special Text Boxes

Examples

CSS mode

Javascript mode

Installation

Settings

Styles Repository

Usage

Customising “On The Fly”

Special Text Box anywhere in blog

Inserting Special Text Box into Special Text Box

CSS mode

Javascript mode

Special Text widget

Download

Tests

Awards

Comments

Trackbacks

Speak Your Mind Cancel reply

eNews & Updates

Donate Now

Archives

Popular Posts

Recent Posts

Recent Comments

WordPress plugin Special Text Boxes

Examples

CSS mode

Javascript mode

Installation

Settings

Styles Repository

Usage

Customising “On The Fly”

Special Text Box anywhere in blog

Inserting Special Text Box into Special Text Box

CSS mode

Javascript mode

Special Text widget

Download

Tests

Awards

Related posts

Comments

Trackbacks

Speak Your Mind Cancel reply

eNews & Updates

Donate Now

Archives

Popular Posts

Recent Posts

Recent Comments