Lightbox Ultimate – How to Add Custom CSS to a Lightbox Anchor (Text or Image)

[wpCommerce]

Each Lightbox Ultimate shortcode can take an additional parameter called “class” where

you can specify your own CSS class to customize the look and feel of that shortcode

anchor (anchor text and image).

For example – if you are using the following shortcode,

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="my_test_style"]

You are telling the plugin that I have a CSS class called “my_test_style” and I want to

add the style defined in the “my_test_style” class to the image anchor [http://www.example.com/movie-picture1.jpg].

Example:

Say, you want to add a border around the image anchor. Your CSS class “my_test_style”

could be defined as follows:

. my_test_style a img

{

border: 1px solid #98bf21;

}

A nice 1px solid border of color “#98bf21” (green) will be added to the image anchor.

Multiple CSS Classes

You can also pass multiple class names (separated by space) through the shortcode.

For example:

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="my_test_style my_second_style my_third_style"]

Now the image anchor will be styled based on whatever you have defined in the CSS

classes “my_test_style”, “my_second_style” and “my_third_style”.

Where to Place the CSS Class attributes

Simply install our WP Custom CSS plugin and specify the CSS code in the setting menu of the plugin:

WordPress Custom CSS Plugin

More Examples

Align the anchor image to the left / Wrap text around anchor image

You can specify alignleft in the class parameter to align the image to the left. It will also wrap any text that you have entered around the image. This class comes from core WordPress so you don’t have to write any CSS code for it.

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="alignleft"]

Align the anchor image to the right

You can specify alignright in the class parameter to align the image to the right. This class comes from core WordPress so you don’t have to write any CSS code for it.

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="alignright"]

Center the anchor image

Option 1

You can specify aligncenter in the class parameter to center the anchor image. This class comes from core WordPress so you don’t have to write any CSS code for it.

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="aligncenter"]

Option 2

First, specify your custom class name (example: center_img) in the shortcode.

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="center_img"]

Now, write the definition of center_img class in the settings menu of WP Custom CSS plugin.

.center_img{

text-align: center;

}

Do not align the anchor image

You can specify alignnone in the class parameter to disable alignment for this image. This class comes from core WordPress so you don’t have to write any CSS code for it.

[wp_lightbox_flowplayer_video link="https://www.example.com/test-video.mp4"

width="840" height="640" source="http://www.example.com/movie-picture1.jpg"

class="alignnone"]

[Author]

Posts