Balbooa Help Center: Lightbox background (1/1)

1 week 5 days ago #1

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
	The administrator has disabled public write access.

1 week 5 days ago #2

Vyacheslav Posts: 16531	Hello, Thank you for contacting us Send us a link to page with problem. Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

1 week 5 days ago #3

Klaus Posts: 47	relaunch.sonjavordermaier.com/de/arbeiten
	Last Edit: 1 week 5 days ago by Vyacheslav. The administrator has disabled public write access.

1 week 5 days ago #4

Vyacheslav Posts: 16531	You can change the color in the gallery settings Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

1 week 5 days ago #5

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:

...-12.png (6,063KB)
...-16.png (6,263KB)

1 week 5 days ago #6

Vyacheslav Posts: 16531	You need to add to your code text-align: center !important; Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

1 day 8 hours ago #7

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: ....51.png (893KB)
	Last Edit: 1 day 8 hours ago by Vyacheslav. The administrator has disabled public write access.

1 day 8 hours ago #8

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
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
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 Posts: 47	Now it works fine, thank you! Best regards, Klaus
	The administrator has disabled public write access.

1 day 7 hours ago #12

Vyacheslav Posts: 16531	You are welcome
	The administrator has disabled public write access.

1 day 7 hours ago #13

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: ....24.png (7,386KB) ....40.png (9,814KB)
	The administrator has disabled public write access.

1 day 6 hours ago #14

Vyacheslav Posts: 16531	You can change the size of the thumbnails in the gallery settings Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

1 day 6 hours ago #15

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: ...-02.png (200KB)
	The administrator has disabled public write access.

1 day 6 hours ago #16

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
	The administrator has disabled public write access.

1 day 5 hours ago #17

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: ....30.png (8,542KB)
	The administrator has disabled public write access.

1 day 5 hours ago #18

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
	The administrator has disabled public write access.