Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
kapplmar

Wexley template: Adjusting the size and position of the "Close Lightbox"-X

Question

Hello all,

the close button in Lightbox view is way off in the upper right corner of the page header, often far away from anything else on the page. Visitors could have a hard even seeing it.

I would like the X to be either:

  • on the left side of the header (preferred solution)
  • bigger
  • Read something like "Close lightbox" instead of "X"

Does anyone have a solution for this problem?

for reference:http://martinkappler.com/military/

EDIT: The solution works but then another problem springs up: "Close lightbox" or whatever the button says is still visible in the mobile mode of the website. If someone has a solution to this please let us know.

Edited by kapplmar

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

Try adding this to the CSS Editor under the Design Menu:


 .collection-type-gallery.full-view #backToThumbs {
  font-size: 5.0em;
}

This should make it pretty big. Feel free to adjust the em value to customize.

Good luck!

Share this post


Link to post
  • 2

Try adding this to custom CSS.


#backToThumbs:after {
 content: "Close Lightbox";
 color: #000;
}
.collection-type-gallery.full-view #backToThumbs {
 font-size: 2.0em;
 top: 15px;
 left: 152px;
 color: rgba(0,0,0,0);
}


Developer Evangelist at Squarespace.

Share this post


Link to post
  • 1

No, the script tag is something entirely different than CSS.

Log-in to your site, then click on the eyeball to preview. In the bottom right corner, click on the paintbrush, then in the bottom left corner click on custom CSS. Paste the code I gave you there.


Developer Evangelist at Squarespace.

Share this post


Link to post
  • 0

Ah, you very much for your answer. It worked now. Only problem is that the "close lightbox" text is also visible in the mobile version of the website whereas the x disappeares. But no problem, I will get only the x centered over the images. It's much easier to navigate that way.

Share this post


Link to post
  • 0

Ah, you very much for your answer. It worked now. Only problem is that the "close lightbox" text is also visible in the mobile version of the website whereas the x disappeares. But no problem, I will get only the x centered over the images. It's much easier to navigate that way.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...