Build Multilingual Websites with Gridbox

Build Multilingual Websites With Joomla Website Builder Gridbox
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Navigation

1 month 1 week ago #1

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Hi

I'm trying to get the navigation arrows out of the pictures inside the lightbox. I even added a white border to prevent this behaviour. But depending on the size of the browser window the arrows still move into the picture.

www.stefanwalter.ch/sites/test5

Is there a way around it?

If the browser window is very small there's also a black background showing up. Any idea how to get rid of it?

Otherwise your gallery rocks!

Many thanks for your help.

1 month 1 week ago #2

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

To do this, you can add custom CSS code to the custom css file of your template.
.modal-nav {
    display: none;
}

Regards,
Vyacheslav, Balbooa.com

1 month 1 week ago #3

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Hello

Thanks for the reply. Your workaround just gets rid of the navigation which is not what I am trying to achieve:
I would like the arrows to display just not inside the pictures. I tried to resize the lightbox but then the navigation doesn't show in the middle of the photographs.

Also if the browser window is below a certain size I get a black background around the lightbox which doesn't suit me at all.
The same applies to phones and tablets at any size, plus there's a semi-transparent black bar at the bottom.

Are there any solutions for this issues?

Thanks in advance!

1 month 1 week ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
It seems we do not quite understand you,
try to show on the screen what result you need to get

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 1 week ago #5

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Please find screenshots attached with comments.

What I would love to do is

- display the navigation arrows outside the pictures

- white background for the lightbox on phones and pads

- get rid of the transparent bar on the phone (greyish) and the monitor (whitish)

- small border for portrait orientated pictures, so they don't touch the browser window

Thanks again for your help!





1 month 1 week ago #6

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

Unfortunately, there is no such possibility.
to change the background color on mobile devices you need to use css code

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 1 week ago #7

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Thanks for the reply! Too bad there's implemented solution for my problem.

Which "media query" on what "class" would that be?

Cheers!

1 month 1 week ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
Hello,

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

Regards,
Vyacheslav, Balbooa.com

1 month 1 week ago #9

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Thanks a million!

Would there be some code for placing the navigation arrows outside the pictures as well?

Cheers!

1 month 1 week ago #10

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
You are welcome ;)
We are not entirely clear where they should be placed.

Regards,
Vyacheslav, Balbooa.com

1 month 1 week ago #11

  • Alexander's Avatar
  • Alexander
  • Posts: 15
A few pixels outside the border of the picture (landscape orientation) would be very nice.

1 month 6 days ago #12

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
Hello,

You can try to implement this using custom code.
Send a screen where you can see what result you need to get.

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 6 days ago #13

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Hi

I would like the navigation (arrows and header) to be placed outside the picture, meaning getting a white border around without the arrows touching the picture.

1 month 5 days ago #14

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

You need to add css code to your template's custom CSS file.
.ba-modal-body > div.modal-image img {
    box-sizing: border-box;
    padding: 100px;
}
And change 100px as you need

Best Regards,
Vyacheslav, Balbooa Support Team

1 month 5 days ago #15

  • Alexander's Avatar
  • Alexander
  • Posts: 15
Dear Vyacheslav

Great, thanks a lot for the outstanding support!

1 month 5 days ago #16

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 21317
You are welcome ;)
Powered by Kunena Forum