html - How do I add a class to my unordered list in Weebly?

Question

Weebly help center can't help me on this simple one and they recommended the forums, google and w3schools. I wan't to style my <ul></ul> in weebly by adding a class to it. How do I do this?

Answer 1

因此，Weebly 的支持文档说您的后端将有一个选项卡来管理您的 CSS 和 HTML。

选项一

1 - 转到 HTML 选项卡并将一个类添加到您的ul.

<ul class="myClass"></ul>

2 - 转到 CSS 选项卡，然后在主 css 文件的底部写入您的新类样式

.myClass { /* whatever */}

通过将类放在 CSS 的底部，如果它们不同，这些类样式将覆盖当前样式。您可能需要取消某些内容，例如margin或padding。例如：

ul { margin: 100px; }

.myClass { margin: 0; }

.myClassul由于s 定义的样式已被覆盖，边距将为 0 。

---

选项二

将您的可编辑内容包装在具有类或 id 的 div 中，并将 ul 定位在该 div 中。div本身可以保持无样式。

例子

HTML

<div id="editableContent">

    <ul>
        <li>List Item</li>
    </ul>

</div>

CSS

#editableContent ul {
    color: #F00;
}

其中的每个列表项都div#editableContent将带有红色文本。编辑器不需要任何 HTML 知识，样式将保持一致。

Answer 2

我解决了它，我覆盖了标准主题设计而不是创建我自己的。这些是我修改的 CSS 部分：#main-wrap .paragraph ul和#main-wrap .paragraph ol

#main-wrap .paragraph ul {
    padding-left:5px !important;
}

#main-wrap .paragraph ul li {
    list-style: none !important;
background: url(red-arrow.png) no-repeat 0px 0px;
    color: #000000;
    padding-left:30px !important;
}

#main-wrap .paragraph ol li {
    list-style: none !important;
    background: url(red-bullet.png) no-repeat 0px 6px;
    color: #000000;
    padding-left:20px !important;
}