Close button (X) position on BL3 default album

Backlight Customization
#1

The “Close Button” (X) of the BL3 default album viewer is positioned on the upper left window corner. This position is counterintuitive because on Window 10 and all apps it is positioned on the upper right corner. Is there anyway to move it to the right?

#2

you can try changing its position value.
This looks like it will move the close button to the right, but it won’t be the far right, it’ll still be to the left of the Image menu icon:

.pangolin-album .fancybox-toolbar .fancybox-button--close {
position: relative;
}

If you need it at the far right, you might explore moving it with jQuery to appear after:

button.fancybox-button--pallet
#3

Rod, you are one HELPFUL moderator. It works just fine but not before I cleared the browser cache…:grin:
Thank you Rod.

#4

FYI, it’s positioned on the left for specific UX reasons for mobile visitors:

  1. We don’t want people to fat-finger the close button by mistake when using other buttons.
  2. Forcing the user to reach across the display to hit the close button ensures that closing the slideshow is a very intentional action.
#5

Matt, speaking out of personal experience, I do appreciate your concern. However, because people are familiar with the close button being on the upper right corner my preference is to have it there.
Rod, your small CSS script moves it to the right, however, I would like it to appear on the outer right. You suggested to use jQuery. I am not familiar with jQuery and never used it before. Can you refer me to some sample jQuery code used in BL?

#7

Good news. No jQuery needed. It can be done with css.
Add this to your custom css:

.fancybox-button.fancybox-button--close {
	float:right;
}

Though to keep things more usable on mobile devices, you might consider putting all this css into a media query that will apply the changes to only larger devices (desktop, laptop, iPad in landscape…)

#8

Rod, thank you very much. It works and makes me very happy!:grin:!