Blog carrousel arrows need to be adjusted

Hi,

On our blog page, the arrows for the summary carrousel are placed to the right, above the carrousel.  They are small (appear to be the same size as the ones on mobile format) and not very noticeable on the desktop.  We would like make them larger and thicker, and to move them down to be centered within the carousel as they are for the 'Starry Magic Throw Blanket' Shop page, and colored lavender.

[Really, the arrows are difficult to see on the throw blanket page since the first image is dark and the second image is white where the arrows are located.  We made them lavender so they are visible but not overwhelming.  Any other suggestions would be welcome.]

Website is Fantasy Artist Blog - Winter B. Renes — The Imerian, password B^tt3rb^tt

Thanks for your help.

B^tt3rb^tt

password is incorrect. Can you check it again?

Apologies.  The pw is B^tt3rB^tt  

Thank you.  

You can add this code to Website Tools (under Not Linked) > Custom CSS

.summary-carousel-pager.sqs-gallery-controls>span {
    padding: 10px !important;
    border-radius: 50%;
    position: absolute !important;
    top: 50% !important;
    display: block !important;
    opacity: 1 !important;
}
span.summary-carousel-pager-prev.previous {
    left: 0 !important;
}
span.summary-carousel-pager-prev.previous.sqs-disabled {
    visibility: hidden;
}
span.summary-carousel-pager-next.next {
    right: 0 !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before, .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
}

Thank you for your help.  🙂

It doesn't appear to have worked.  The arrows are still in the upper right.

Can you keep code in CSS box? I can check it again easier

I put the code back in and it seems to have worked this time.  (I had to reboot my computer, so that may have been the issue the first time I tried it.)  I did tweak the code for the placement and thickness of the arrows, but they do look good now.  Thank you so much for your help.  May I ask one more favor?

The arrows on the product carousels in the shop page are difficult to see depending on the background.  I've been playing around with color and though it's not a great color, I though making them bolder might help.  However, I am having trouble figuring out how to make them thicker or otherwise more visible.  Can you help me with this as well?  (The bookmarks are the only products with only one image).

On 1/14/2024 at 2:31 AM, WBRenes said:

I put the code back in and it seems to have worked this time.  (I had to reboot my computer, so that may have been the issue the first time I tried it.)  I did tweak the code for the placement and thickness of the arrows, but they do look good now.  Thank you so much for your help.  May I ask one more favor?

The arrows on the product carousels in the shop page are difficult to see depending on the background.  I've been playing around with color and though it's not a great color, I though making them bolder might help.  However, I am having trouble figuring out how to make them thicker or otherwise more visible.  Can you help me with this as well?  (The bookmarks are the only products with only one image).

I think we can add a circle background around arrow, what do you think? (just an example screenshot from some another site)

Thank you.  That could work.  We can give it a shot.  Can you keep the original arrow style, make it thicker, and add the circle?

15 hours ago, WBRenes said:

Thank you.  That could work.  We can give it a shot.  Can you keep the original arrow style, make it thicker, and add the circle?

Add this CSS code under

.summary-carousel-pager.sqs-gallery-controls>span {
    background-color: white !important;
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: unset !important;
    margin: unset !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    
}

That's great!  Thank you!  What would be the code to add those circles and arrows to the Product Item gallery carousel?

I currently have this, but it's not working as expected. 

.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-next:after, .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-prev:after {
    border-width: 6x 6x 0 0  
      !important;
}
.ProductItem-gallery-carousel-controls {
    justify-content: none;
    height: 100%;
    align-items: center;
 }
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: lavender !important;
}

I appreciate your help.  🙂

Thank you so much for all of your help.  I'm happy with how it's turned out.  🙂