您可以im体育官app使用 Google Webfonts 在您的 CheckMarket 调查中im体育官app使用自定义字体。

• 转到https://fonts.google.com/并找到您要im体育官app使用的字体。
• 单击+号选择字体，接下来页面底部会出现一个黑框。
• 单击黑框，打开抽屉。
• 复制 CSS 代码@import url('https://fon….
• 将@import代码粘贴到第一行，位于调查中所有其他 CSS 代码之前

在下面的示例中，im体育im体育官app使用了Raleway webfont

@import url('https://fonts.googleapis.com/css?family= Raleway &display=swap');

 @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body, p, h1, h2, h3, h4, h5, h6, .heading-table, .greeting, div.greeting, .button, .ladda-button, th.question, td.question, table, .nps input, input, input, textarea, select, button, .matrixTable .sub-question, th.subquestion, td.matrix_ratingpoints, .response, .radio label, .checkbox label, .ratingscale .innerCell, .systemText.previewWarning, .greeting { font-family: 'Raleway', Arial, sans-serif;}

下面的 CSS 代码片段将隐藏您调查中的单选按钮和/或复选框。

 /*This hides the radio button*/ .radio input[type="radio"]{ display: none; } /*This hides the checkbox*/ .checkbox input[type="checkbox"]{ display: none; }

下面的 CSS 片段将修改调查的“下一步”按钮的文本。可以im体育官app使用相同的原理来更改“上一个”或“完成”按钮的文本。

im体育在片段中添加了一些注释，解释了如何在您的调查中定位特定的调查语言。

 /* Remove the current displayed text in each language */ button.button.ladda-button.nextButton { color: transparent; position: relative; } /* Display a new text on the button, the code below, targets every available language of the survey, read the info below, if you want to target a specific survey language*/ button.button.ladda-button.nextButton:before { content: 'Bevestig'; color: #fff; position: absolute; } /* INFO */ /*target text button in English - use the css selector below to target specific language, if not used, the text will be the same in each language :lang ([language code])> Depending the text that needs to be displayed, play*/ /*around with the padding, to assure the text is aligned properly in the middle of the button*/ /*END INFO */ :lang(en)>button.button.ladda-button.nextButton:before { content: 'Confirm'; color: #fff; position: absolute; } /* target button on specific survey page*/ /*use : .page-xx */ /*The example below shows you how to target the next button on page 8 of your survey. */ /*Keep in mind to update the css if pages are added in your survey (this way you can target any element on a specific page:.page-8 button.button.ladda-button.nextButton { color: transparent;}*/

下面的 CSS 片段将允许您更改调查完成按钮的文本。在下面的示例中，im体育将完成文本替换为确认您的投票

button.button.ladda-button.finishButton.nextButton:before { content: 'Confirm your registration'; color: black; position: absolute; } button.button.ladda-button.finishButton.nextButton { position: relative; color: transparent; }

 .btn-group-lg>.btn, .btn-lg { color: transparent !important; position: relative; } button.button.startButton.btn-lg:before { content: 'Start'; color: #FFF; position: absolute; } /* INFO */ /*target text button in English - use the css selector below to target specific language, if not used, the text will be the same in each language :lang ([language code])> Depending the text that needs to be displayed, play*/ :lang(nl)>button.button.startButton.btn-lg:before { content: 'Begin'; color: #FFF; position:absolute; } /*END INFO */

CSS 片段显示您可以通过另一个图标更改滑块的句柄。

im体育在这个例子中im体育官app使用的图标是一个心形图标。

1. 上传您要在媒体库中im体育官app使用的图像。
2. im体育官app使用调整大小工具调整媒体库中图标的大小：
   
3. 双击图像以获取完整的图像 URL。

 .rangeslider__handle { background-image: url(URL TO FILE IN MEDIA LIBRARY ) !important; background-size: 100% !important; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .1)); -moz-box-shadow: 0; -webkit-box-shadow: 0; box-shadow: none; -moz-border-radius: 50%; -webkit-border-radius: 0%; border-radius: 0; } .rangeslider__horizontal { height: 4px; width: 100%; } .rangeslider { background: #000000; position: relative; height: 3px; } .rangeslider__filled { background: #000000; height: 10px !important; } .rangeslider__fill { -webkit-border-radius: 0 !important; border-radius: 0 !important; } .rangeslider__handle { background: none; border: none; top: -15px !important; }

下载此示例中im体育官app使用的图像图标

提示：将图像调整为 32 x 32 像素

在调查的整个宽度上显示一个全宽进度条。

进度条的颜色可以在调查外观的进度条选项卡中设置。

 /*Progressbar*/ .progressWrapper { position: fixed; width: 100%; left: 0; right: 0; top: 0; } .progress { width: 100%; overflow: hidden; height: 10px; margin-top: 0; } .progress-text { display: none; }

默认情况下，取消选择的横幅将显示在您调查的宽度（以像素为单位）处。 CSS 片段将在调查的整个宽度和顶部显示横幅

 /*add full width banner with logo to your survey*/ /*the banner image can be set in the survey appearance > Banner tab*/ .banner div.center, .banner h1.center { border-radius: 0; position: absolute; top: 0; left: 0; width: 100%; align-content: center; margin: 0 auto; background: #000; padding-top: 20px } .banner div.center img, .banner h1.center img { padding-bottom: 10px } .pageWrapper { /* Margin to ensure that the survey is not under the banner */ margin-top: 5rem; /* Margin to ensure that the survey is not under the footer */ margin-bottom: 5rem; } /*add full widht footer with logo to your survey*/ .footer:after { position: fixed; width: 100%; bottom: 0; height: 4rem; background-color: #000; left: 0; background-image: url(URL TO LOGO MEDIA LIBRARY); background-repeat: no-repeat; background-size: 4rem; background-position: center; content: ''; color: transparent }

当受访者忘记回答问题时，他会收到“您忘记回答问题”的消息通知。当您需要对此进行个性化设置时，您可以im体育官app使用一些自定义 CSS 来实现

 /* removes the current message */ #messageBar span { color: transparent !important; position: relative; } /* inject a new message to show to the respondent */ #messageBar:after { content: 'Oops, you forgot to answer a question'; color: #76640f; font-weight: bold; font-size: 120%; }

如果您的调查有多种语言，请将此放在样式前面：':lang(en)>'。用正确的语言代码替换每种语言重复“en”。例如：

 /* removes the current message that is displayed for the English language */ :lang(en)> #messageBar span { color: transparent !important; position: relative; }

下面的 CSS 片段将允许您隐藏矩阵问题列上方的比例值。

 .matrixTable thead th span, .matrix thead th span { display:none; }

下面的 CSS 片段将确保您的报告标题在 PDF 中或打印时居中。

 @media print { .headerLeft h1 { text-align: center !important; } }

要在您的报告中应用此代码段，请打开报告进行编辑，打开主菜单，选择样式并向下滚动到自定义 CSS。

im体育官app使用下面的 CSS 代码更改感谢页面的颜色。感谢页面有两种：普通感谢页面和备用感谢页面。在此示例中，im体育将普通感谢页面设置为绿色和白色文本，并将备用感谢页面设置为红色和白色文本。

 body.thank-you-page, body.thank-you-page h1, body.thank-you-page h2, body.thank-you-page h3, body.thank-you-page h4, body.thank-you-page a, body.thank-you-page .pageWrapper, body.thank-you-page div.greeting { background: #66C96A; color: #fff } body.thank-you-page.alternate, body.thank-you-page.alternate h1, body.thank-you-page.alternate h2, body.thank-you-page.alternate h3, body.thank-you-page.alternate h4, body.thank-you-page.alternate a, body.thank-you-page.alternate .pageWrapper, body.thank-you-page.alternate div.greeting { background: #FF5D50; color: #fff }

im体育官app使用下面的 CSS 更改矩阵问题第一列的宽度。

 .matrixTable .firstColumn { width: 80%; }

要隐藏特定页面上的下一个按钮，请im体育官app使用：

 .page-2 .nextButton { visibility: hidden !important; }

这里im体育将它隐藏在第 2 页。要将它隐藏在不同的页面，只需将“2”更改为正确的页码。

要在受访者完全观看嵌入视频之前隐藏下一个按钮，请在您im体育官app使用的嵌入代码中im体育官app使用类 disableNextTillEndVideo。在调查的文本/媒体元素中im体育官app使用它。

 <div class="disableNextTillEndVideo">

 </div>

例子：

 <div class="disableNextTillEndVideo"> <div class="“videoContainer”"> <div class="“videoWrapper”"><img id="cmMediaSpace" style="width: 100%; height: auto;" src="/script/video_player/video.png" alt="https://s-us.chkmkt.com/lib/12345/files/myvideo.mp4"></div> </div> </div>

im体育官app使用下面的 CSS 为您的 NPS 问题添加色标：

 .nps td:nth-child(1) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(1) div.selected, .nps td:nth-child(1) div.selected:hover { 背景：红色； } .nps td:nth-child(2) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(2) div.selected, .nps td:nth-child(2) div.selected:hover { 背景：红色； } .nps td:nth-child(3) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(3) div.selected, .nps td:nth-child(3) div.selected:hover { 背景：红色； } .nps td:nth-child(4) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(4) div.selected, .nps td:nth-child(4) div.selected:hover { 背景：红色； } .nps td:nth-child(5) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(5) div.selected, .nps td:nth-child(5) div.selected:hover { 背景：红色； } .nps td:nth-child(6) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(6) div.selected, .nps td:nth-child(6) div.selected:hover { 背景：红色； } .nps td:nth-child(7) div { 背景颜色：rgb(255 0 0 / 30%); } .nps td:nth-child(7) div.selected, .nps td:nth-child(7) div.selected:hover { 背景：红色； } .nps td:nth-child(8) div { 背景颜色：rgb(255 165 0 / 30%); } .nps td:nth-child(8) div.selected, .nps td:nth-child(8) div.selected:hover { 背景：橙色； } .nps td:nth-child(9) div { 背景颜色：rgb(255 165 0 / 30%); } .nps td:nth-child(9) div.selected, .nps td:nth-child(0) div.selected:hover { 背景：橙色； } .nps td:nth-child(10) div { 背景颜色：rgb(0 128 0 / 30%); } .nps td:nth-child(10) div.selected, .nps td:nth-child(10) div.selected:hover { 背景：绿色； } .nps td:nth-child(11) div { 背景颜色：rgb(0 128 0 / 30%); } .nps td:nth-child(11) div.selected, .nps td:nth-child(11) div.selected:hover { 背景：绿色； }

有关 NPS 问题的更多信息，请参见以下页面：

• 净推荐值 (NPS) – im体育官app使用、应用和陷阱
• 净推荐值软件
• NPS – 高级工作流程
• NPS——让每个人都参与进来
• NPS 在 14 张幻灯片 (Slideshare) 中得到了清晰的解释
• 查看示例 NPS 调查结果
  （访问结果的密码： NPScore）
• im体育官app使用im体育的 NPS 计算器
• 如何将 NPS 被动因素转化为推动者
• 如何将 NPS 批评者转变为推动者