如何自定义Weebly块引用元素

如何自定义Weebly块引用元素

块引用元素用于突出显示页面上的重要内容,例如摘要、结论和其他人的引用。 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 的

推荐:如何立即在ChatGPT上使用GPT-4


发表评论