Hi
Im trying to add border radius (rounded corners) to a Slider Intercept via the custom CSS. So far Ive figured out that the containers I need to focus on appear to be:
div.QSISlider.SI_bgciSxb0arWwhxQ_SliderContainer
#SurveyEngineBody
but Im not 100%
Ive been trialling CSS but so far no results:
#SurveyEngineBody {
border-radius: 15px;
}
.Skin #SkinContent {
border-radius: 15px; !important;
}
.Skin .SkinInner {
border-radius: 15px; !important;
}
Can anyone assist me in the right direction?
Many thanks in advance
Adding Border-Radius to Slider via custom CSS
+1
Userlevel 5
+25
Hi waynedoz,
Does this element already have a border? If not you will need to add one:
.slider-container {
border: 1px solid black;
border-radius: 15px;
}
Replace the above .slider-container class for whichever appropriate class/ID you need, although .slider-container works fine for me.
You likely won't need the existing rules you have either.
Good luck!
Userlevel 7
+36
waynedoz
You need to navigate to your intercept and click on Add Javascript in Options.
Also within After display you can custom code your CSS for instance if you want to round your feedback button it would be like:
document.querySelector('.QSISlider div:nth-child(2)').style.borderRadius='50px';
It would be in After display:
Hope it helps!
+1
Thanks so much for both of these solutions! Im having partial success but just need one last piece of help.
Here's the CSS Im testing (via the look & feel CSS input):
.slider-container {
border: 1px solid black;
border-radius: 15px;
}
#SurveyEngineBody {
background: transparent !important;
border: 1px solid black;
border-radius: 15px;
}
.Skin #SkinContent {
background: rgba(255,255,255,.9) !important;
border: 1px solid black;
border-radius: 15px;
}
.Skin .SkinInner {
background: transparent !important;
}
And these are the results (the offset between the container and contents is deliberate to allow me to see whats happening in the master container:)
I can now control the border radius for the content, but not the Slider main container (shown in green). This is the one id most like to change, but so far its not working.
Ive tried using Chrome Inspect to find the label for the container, but it wont show.
If anyone can help with this last hurdle, I'd really appreciate it :)
Many thanks again
+1
Thanks to everyone on this - in the end the solution was within the Edit Creative area. You can set the main container to have no background - then using the CSS for border-radius works perfectly.
with that set, heres the final code that i used:
#Wrapper {
margin: 0 auto !important;
border: 0px solid black;
border-radius: 0px 30px 0px 30px;
background-color: #091535 !important;
padding: -20px 0px 0px 0px;
}
#SurveyEngineBody {
background-color: transparent !important;
border-width: 0 !important;
border-color: #000 !important;
border-style: solid !important;
border-radius: 20px !important;
}
.Skin #SkinContent {
background: transparent !important;
border-radius: 20px;
border-width: 0 !important;
border: none;
padding: 20px;
}
.Skin .SkinInner {
background: transparent !important;
}
/* button style */
input[name='NextButton'] {
-webkit-appearance: none !important;
background-color: #0074E0 !important;
border-width: 0 !important;
border-color: #000 !important;
border-style: solid !important;
border-radius: 20px !important;
color: #fff !important;
cursor: pointer !important;
float: left !important;
font: inherit !important;
line-height: normal !important;
margin: 0 0 0 0 !important;
overflow: visible !important;
padding: 0em !important;
text-align: center !important;
text-decoration: none !important;
vertical-align: middle !important;
/*width: 33% !important; */
width: 120px !important;
height: 40px !important;
font-size: 14px !important;
}
/* Input Text Boxes style */
.Skin .InputText,
input[type=text] {
background-color : #ffffff;
border-radius: 8px !important;
border: solid 0px #696b6d !important;
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.