如何自定义Weebly块引用元素

块引用元素用于突出显示页面上的重要内容，例如摘要、结论和其他人的引用。 Weebly建站提供了许多主题，如果您喜欢带有默认块引用元素的主题，您会很幸运。但是，您总是喜欢主题而不是块引用元素。这是因为，大多数块引用样式在 Weebly 中都非常简单，只是显示粗体文本。在本文中，我们将探索自定义 Weebly 块引用元素以使您的内容更具吸引力的可能性。

自定义 Weebly 块报价

有多种方法可以更改您网站上的默认块引用元素样式：

从其他 Weebly 主题复制样式
自定义现有的块引用元素
使用自定义 CSS
使用嵌入代码元素插入单块引号

让我们详细讨论每个选项。

1.从其他主题复制CSS

您可能喜欢其他Weebly建站主题的块引用元素样式并希望将相同的样式应用于您的。按照以下说明将样式从任何主题复制到您网站的主题：

登录到您的 Weebly 帐户并编辑您当前站点的站点。
添加带有一些虚拟文本的块引用元素。
去 ”主题 > 更改主题“ 和 ”预习” 主题。
检查块引用元素样式是否喜欢。
“选择” 带有您选择的块引用元素的主题。
使用新主题，转到“main.less” 文件在“主题 > 编辑 HTML / CSS“。
搜索单词“blockquote”并将样式复制到剪贴板。如果 main.less 中没有块引用样式，您可能需要查看其他 .less 文件。
现在再次回到“主题 > 选择主题“ 和 ”选择” 你原来的主题。
去 ”main.less” 文件并替换“块引用” 风格与复制的一个。

保存更改后，您网站上所有现有块引用元素的样式都将根据新样式进行更改。您还可以通过在内容区域上拖放块引用元素来立即签出新样式。

注意有些主题的样式元素很简单“块引用” 有些人可能有“#wrapper 块引用“。

2. 修改已有区块引用 CSS

有时您只想对块引用样式进行细微更改，例如更改背景颜色或添加边框。在这种情况下，如上所述，请转到您网站的主样式表以查找相关的块引用样式代码。您可以根据需要修改颜色、字体和其他属性。

在更改之前，我们建议您使用 Google Chrome 浏览器检查源代码。这将帮助您识别哪个文件包含代码并轻松修改该文件中的代码。

3.用自定义CSS替换默认CSS

如果您不喜欢任何现有主题的块引用元素样式，那么您可以编写自己的 CSS 并替换现有样式，如上所述。这是一个简单的 CSS 代码示例，您可以根据需要自定义参数：

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #ffffff;
border-left:5px solid #ff7f00;
background:#4b8baf;
}

只需替换默认的“块引用“风格下”main.less” 使用此代码文件，您将看到块引用元素更改如下：

4. 使用嵌入代码元素插入块引用

上述方法改变了默认块引用元素的样式并适用于整个站点。有时您可能有兴趣仅在特定页面上添加不同的块引用。在这种情况下，使用内联 CSS 将有助于创建您的块引用，如下所示：您可以根据需要自定义颜色和边框以创建不同样式的块引用。下面是自定义块引用的 CSS 和 HTML 代码。您必须将此代码复制并粘贴到“嵌入代码“ 元素。

.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 20px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
<blockquote class="webnots_quote">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</blockquote>

确保更改虚拟文本并添加您自己的内容。查看有关如何使用Weebly建站自己的自定义 CSS 更改默认块引用 CSS 的

如何自定义Weebly块引用元素