Title: css for lightbox
Last modified: December 13, 2017

---

# css for lightbox

 *  Resolved [sammymcw](https://wordpress.org/support/users/sammybear/)
 * (@sammybear)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/css-for-lightbox/)
 * Ive just installed woocommerce (The latest version 3,2,6).
 * The image zoom and lightbox gallery IS setup in my themes functions.php.
 * I HATE the way the lightbox gallery looks when you click on a product image. 
   Is there any way to alter it with css?
    – I want the background to be transparent
   black and not solid black – arrows to be next to the image, not on the edge of
   the screen – title to be directly under the image, not at the bottom of the page–
   title to be centered. Currently it is left alligned to the image.
 * All this sounds so simple BUT I cant find the classes or selectors I need to 
   target in order to change the CSS.
 * Help?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-for-lightbox%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Support [Stuart Duff – a11n](https://wordpress.org/support/users/stuartduff/)
 * (@stuartduff)
 * Automattic Happiness Engineer
 * [8 years, 6 months ago](https://wordpress.org/support/topic/css-for-lightbox/#post-9782425)
 * Hi [@sammybear](https://wordpress.org/support/users/sammybear/),
 * To achieve this type of customization I would recommend using Google Chrome Developer
   Tools. You can right-click anywhere on your webpage to select ‘Inspect Element’,
   the HTML and CSS properties show up right in your browser.
 * [https://developer.chrome.com/devtools](https://developer.chrome.com/devtools)
 * Below is a tutorial for Chrome Developer Tools that explains how to use that 
   to locate CSS classes which you can then write custom CSS for to change the colour
   of desired elements on a site.
 * [https://www.codeschool.com/courses/discover-devtools](https://www.codeschool.com/courses/discover-devtools)
 * If you’d like to learn more about CSS in general this is also a great tutorial:
   [https://tutsplus.com/course/30-days-to-learn-html-and-css/](https://tutsplus.com/course/30-days-to-learn-html-and-css/)
 *  Thread Starter [sammymcw](https://wordpress.org/support/users/sammybear/)
 * (@sammybear)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/css-for-lightbox/#post-9782444)
 * Hi taurt
 * Thank you for your reply.
 * I have managed to customise it a bit, but not as much as I was hoping.
 * I know how to use the chrome developer tools and css so I dont need lessons on
   that, I was hoping someone had done this before.
 * Anyway, Its all sorted now

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘css for lightbox’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [sammymcw](https://wordpress.org/support/users/sammybear/)
 * Last activity: [8 years, 6 months ago](https://wordpress.org/support/topic/css-for-lightbox/#post-9782444)
 * Status: resolved