Miko. eCommerce Template

Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Lightbox background

1 week 5 days ago #1

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Hello,

I would like to use the background of lightbox without opacity (rgba(255, 255, 255, 1).

Can I do this only with css? I get the following code but I dont`t find an element of balbooa ...

element.style {
background-color: rgba(255, 255, 255, 0.9);

Best regards,
Klaus

1 week 5 days ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,
Thank you for contacting us

Send us a link to page with problem.

Regards,
Vyacheslav, Balbooa.com

1 week 5 days ago #3

  • Klaus's Avatar
  • Klaus
  • Posts: 47

1 week 5 days ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You can change the color in the gallery settings


Best Regards,
Vyacheslav, Balbooa Support Team

1 week 5 days ago #5

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Now I got it , thank you ;)

Still another question: I would like to display title centered in the bottom of the lightbox.
Unfortunately title is shown on the picture and the module of title is not seperated. Here is an example how I would like to display titles below pictures: wentrupgallery.com/en/artists/hicham-berrada/works

I have tried this css code but than the title remains on the left side:

@media (min-width: 1025px)
<style>
.gallery-modal .ba-modal-header .modal-title {
position: fixed;
bottom: 0;
left: 50vw;
transform: translateX(-50%);
background-color: #fff;
padding: 5px;
width: 100%;
}

Best regards,
Klaus
Attachments:

1 week 5 days ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You need to add to your code
text-align: center !important;

Best Regards,
Vyacheslav, Balbooa Support Team

1 day 8 hours ago #7

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Hello again,

in mobile view background color of lightbox is changing to black...

Background color of lightbox in mobile devices should be #fff as on desktop. Icons should be in black.
How can I create a custom css sode for this?

relaunch.sonjavordermaier.com/de/arbeiten

ht-access



Best regards,
Klaus
Attachments:

1 day 8 hours ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,
Thank you for contacting us

You need to add this css code at the code editor:
@media (max-width: 1024px){
    body .ba-scrollable {
        background: #fff !important;
    }

    body .gallery-modal .ba-modal-header .zmdi {
        color: #000 !important;
    }
    
    body .ba-modal .header-icons,
    body .ba-modal .ba-modal-header {
        box-shadow: none !important;
    }
}

Best Regards,
Vyacheslav, Balbooa Support Team

1 day 7 hours ago #9

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Thank you!

I edit the code to my custom css of balbooa galllery but it doea not work.

Maybe something is wrong at the top of css code?

/* Custom CSS */

.album-in-lightbox i.albums-backdrop-close, .gallery-modal .ba-modal-header .modal-title, .gallery-modal .ba-modal-header .zmdi {
font-size: 18px;
line-height: 18px;
}
.ba-modal .modal-description, .ba-modal #disqus_thread {
padding: 25px 0;
}
.ba-gallery .ba-goback a, .ba-gallery .category-filter a.ba-filter, .ba-gallery .category-filter a.ba-filter-active {
letter-spacing: 0.01em;
font-weight: 300 !important;
}
.ba-gallery .category-filter a:first-child {
margin-left: -25px !important;
}
.gallery-tags-wrapper, .ba-gallery select.ba-select-filter, .ba-gallery .category-filter {
margin-top: -30px;

}
#ca-1529739248826 {
padding: 0 !important;

}
@media (min-width: 1025px) {
.gallery-modal .ba-modal-header .modal-title {
position: fixed;
bottom: 0;
left: 50vw;
transform: translateX(-50%);
background-color: #fff;
padding-top: 20px;
width: 100%;
text-align: center !important;
}
@media (max-width: 767px) {
.ba-gallery {
padding: 0;

}
@media (max-width: 1024px){
body .ba-scrollable {
background: #fff !important;
}
body .gallery-modal .ba-modal-header .zmdi {
color: #000 !important;
}
body .ba-modal .header-icons,
body .ba-modal .ba-modal-header {
box-shadow: none !important;
}
}

1 day 7 hours ago #10

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Your code is not written correctly.
lacks }
.album-in-lightbox i.albums-backdrop-close, 
.gallery-modal .ba-modal-header .modal-title, 
.gallery-modal .ba-modal-header .zmdi {
    font-size: 18px;
    line-height: 18px;
}

.ba-modal .modal-description, 
.ba-modal #disqus_thread {
    padding: 25px 0;
}

.ba-gallery .ba-goback a, 
.ba-gallery .category-filter a.ba-filter, 
.ba-gallery .category-filter a.ba-filter-active {
    letter-spacing: 0.01em;
    font-weight: 300 !important;
}

.ba-gallery .category-filter a:first-child {
    margin-left: -25px !important;
}
.gallery-tags-wrapper, 
.ba-gallery select.ba-select-filter, 
.ba-gallery .category-filter {
    margin-top: -30px;
}

#ca-1529739248826 {
    padding: 0 !important;
}

@media (min-width: 1025px) {
    .gallery-modal .ba-modal-header .modal-title {
        position: fixed;
        bottom: 0;
        left: 50vw;
        transform: translateX(-50%);
        background-color: #fff;
        padding-top: 20px;
        width: 100%;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .ba-gallery {
        padding: 0;
    }
}

@media (max-width: 1024px){
    body .ba-scrollable {
        background: #fff !important;
    }

    body .gallery-modal .ba-modal-header .zmdi {
        color: #000 !important;
    }
    
    body .ba-modal .header-icons,
    body .ba-modal .ba-modal-header {
        box-shadow: none !important;
    }
}

Best Regards,
Vyacheslav, Balbooa Support Team

1 day 7 hours ago #11

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Now it works fine, thank you!

Best regards,
Klaus

1 day 7 hours ago #12

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You are welcome ;)

1 day 7 hours ago #13

  • Klaus's Avatar
  • Klaus
  • Posts: 47
Still one question:

I set the image quality of thumbnail to 100 but it seems to be compressed. When I click on the magnifying glass the image is much better displayed.

How can I improve image quality of thumbnail view?

relaunch.sonjavordermaier.com/de/claude-boat-dt

Best regards,
Klaus
Attachments:

1 day 6 hours ago #14

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
You can change the size of the thumbnails in the gallery settings


Best Regards,
Vyacheslav, Balbooa Support Team

1 day 6 hours ago #15

  • Klaus's Avatar
  • Klaus
  • Posts: 47
I have changed the size of thumbnails to 1000 (quality: 100) but thumbnail image seems to be compressed.
The original size is 1920 x 2880 px.

I would like to display the images in one column.
Attachments:

1 day 6 hours ago #16

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
How to install 1920 is described in this post
support.balbooa.com/forum/joomla-gallery...h-height-limit#58576

Best Regards,
Vyacheslav, Balbooa Support Team

1 day 5 hours ago #17

  • Klaus's Avatar
  • Klaus
  • Posts: 47
I have changed "ba-gallery-range" to 1920, regenerated thumbnails and cleared cache – but image is not displayed in full quality. Unfortunately image still remains pixelated ...?

What could be the problem?
Attachments:

1 day 5 hours ago #18

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Send us a link to page with problem.
Send us FTP access and Joomla admin access via our contact form.
support.balbooa.com/contact-us

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum