We would like to take this opportunity to say thank you for the business you have given us throughout the year. We hope you will continue being one of our valued customers in 2021. All the best for the holiday season. In the meantime we are currently on vacation and we have limited access to the support tickets. So kindly bear with us if there is any delay in your support queries.

Okay
  Public Ticket #2534167
Centering PrettyPhoto pop up container when using theme "boxed"
Closed

Comments

  • Deborah started the conversation

    I am using this theme with the boxed setting. In the portfolio section I have "Additional Views" at the bottom of the page using PrettyPhoto. When clicking on the photos at the bottom of the page (see url I listed: https://jwdci.com/portfolio/copeland_health_education.html) the container and background opacity work great when not in "boxed" view, but is off-center to the right when in "boxed" view.

    Is there a place that I can adjust code to get it to sit center (left to right)?

    Please let me know what the code is and exactly where to place it or change it. I have looked but can't identify it.

    Attached files:  Screen Shot 2020-09-09 at 9.53.09 AM.png
      Screen Shot 2020-09-09 at 9.55.17 AM.png

  •  1,299
    ZOZO replied

    Hi

    1. Add the below line in your custom.css file

    body.boxed div.pp_pic_holder {
        left: 0 !important;
        right: 0;
        margin: auto;
    }


    It will show fine.

    Thank you.



  • Deborah replied

    Hello! Thank you for this. It worked!! However, I do not have a custom.css. Do I need to create one for this code? I added it to the bottom of prettyPhoto.css and that is where it worked, but should I leave it there?

    Also, this didn't fixed the opacity background overlay that appears behind the holder. Can you tell me what I should change for that and also where to place it?

    Thank you!!

    Deborah

  •  1,299
    ZOZO replied

    add it in style.css file...

  • Deborah replied

    thank you!

    Also, this didn't fixed the opacity background overlay that appears behind the holder. It is still off center to the right. Can you tell me what I should change to fix that?

  •  1,299
    ZOZO replied

    Screenshot please

  • Deborah replied

    Might be a little hard to tell here since my background without overlay is dark. The second screen shot using the developer tools shows it better as it is highlighted with the blue.

    Thank you!!

    Attached files:  Screen Shot 2020-09-22 at 9.40.48 AM.png
      Screen Shot 2020-09-22 at 9.41.38 AM.png

  • Deborah replied

    I tried adding this code and it does center the overlay over the boxed area. Which works. If it can go the full width of the window, that would look even better.

    body.boxed div.pp_overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
    }


    Attached files:  Screen Shot 2020-09-22 at 9.47.36 AM.png
      Screen Shot 2020-09-22 at 9.49.09 AM.png

  •  1,299
    ZOZO replied

    Hi,

    So all ok now?

    6496645293.png

    It was looking good here.


    Thank you.

  • Deborah replied

    I know this is hard to see because my full background is black and white. BUT, is there a way to make the overlay (when PrettyPhoto is up) to cover the whole screen and not just the boxed area. Right now, with the code I placed, the overlay covers only the "boxed" area (see screen-shot with notes). If that is all it can do then I will be satisfied with that. If the overlay can cover the width of the whole screen that would be awesome!

    Thank you for your help

    Attached files:  Screen-Shot-2020-09-30-at-10.40.57-AM.jpg

  •  1,299
    ZOZO replied

    Hi ,

    6122640339.png

    It was looking good here.

    I still did n't get your need.

    Thank y

  • Deborah replied

    It's fine. You must not have seen my attached screen shot. But let's close the ticket. I think it looks fine.


  •  1,299
    ZOZO replied

    P.S: If you like the theme and our support please don't forget to rate 5 star with your feedback to the theme in https://themeforest.net/downloads. It help us a lot to improve our service quality and provide many features in upcoming releases.  Also we available for customization work too, if anything please let me know.

    Thanks,

    zozothemes