Tips and Tricks HQ Support Portal › Forums › WP Lightbox Ultimate › Lightbox Ultimate F.A.Q/Instructions › Lightbox Ultimate – How to Add Custom CSS to a Lightbox Anchor (Text or Image)
Tagged: lightbox anchor style, lightbox center image, lightbox custom style, lightbox image frame, lightbox shortcode styling
- This topic has 0 replies, 1 voice, and was last updated 12 years, 10 months ago by
wpCommerce.
-
AuthorPosts
-
November 6, 2011 at 12:17 am #4694
wpCommerce
ModeratorEach 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:
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"] -
AuthorPosts
- The topic ‘Lightbox Ultimate – How to Add Custom CSS to a Lightbox Anchor (Text or Image)’ is closed to new replies.