Before you ask please READ THIS

Text box in lightbox 2

Hi,

Ok, solution on former closed thread is working (http://support.apollo13.eu/discussion/4256/text-box-in-lightbox#latest) except in those cases in which, in an album with photos showing titles, there is any photo with empty title (https://www.elimaginario.es/album/moda/). In those cases, there is an empty grey little box on the photo. Maybe there is a way to get rid of it.

Regards.

Comments

  • AirAir
    edited October 2016 Posts: 9,910
    Yo! :-)

    That is great!
    Lalouetto said: except in those cases in which, in an album with photos showing titles, there is any photo with empty title (https://www.elimaginario.es/album/moda/). In those cases, there is an empty grey little box on the photo. Maybe there is a way to get rid of it.
    Lets think what can we do:-)
    In this case lets remove old solution and add such instead:

    .lg-sub-html .customHtml h4 {
    background-color: rgba(0,0,0,0.26);
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    }
    .lg-sub-html .customHtml h4:empty {
    display: none;
    }
    Hope now we are there:-)

    With kind regards.



    Post edited by Air on
  • edited October 2016 Posts: 91
    Hey Air.

    Almost. Some photos have also description and those descriptions appear now without the grey window... Only little tweak.

    Regards.
    Post edited by Lalouetto on
  • AirAir
    Posts: 9,910
    I scanned through your photos but I didn't see any description when I did this CSS for you. Description thing complicate it, cause I can't do them in separate lines while making making just around text(instead of full/fixed width).

    It would require additional HTML modification to have some element that could separate them.
    To see what I mean, you can use this CSS instead:

    .lg-sub-html .customHtml h4,
    .lg-sub-html .customHtml .description{
    background-color: rgba(0,0,0,0.26);
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    }
    .lg-sub-html .customHtml h4:empty,
    .lg-sub-html .customHtml .description:empty {
    display: none;
    }
    I don't have any simple idea how to handle this.

    With kind regards.
  • edited October 2016 Posts: 91
    Hi Air,

    Before I try that code, just wanted to let you know that the former solution on the closed thread put the grey window behind title and also description, in case it gives you a clue. This code:
    .lg-sub-html .customHtml {
        background-color: red;
        display: inline-block;
        padding: 10px;
    }
    
    Regards.

    P.S. First photos here have description too: https://www.elimaginario.es/album/retrato/
    Post edited by Lalouetto on
  • AirAir
    Posts: 9,910
    Lalouetto said:
    Before I try that code, just wanted to let you know that the former solution on the closed thread put the grey window behind title and also description, in case it gives you a clue.
    As I remember, then you had issue when it was empty(no title/description), cause it was visible.
    We hit limits from various places when I try to prepare this modification for you. It is never perfect and modification of HTML was also harmful. Unfortunately this ligthbox was prepared for different layout, and achieving some result without core modifications is not possible.

    In this case lets try compromise. Use this custom CSS instead:

    .lg-sub-html .customHtml h4,
    .lg-sub-html .customHtml .description{
    background-color: rgba(0,0,0,0.26);
    display: block;
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    }
    .lg-sub-html .customHtml h4:empty,
    .lg-sub-html .customHtml .description:empty {
    display: none;
    }
    It will make box a little bigger, but we will cover all your previous requirements .
  • Hi Air,

    That works well :) . It just compresses the description on shorter lines but I could live with that if I had too. Looks better with longer lines though. If there is something for that, it would be cool.

    Thank you.
  • AirAir
    Posts: 9,910
    You could change width for description in this case. Use this:

    .lg-sub-html .customHtml .description{
    max-width: 400px;
    }
    With kind regards.
  • Thank you. That works for me.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!