WP Lightbox Ultimate – Align Shortcode Anchor to the Center of the Page

[bvose]

Hello,

I recently followed the WP Lightbox tutorial by Kirk and after he entered the short code for adding an image/video to a post, he centered the code in the visual tab of the editing page and when he refreshed his site, the image was centered on the post. When I tried that, the image remained left aligned. I deactivated all other plug-ins to find out if something else may have been interfering, but the image remained left aligned. I even created both a new page and new post, just to make sure there was nothing hidden. Here is the page on my site, [http://www.brianvose.com/cade-baccus/]

Please check the issue and offer any advice when you get the chance, you time with this issue is appreciated. If you need any other information, please let me know.

Thank You,

Brian

[wpCommerce]

Hi, try using CSS to see if it works – https://support.tipsandtricks-hq.com/forums/topic/lightbox-ultimate-how-to-add-css-styles-to-a-lightbox-anchor-text-or-image

[Peter]

Hi Brian,

Put this code in your wp_lightbox_ultimate_custom.css file and it should centre the image:

.lightbox_ultimate_image_anchor a img{

display: block;

margin-left: auto;

margin-right: auto

}

[bvose]

Hey, Peter,

Thank you for the response and advice. I have added these 3 codes to the CSS folder of the wp_lightbox_ultimate using a text editor:

.lightbox_ultimate_image_anchor a img{

display: block;

margin-left: auto;

margin-right: auto

}

.lightbox_ultimate_image_anchor {

text-align: center;

}.lightbox_ultimate_image_anchor {

width: 150px;

margin-left: auto;

margin-right: auto;

}

After saving the codes, I updated the current page and even tried it on a new page, and the image was still only left aligned. Do I need to use a different plug-in shortcode then what is shown on the tutorial? Could I update my theme? What other possibilities can I try? Thanks!!

Brian

[Peter]

Hi Brian,

I’ve just had a look at your site and it appears that you have not added the code I recommended in the “wp_lightbox_ultimate_custom.css” file.

Please ftp the “wp_lightbox_ultimate_custom.css” file to your computer and then edit it and add the code (ie, only the block of code in my first response) and then save the file and ftp it back onto your host.

[Lezlie]

This isn’t working for me … I want to move the video over to start display at 500 px (out of 1200) so I set it for: “margin-left: 42%;”

I have it on the autoplay option. I notice that the file: wp-lightbox-ultimate/wp_lightbox_ultimate_custom.css says “inactive”. Any ideas???

[Lezlie]

Sorry … the website is [www.MatthewSherley.com/testing/] – I created it as an image map, so I’m using the autoplay. I wish I could figure out a way to embed it in the imagemap – but I haven’t found one.

[wpCommerce]

Hi, currently we don’t have any direct popup option from image map (you can do it from an image).

The script automatically determines the window size to place the popup right in the middle of the screen. But you should be able to customize it by adding this piece of code to the wp_lightbox_ultimate_custom.css file:

#fancybox-wrap{

left: 500px !important;

}

[Lezlie]

I wish I could give you a hug right now! That worked perfectly … I have been working on this for four days. You can see the final result at [www.MatthewSherley.com]. This is definitely the answer for anyone using an image map.

[wpCommerce]

I’m glad that It’s working for you now.

[Author]

Posts