如何在Sitecore中编辑CSS类

Qwerty

我们已经从团队那里收到了HTML设计,现在已经集成到Sitecore 8项目(ASP.NET)中。

我看到重要元素的图像在css类中声明。

例如:页面中有两种类型的节标题-长和短,它们的类是:

.title-long{
  background:url('/images/bg-long.jpg');
  width:700px;
  height:80px;  
}

.title-short{
  background:url('/images/bg-short.jpg');
  width:300px;
  height:50px;  
}

这就是它们的用法。

<h3 class=".title-long">A very long header</h3>
<h3 class=".title-short">short header</h3>

如果标题标题很长,title-long则使用class。在此处输入图片说明

内容作者(CA)应该能够编辑标题和图像。我不知道如何制作可从体验编辑器进行编辑的图像(从css类引用)。

因此,我将通知CA仅可以从内容编辑器编辑此图像,然后我的代码将是:

ascx

<h2 id="sectionHeader" runat="server" class="title-long">
  <sc:Text ID="txtHeader" runat="server" Field="Section Header" />      
</h2>

ascx.cs

//add background image to header 
sectionHeader.Style.Add("background", "url(" + MediaManager.GetMediaUrl(headerImage.MediaItem) + ") no-repeat center center");

尽管此方法行之有效,但这里值得关注。

即使CA上载了“简短图片”,该类也始终为title-long

这种情况下的标准方法是什么,即CA在更改css类内部的图像时应具有良好的编辑体验。

马雷克·穆西拉克(Marek Musielak)
  1. 在模板(或数据源模板)上创建background imagecss class字段。

  2. 使用Edit Frame两个background imagecss class领域。

就是这样。作者将能够直接从“体验编辑器”中对其进行编辑。

有关编辑框架的更多信息,请访问:在PageEdit中使用Sitecore EditFrame或访问以下网址https : //www.google.com/search? q = sitecore+ edit+frame

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章