Personalize every aspect of your survey theme effortlessly with Custom CSS
Wish you could add your own personal touch to a survey theme? With the CSS Customization feature, you can personalize every aspect of your survey theme, such as font, progress bar, background color, buttons, and so much more!
Let’s see how it works:
1. On your survey builder interface, navigate to the Design section. Select the ‘Create New Theme’ tile.
2. Under CSS Customization, click on the ‘Open Advanced Editor’ button.
3. In theAdvanced Stylingeditor, add your CSS code. Once you’re done, click on the 'Update theme’ button.
4. Click the “Save & Apply” button under the Customize tab to save the changes.
Now, let’s see the most commonly used CSS customizations. You can copy and paste them to the Advanced Styling code editor to see the customizations in action.
For Classic surveys:
1. To hide the survey question numbers.
.ss_cl_survey_qstn_left
{
display: none !important;
}
2. To Make the buttons rectangular.
.ss-primary-action-btn{
border-radius: 2px !important;
}
3. To align the header logo to the left.
.surveysparrow-survey-container--classic-form .ss_classic_top_bar .ss-survey-header__logo--image-holder{
justify-content: flex-start;
}
4. To align the header logo to the right
.surveysparrow-survey-container--classic-form .ss_classic_top_bar .ss-survey-header__logo--image-holder{
justify-content: flex-end;
}
5.To center align all the questions
.ss_cl_survey_qstn,
.ss_cl_survey_qstn_left {
text-align: center;
}
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_options_container,
.surveysparrow-survey-container--classic-form .ss_classic_top_bar .ss_classic_top_bar_section_details,
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item.active {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.surveysparrow-survey-container--classic-form .ss_cl_qstn_action,
.ss-skip-container,
.surveysparrow-survey-container--classic-form .ss_inline_input_container,
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_options_container .ss_multiple_choice_visual,
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_options_container .ss_rating_container.ss_rating_container--classic,
.date-time-classic-form-wrapper .ss_options_container:not(.ss-form-group) .date-time-container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.surveysparrow-survey-container--classic-form .ss_cl_qstn_action {
width: 100%;
}
.ss-answer-option--choice {
margin-left: 16px;
}
.ss-answer-option--picture-choice {
margin: 12px;
}
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_options_container .ss_multiple_choice{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.ss-slider-container {
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.ss-slider-container .ss-slider{
width: 100%;
}
@media screen and (min-width: 1400px) {
.ss_cl_survey_qstn_right {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 767px) {
.ss-answer-option--picture-choice {
margin: 6px;
}
.surveysparrow-survey-container--classic-form .ss_cl_qstn_action p{
display: none !important;
}
}
@media screen and (max-width: 1024px){
.helper-msgs-container{
width: 100%;
}
.helper-msgs-container h6.error{
justify-content: center;
}
}
.helper-msgs-container{
left:50%;
transform:translateX(-50%);
}
.ss-heatmap-container{
width: 100%;
}
.ss-heatmap-container .ss_image_wrapper{
text-align:center;
}
6. To customize font size on the Welcome page
/*Main title*/
.ss_classic_survey_intro_contents h3.ss-survey-heading--text
{
font-size: 30px !important;
}
/*Description*/
.ss_classic_survey_intro_contents .ss-survey-text-question-text{
font-size: 20px !important;
}
7. To hide option number for Rank order question
.ss-option--rank-order__select-wrap {
display: none;
}
8. To add a border around the questions
.ss-fp-scroll__item-data-wrap .ss_cl_survey_qstn_item {
padding-left: 40px;
padding-right: 40px;
border: 2px solid;
}
9. To remove the description and its space on the Welcome page
.ss_classic_survey_intro_contents .ss-survey-heading--text + p {
display: none;
}
10. To remove the “Never share passwords” message at the end of the survey.
.ss_cl_survey_submit_resp p span {
display: none;
}
11. To align labels to the center for the Matrix question.
.ss_matrix_container.ss_matrix_container--classic .ss_matrix .ss_matrix_leftside .ss_matrix_column p {
text-align: center;
}
12. To customize the size of the first item in the Group rating question
.ss-group-rating-container:first-child .ss-group-rating-item__text p {
font-size: 24px; /* <- Font size of the first label */
}
.ss-group-rating-container:first-child .answer-option-rating--icons.answer-option-group-rating--icons svg {
width: 60px; /* Size of the stars */
height: 60px; /* Size of the stars */
}
13. To make a specific line of a section title green-colored
.ss_cl_survey_qstn_item.active:not([data-qa-question-type]) .ss_cl_survey_qstn_right h1 p:nth-child(1) {
color: green;
}
For Chat surveys:
1. To change the font color for the chat survey header.
.surveysparrow-chat__header-left .ss-survey-text-size--xl{
color: orange; /* apply your color here */
}
2. To change the bubble color of the chat.
.ss-chat-row__bubble {
background-color: lightblue; /* apply your color here */
}
3. To change the width of the chat survey container
.surveysparrow-chat__wrapper{
max-width: 800px !important;
} /*change max-width to change the size of the container*/
4. To make the chat interface color transparent.
.surveysparrow-chat__split-layer{
/*adjust transparency with values ranging from 0 to 1;*/
background: rgba(255, 255, 255, 0.5);
}
.surveysparrow-chat-userinput{
background: transparent;
}
5. To change the width of the embedded video.
.ss-chat-row .ss-chat-row__bubble .ss_video_wrapper {
width: 400px; // <-- Change to desired width
max-width: 100%;
}
Enjoy adding your own personalized style to your survey themes! Please reach out to us if you’re looking for more specific CSS customizations for your surveys. We are just a chat away!
Comments
4 comments
How do I modify the size of thumbnail image in each picture choice question type options?
Hi Parag,
Sorry for the delay, please find the below link for your query,
https://community.surveysparrow.com/t/css-to-increase-picture-choice-size/3275
Feel free to reach out to us, if there is anything else I may assist you with
Hi, what about the font size in 'Thank You' page? I realised the addressee font is big, but the font for first paragraph is small (that's what I want), then other paragraph' font are big again. How to standardise it (all small font)?
It's ok, i saw the airtable css info. Just need help with Section font now. That one has no code to change the font size and formatting yet.
Please sign in to leave a comment.