Customize statement arrows in carousel questions | XM Community
Question

Customize statement arrows in carousel questions

M

Does anyone have any custom code to enhance the arrows to the left and right of the statements in a carousel question? Right now our participants are saying that they don't stand out enough so I want to do a double arrows or bolder bigger buttons but I can't figure out the CSS.

2 replies

J
Badge

One idea is to double size using Javascript (below). You could also use css to put a border around the arrows or a background.
/** Customize the Chevrons **/
var cChevron = jQuery( ".CarouselChevron" );
var dbl = 2*Number(cChevron.attr( "width" ));

cChevron
.attr("width", dbl)
.attr("height", dbl); 

//Work Around
cChevron.each(function () { jQuery(this)[0].setAttribute('viewBox', '5 5 24 24') });

Tom_1842
Rank
Userlevel 7
Badge +27

Hi, if you still need, the below CSS can be added to the Style section of the survey’s Look & Feel to increase the size of the arrows and change their color to red:

.CarouselChevronContainer {
    width: 70px !important;
    height: 70px !important;
}

.CarouselChevron {
    fill: #ff0000 !important;
    height: 70px !important;
    width: 70px !important;
}

.CarouselChevron.Disabled {
    fill: #FF7F7F !important;
}

 

Leave a Reply


Terms & Conditions