How to Customize the TwentyTwenty Before/After Image Slider

Jun 5

In my last blog post I showed you how to add the “twentytwenty” plugin developed by Zurb.com to your Squarespace 7.0 website. This plugin uses the Stacked Image Gallery Block within Squarespace to create a handle that can be moved across two images to replace a “before” picture with an “after picture”. I also showed you how to hide the overlay, change it from horizontal to vertical, and alter where the handle starts.

What if you want the TwentyTwenty Image Slider to match your brand’s colour?

In this video I am going to show you how to use some CSS to customize your slider to match your brand’s colour. The code used in the video is provided below.

Step 1: Add the TwentyTwenty Slider

If you haven’t already, the first step is to add the TwentyTwenty Slider to your website. If you need some help, check out my last blog post.

Note: I have changed some of the code to match my brand name so that this code can be used on all Rebecca Grace Design Sliders. If you have a TwentyTwenty Slider from elsewhere, you will need to modify the code below to match. Wherever you see rebeccagracedesigns change it to twentytwenty.

Step 2: Add the Following CSS to Your Website

Now let’s add some code so we can alter it to match your brand. Go to Design > Custom CSS to copy and paste the following code.

/* Image Slider */

/* Adds an Outline */
.rebeccagrace-container {
  outline: white solid 3px;
  outline-offset: 3px;
}

/* Changes the Line*/
.rebeccagrace-horizontal .rebeccagrace-handle:before, .rebeccagrace-horizontal .rebeccagrace-handle:after, .rebeccagrace-vertical .rebeccagrace-handle:before, .rebeccagrace-vertical .rebeccagrace-handle:after {
  background: white !important;
}

.rebeccagrace-horizontal .rebeccagrace-handle:before {
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
}

.rebeccagrace-horizontal .rebeccagrace-handle:after {
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
}

.rebeccagrace-vertical .rebeccagrace-handle:before {
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
}

.rebeccagrace-vertical .rebeccagrace-handle:after {
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
}

/* Changes the Circle in the Handle */
.rebeccagrace-handle {
  border: 3px solid white !important;
}

/* Changes the Arrows */
.rebeccagrace-left-arrow {
  border-right: 6px solid white !important;
}

.rebeccagrace-right-arrow {
  border-left: 6px solid white !important;
}

.rebeccagrace-up-arrow {
  border-bottom: 6px solid white !important;
}

.rebeccagrace-down-arrow {
  border-top: 6px solid white !important;
}

/* End of Image Slider */

Step 3: Customize

Wherever you see the colour white in the code, change it to match your brand’s colour!Hooray! You now have a slider customized to match your brand’s colour. To remove the overlay, change the images to stack vertically, or to change where the slider starts check out my last blog post!

Want an Image Slider with a bit more flair and customization?

Rebecca Grace Designs now offers easy to use Image Slider Plugins. Each plugin can be customized by animation, handle starting position, image placement, overlay, and colour!

Yes, please!