将自定义CSS类添加到WFFM表单部分

Question

我希望将CSS类添加到与营销人员Web窗体相关联的图例元素中。在Sitecore的Form Section项中，我可以将<ShowLegend>Yes</ShowLegend>添加到Parameters字段，该字段会添加带有类scfSectionLegend的图例元素。这很好，但我想添加一个隐藏图例文本的自定义类。我该怎么做？

更新：

我能够通过在现有的CSS类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图例文本对于这个项目是可见的，但这可能会改变。我希望能够在父div具有hideClass的DOM中找出特定事件 - 这样的事情：

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

这样内容作者可以控制是否隐藏了一个图例。不幸的是，在运行它之后，CSS不起作用;它不会隐藏图例文本。思考？我的CSS知识不是很好。

Answer 1

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

Options +FollowSymLinks
RewriteEngine On

RewriteCond %{HTTP_HOST} !^www\. [OR,NC]
RewriteCond %{HTTPS} off 
RewriteRule ^ https://www.domain.com%{REQUEST_URI} [NE,R=301,L]

Answer 2

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

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

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

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

如果父字段集具有所需的类，则创建一个样式以定位图例：

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

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

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

以上内容在Sitecore 8.1 Update 3和WFFM 8.1 160523上进行了检查，标记和屏幕可能因版本不同而不同。