LightBox Colors and Styling

Now I know that the LightBox needs to be more customizable, especially the color and styling. Is there any feelings out there what exact visual aspects of the LightBox should be easily changeable from the options panel. The color and opacity of the background and the curtain (semi-transparent background behind the photo) seem like good candidates. But while you wait for people to pool their opinions and an update, look into the catablog.css file. It is in the css direcotry in the plugin's directory. You can override any of the LightBox styles in your own css file. If you need control over the LightBox make a catablog.css file in your theme's directory, it will let you control padding, font and color. Just look through the file for the LightBox classes, they should be easy enough to find.....perhaps I will list the classes here later. With that knowledge it should be pretty easy to change the color of the LightBox. Cheers

- Zach

This entry was posted in Support. Bookmark the permalink.

21 Responses to LightBox Colors and Styling

  1. Joy says:

    Zach,
    I hate to say this, but I needed the fullsize image URL so I could use a different plugin for the lightbox effect. I didn’t like how yours worked or how long it took to come up. I use Shutter Reloaded because it’s really easy, customizable, and fast loading. Plus it makes “sets” of the images on a page so you can just use the Next and Prev buttons to go through the images.
    Maybe this is another area that your plugin really doesn’t need to be handling.

    • Zach says:

      Joy,

      Thats great, I’m glad to hear you were able to get the look and feel you wanted from another LightBox while still using CataBlog. I am kind of curious why you use CataBlog and what you find useful about it. I want to know how it fits into the larger puzzle for you and other users.

      In defense of my LightBox implementation. It is the smallest, file size wise, of any WordPress LightBox plugin I have seen. By that I mean the file size of the javascript library I wrote and the CSS along side it, they are less then 20k total. Of course if you combine, minify and gzip your JavaScript and CSS files like any good web developer should, then they are even smaller, less then 8k I think. In past experiences LightBox2 added over 200k of JavaScript glut to my site, jQuery LightBox was poorly implemented, and I haven’t tried the one you mention, so I must look into that I guess. I’m not sure what you meant by “sets of images”, but CataBlog’s LightBox also lets you navigate your catalog while open, not to mention you can use the keyboard to jump to the next or previous images as well. All it looks for is a sibling catalog element with the class of `.catablog-row`, so if you removed that class from your template HTML the navigation won’t work.

      To me it sounds like if CataBlog’s LightBox had speed and color options, perhaps a few default animation styles, then you wouldn’t have needed to add on Shutter Reloaded. There are specific hooks in CataBlog’s LightBox for the catalog item’s title and description, these hooks are not guaranteed to exist in other LightBox plugins. For that reason alone I will continue to develop the LightBox alongside CataBlog. I guess my history as a user interface and frontend developer are shining through 🙂

      Cheers,
      – Zach

      • Joy says:

        So far, I haven’t figured a way to use Catablog for my nursery website, but it does most of what I want so I keep coming back and trying it. It was the only plugin I found that managed a list (or table) that let you supply the template for display. I’m now leaning toward using Ultimate Post Type Manager and coding a theme page template or trying to get Post Layouts to do what I need.

        The Shutter Reloaded plugin is under 10K, so it is fast. And I was already using it for other images on the site, so no need to load two different scripts. It also doesn’t require any special class in the HTML, but uses others’ (rel=lightbox) if it is there. Just activate and that’s it.

  2. Greg H. says:

    Zach —

    I’m loving Catablog. It’s really amazing for my customer’s needs. Great work!

    If you get a chance to write up a little description of the lightbox CSS elements, that would be great. Or if you can point us towards existing documentation (if you adapted the Lightbox function from existing code). I’m trying to move up the titles and greyed backgrounds that pop up when you hover over the products laid out in the gallery, and haven’t had much luck. Then again, I’m still a bit boggled by CSS, even after years.

    Best,
    Greg

    • Zach says:

      Thanks Greg, glad to hear you’re enjoying CataBlog. I will definitely do a write up on the LightBox CSS classes, as I did not adapt the code but wrote it myself.

      If you haven’t I would also recommend reading all the documentation pages, especially Displaying Your Catalog in Posts.

      I would also recommend researching Firebug for FireFox if you want a stellar realtime CSS editor in your browser, trust me it’s awesome.

      Good luck and I’ll let you know when I post that write up on the LightBox CSS classes.

      Cheers 🙂

  3. IanW says:

    I am very new here – and very taken with what I have seen so far with Catablog.
    Thank you for your effort – I and others have been looking for a replacement WordPress Catalog option after being let down by another author.

    Still learning but right now I am having trouble getting the thumbnail background color to function. I have tall image and have ticked the keep aspect ration box. This has rendered the full image (previously truncated) but added a large black strip down the RHS.

    Using the background color tool originally set to #ffffff to try and make this black stripe go makes no difference. Your example thumbnail image displays the different color selected top and bottom but my black strip remains firmly in place.

    Thanks again for your excellent plugin

    IanW

    • Zach says:

      Hi IanW,

      Thanks for your interest in CataBlog, I am glad to meet another potential serious supporter of my plugin. I have seen similar issues before in the past and am curious what version of PHP and GD you are running on your server. A few versions ago I switched color fill functions for one that I thought would work on more setups. I eagerly await your response and hope we can figure out exactly what is going on.

      Also I will test out on my local workbench server to see if I have any problem setting the the thumbnail background color.

      And, if you haven’t already you might also want to check out and like the CataBlog Facebook page

      Cheers 🙂

    • Zach says:

      Hi again,

      Just wanted to say that I tested thumbnail generation on my test servers and it worked fine. The background color was what I set it to, and both landscape and portrait oriented pictures are centered and un cropped inside the square thumbnail. I would try and upgrade your server’s version of GD if you can. Let me know what you find…

      • IanW says:

        Zach,

        Thanks for the prompt response. I think I live in a time zone (+10 GMT) well removed from yours.

        I would need some guidance on how to check the php and GD versions on my server – In fact I am not sure what GD is. Am familiar with cPanel and FTP so just need direction I guess.My provider hosting is Hostmonster.

        You can see the the effect I am describing in the website link and if you choose the first image (floor polisher) there are 2 more examples there.

        IanW

        • Zach says:

          Hi Ian,

          You comments ended up in my Spam box, so I didn’t see them until now, so sorry for that. I only approved the first and last comments, the other ones seemed to have repeated content, hope that was ok.

          Now for GD and what it is. GD is a image processing library for PHP, not all versions of PHP include GD and there are many different versions of GD for PHP. That being said you can understand how and why it is difficult to write these plugins so they work on all the different servers out there. Specific versions of GD are also known to have bugs. You may learn which version of GD is installed on your server by using the PHP function phpinfo(). If you need more help getting phpinfo working read this.

        • Zach says:

          Now that I have had a chance to see your thumbnails I am curious about your source images. I noticed that only the center thumbnail (Polisher Materials) has the black line. Is the original image for that catalog item in a different format? perhaps gif or png with transparency? Could you try uploading a different version of that image, even just opening it in a program like Photoshop and saving it as a jpeg again and re uploading it.

          My thoughts are that your original upload might have been a slightly corrupt image and if this fixes it we will know it is not your version of GD.

          Look forward to your reply, hope it doesn’t end up in the Spam box again.

  4. IanW says:

    Zach,

    Have established that Hostmonster is configured to use PHP5 single php.ini file

    Cannot find any reference to GD in my searching

    IanW

    • Zach says:

      I will look into Hostmonster’s servers, I will assume you are using their shared hosting solution, which means you do not have root access to install, upgrade or change your server’s software. You most likely have access to configure your server software, and use whichever version of PHP5 they have compiled for you. In the meantime if you could find out the exact version of GD from a phpinfo() page and let me know that would also really help. Thanks.

  5. IanW says:

    Zach,
    Some of my images were cut and pastes from the Amazon site. Will check and change to see if the problem goes away.
    And thank you for the guidance regarding phpinfo. I have retrieved the following details
    php version 5.2.17
    GD version bundled (2.0.34 compatible)
    IanW

    • IanW says:

      Zach,
      And further to the above – I have now used some unrelated jpeg images purchased from iStockphoto and the lines have disappeared. I think that corrupteds image was the likely solution

      Thank you

      IanW

      • Zach says:

        I’m glad we solved the issue. Copy and pasting jpegs from the internet is prone to corruption and I would advise to always “save image as…” instead.

  6. Jay says:

    I posted elsewhere but will post here instead: How do I get rounded corners on the lightbox and perhaps thicker borders (rounded too)? Thanks…ps. this is a great plugin for wordpress

    • Zach says:

      Jay, you just need to override a few CSS properties in your theme’s style.css or a catablog.css file in your theme’s directory. Here is an example:

      body html #catablog-lightbox #catablog-whiteboard {
        padding: 20px;
        border-radius: 5px;
      }
      

      Good luck!

    • Zach says:

      I did not include all the different browser versions of border-radius on purpose, but please feel free to google it and find all the mozilla, ie, webkit versions of the CSS property.

  7. Zdenko says:

    Thanks for a great plug-in and your effort!
    My problem is that my wp template allready has lightbox installed. Catablog works fine when I dissable my themes lightbox, but then I can’t see other images (full size) on the website. Do you have any idea what to do.
    Thank you
    Zdenko

Leave a Reply

Your email address will not be published. Required fields are marked *

Please wrap any HTML markup or code with the pre-formatted tag: <pre> </pre>