Jump to content

Adding text to gallery images and adding customized side arrows on galleries

Recommended Posts

Hi, 

I am using the Wells layout and for the most part I am happy with it, but it is two hiccups away from being perfect. I am trying to make it a bit more user friendly by adding minimalist side arrows next to the gallery images, as many people say that they do not notice the prev/next option in the bottom corner and end up only looking at the first image before moving on to the next project, as well as they do not notice the cursor change when they hover over the image. I also turned off the thumbnails option, as this is not my desired setting for showcasing my photography. I know the Wells layout does not allow this, but I am wondering if anyone has a CSS code that allows simple arrows (<  >) on ether side of an image? 

My next issue is adding image descriptions. When using gallery mode, Wells does not allow you to insert text, it only allows the description. Again, people have told me that they do not notice the description in the bottom corner, as well as, I am using the CSS code:

.collection-type-gallery.hide-meta .meta #simpleControls {
   display: none !important;
 }
 .collection-type-gallery.hide-meta .meta #dotControls {
   display: none !important; 
 }
 .collection-type-gallery.hide-meta .meta #numberControls {
   display: block !important;
 }
 .collection-type-gallery.hide-meta .meta {
 right: 0;
 left: 40px;
 width: auto;
 background: #fff;
 bottom: 30px;
 max-width: 230px;
 z-index: 9999;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
 display: block;
 float: right;
 position: relative;
 top: auto;
 left: -15px;
 right: 15px;
 bottom: auto;
 margin: 0 0 15px 0;
 padding: 0;
 background-color: transparent;
 color: inherit !important;
 font-size: 16px;
 line-height: 16px;
 cursor: pointer;
}

Which forces the description to stay on the bottom left side, because it would shift throughout my projects and sometimes overlap my images. Problem with the code is, I have a lot of projects, so when people near the end of my works list, the description hides the last few projects. I am wondering if there is  CSS code that will allow me to simply add text under gallerys so that I can do away with the description issues all together? 

 

Link to comment
  • Replies 0
  • Views 559
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.