将自定义 CSS class 添加到 WFFM 表单部分的图例元素

Question

我希望将 CSS class 添加到与 Web Forms for Marketers 表单关联的图例元素。在 Sitecore 的“表单部分”项中，我可以将 <ShowLegend>Yes</ShowLegend> 添加到“参数”字段，这确实会添加带有 class scfSectionLegend 的图例元素。这很好，但我想添加一个隐藏图例文本的自定义 class。我该怎么做？

更新：

我可以通过在现有 CSS class scfSectionLegend 上添加一些 css 来解决这个问题。我添加了这个：

    /* ACCESSIBILITY: Legend text should be intact but hidden for screen readers */
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    position: absolute !important;

假设我们永远不希望 WFFM 图例文本对该项目可见，这工作正常，但这可能会改变。我希望能够在 DOM 中挑出一个特定的事件，其中父 div 有 hideClass - 像这样：

.hideClass.scfSectionBorderAsFieldSet.scfSectionLegend {
   [CSS properties here]
}

这样内容作者可以控制是否隐藏图例。不幸的是，在运行之后，CSS 不起作用；它不会隐藏图例文本。想法？我的 CSS 知识不是那么丰富。

Answer 1

节项中有参数字段。您可以修改它的值并设置：

<CssClass>hideClass</CssClass><ShowLegend>Yes</ShowLegend>

Answer 2

@Anton 的回答非常接近，但我建议您以不同的方式应用 CSS。

添加参数以匹配您的 CSS 风格：<CssClass>hideLegend</CssClass>

CSS Class 将应用于父字段集，标记应类似于：

<fieldset class="hideLegend">
    <legend>Custom Fields</legend>
        ...
    </div>
</fieldset>

然后仅当父字段集具有所需的 class:

时才创建样式以针对图例

fieldset.hideLegend legend {
    /* your custom CSS here */
    left: -9999px;
    position: relative;
}

根据 WFFM 的版本，您可能会在 select 部分看到以下字段选项：

如果是这样，您可以通过在模板类型 /sitecore/templates/Web Forms for Marketers/Meta Data/Extended List Item 下的 /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes 下创建项目，将自定义 CSS class 添加到下拉列表。将项目名称设置为对您的编辑者友好的名称，并将 Value 字段设置为与 CSS Class 名称匹配（例如上面的示例）。

以上是在 Sitecore 8.1 Update 3 和 WFFM 8.1 160523 上检查的，不同版本的标记和屏幕可能会有所不同。

将自定义 CSS class 添加到 WFFM 表单部分的图例元素

Add custom CSS class to legend element of WFFM form section

sitecore

web-forms-for-marketers