Put a Spotlight on whats important.

Spotlighter is a

cool new tool

that will help you, the blogger (wp-er), to divert the

users attention

in various ways. With Spotlighter you can convert the content to

Modal-esque Boxes

,

Highlighted Text

&

External Action

.

 

Creating all the above is pretty simple, and requires no prior knowledge in any coding language. Its done using simple shortcode, which I’m going to explain here in this page. Or, with the included shortcode generator, that will let you add spotlights without entering any shortcode!

 

(Widgets were generated using the powerful Widgedi!. Toggling is done with the cool Toggler.)

 

In order to Spotlight content, you need to define 2 elements. A  

Switch

and a

Target

  :

 

  • The Switch is the element that acts as, well, the switch. It is the part of the page you click on in order to activate the spotlight. Creating a Switch Element, you add the line role = “switch”, in the shortcode. Which makes the shortcode look like this :

    [spotlight role="switch"]some-text[/spotlight] 

  • The Target is the content you want to spotlight. To define the target content, you wrap it in a spotlight shortcode with the role = “target”. The shortcode would look like this :

    [spotlight role="target"]some-text[/spotlight]  

 

Lets start with a simple example.

 

Example #1 :

In all examples you can click on the word ‘switch’ to see what happens.

 

Thats the

Switch

(you can click on it), and, well, the

Target

.

 

code :

Thats the [spotlight role="switch"  connector="first-example"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target" connector="first-example"]Target[/spotlight].

 

As you can see, we only used the “role” attribute here, so, all the other attributes are being fired up in their default state. I also added the connector attribute. The connector simply connects between a target and its switch. Once a switch is being clicked, it goes and starts looking for a target with the same connector.

 

Lets go step by step at what happened here, and gradually add features.

First of all, once the switch is clicked, you can see that all the page (apart from our target element)  has turned a little bit darker. Thats because Spotlighter has covered all the the page with a black element thats a little opaque. Think of it as a Carpet. Like the entire page is covered with a little bit opaque carpet.

 

We can change the color of the carpet and its opacity (by default, the color is black and the opacity is 70%).

 

Example #2 :

Switch

(you can click on it), and, well, the

Target

.

 

code :

[spotlight role="switch" carpet_color="blue" carpet_opacity="20"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target"]Target[/spotlight].

 

It looks pretty bad here, but some websites will probably have a color scheme where a blue carpet would be more appropriate. I’ve introduced here two new attributes to control the carpet : ‘carpet_color‘ and ‘carpet_opacity‘.

 

Both are kind of self explanatory -

  • carpet_color‘ accepts almost any color that you can think of. Supports hex (usage is, carpet_color = ‘#ff0000′, for red background, for example) colors and rgba (usag is, carpet_color = ‘rgba(255,0,0,1)’, for red not opaque background), if you are not sure – just use simple color names. 
  • carpet_opacity’ accepts any number between 0 and 100, and represents the precentage of how opaque the carpet will be. 0 being complete transparent, and 100 as not transparent at all. if you are using rgba color, then its useless to use carpet_opacity as well.
After the Carpet has been laid down over our non-spotlighted content (which is everything but the content we want to spotlight). Its time to put a spotlight on our target. 

 

A spotlight can be anything from just changing the color of the text (as will be shown in the following Example) to actually creating some sort of a “spotlight” around it (as will be shown in the next examples).

 

Example #3 :

Switch

(you can click on it), and, well, the

Target

.

 

code:

[spotlight role="switch"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target" text_color="red"]Target[/spotlight]

 

Simply by adding the “text_color” attribute to a target element you can change its color. If you don’t type anything, it will maintain the predefined color.

 

Example #4 :

Switch

(you can click on it), and, well, the

Target

.

 

code :

[spotlight role="switch" carpet_color="black"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target" text_color="green" background="white" pad="10" radius="5" border_width="2" border_color="red"]Target[/spotlight]

 

You can furthermore emphasize the target by creating a “spotlight” behind it. The attributes that control the spotlight are :

  • background - type any color to that attribute to create an area behind the target (that”ll have the color you entered). The default color is transparent.
  • pad/padding - thats the padding distance between the edges of the background area and the target text. Its in pixels. The default is 5.
  • radius – thats radius (in pixels) of the border of the background area. default is zero.
  • border_width & border_color & border_style –  those three define the border (in pixels), color and style (solid, dashed, dotted) of the background area borders. default is zero, black & solid.

  

You can make a switch control several targets simply by assigning the same connector to those targets. 

 

Example #5 :

Switch

(you can click on it), and, well, the

Target

, or maybe, this

Target

? or …

This one

?.

 

code :

[spotlight role="switch" connector="e5" carpet_color="black"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target" connector="e5" text_color="green" background="white" pad="10" radius="5" border_width="2" border_color="black"]Target[/spotlight], or maybe, this [spotlight role="target" connector="e5" text_color="blue"]Target[/spotlight] ? or ... [spotlight role="target" connector="e5" text_color="blue" background="yellow"]This one[/spotlight] ?.

 

I’m sure some of you would find a cool use for this – you can spotlight elements that are external to the post. for example, in this page – the comments area is contained in a divider block that has the id “respond” (take a look at the source, if you don’t believe me). You can create a switch in assign it that that external “respond” element.

 

For Example #6 :

 

Switch

(you can click on it), and, well, the Target.

 

code :

[spotlight role="switch" ext="respond" carpet_color="black"]Switch[/spotlight] (you can click on it), and, well, the Target.

Currently, you can choose between two spotlighting effects. toggle and fade. Spotlighting effect means how the spotlight is being shown. if you choose fade then the content and the carpet will fade in and fade out on click.

 

For example :

Switch

(you can click on it), and, well, the

Target

.

 

And, the code :

[spotlight role="switch" connector="e5" carpet_color="black" effect="fade"]Switch[/spotlight] (you can click on it), and, well, the [spotlight role="target" connector="e5" text_color="green" background="white" pad="10" radius="5" border_width="2" border_color="red"]Target[/spotlight].

Spotlighter has the following Attributes :

 

role. accepts : switch | target (required)

With role you define the element, either a Switch or Target. The difference is described in detail in the text above.

 

connector. accepts : any word or combination of words (default is ‘default’).

With this one you help the Switch find its Target. Give both of them the same Connector key. The less words you use for the key the better. One word should be enough.

 

ext. accepets : the id or class name of the external element you want to spotlight.

Described above.

 

effect. accepets : toggle or fade (default is toggle)

Choose the effect of the spotlighting.

 

Carpet Attributes (go with role=switch)

carpet_color. accepts : most color names and/or hex color (any css acceptable color) (default is ‘black‘)

The carpet’s color. Described above.

 

carpet_opacity. accepts : a number between 0 and 100 (default is 70)

The attribute defines how opaque would be the carpet. 0 is completely transparent, 100 is not transparent at all. Described above.

 

Target Attributes (go with role=target)

 

Spotlighter Target Explained

 

text_color.accepts : most color names and/or hex color (any css acceptable color) (default is ‘none‘)

That attribute goes with the ‘target’ element, and defines the color of the text thats contained inside the target. Default is none, which means that the text of the color is unchanged.

 

background.accepts : most color names and/or hex color (any css acceptable color) (default is ‘none‘)

The spotlight element’s background. If you don’t want any background to your element, either type ‘none’, ‘transparent’ or just leave it as the default is transparent.

 

pad/padding.accepts : a numbet (default is 5)

Like shown in the image above, ‘pad’ sets the distance between the target text and the edges of the background area. The distance is in pixels.

 

radius.accepts: a number (default is 0)

Thats the radius of the corners of the background area. Radius is set in pixels.

 

border_width. accepts : a number (default is 0)

The width of the border of the background area. set in pixels. default is no border (zero pixels).

 

border_color.accepts: a number (default is ‘black‘)

The color of the border of he background area. 

 

border_style.accepts: Solid, Dotted or Dashed (default is Solid)

The Style of the border. 

You can choose a color for any Spotlighter attribute in one of those ways  :

 

Color name. ie, ‘black’ for black, ‘blue’ for blue, etc. Thats the easiest way. click here to see the supported colors.

 

Hex Triplet. ‘#ff0000′ for red, ‘#000000′ for black, etc. Learn more about Hex Triplets Here

 

rgb / rgba. Either rgb or rgba is supported. ie, ‘rgba(255, 255, 0, 0.5)’ for a 50% opacity Yellow.