在WordPress报纸主题上创建滚动文本框
你好。欢迎来到有关如何在WordPress报纸主题上创建滚动文本框的教程。您是否有一些大文本要粘贴到博客内容中,但几乎占据了整个页面?不必担心,因为在本指南中,您将学习如何使用自定义的CSS代码在WordPress报纸主题上创建滚动文本框。
请注意,该指南仅在WordPress上经过测试 报纸X 主题v10.3.6.1。
在WordPress报纸主题上创建滚动文本框
创建自定义CSS代码
首先,您需要创建一个自定义CSS代码来定义滚动文本框的细节。 “的CSS 是用于样式化HTML文档的语言。它描述了应如何显示HTML元素”。
Newspaper X主题提供了一种从主题面板设置中创建自定义CSS代码的简便方法。要访问Newspaper X主题面板设置,请导航至 报纸>主题面板 该主题的左侧菜单面板上的“标签”。这应该打开一个屏幕;
接下来,在“主题”面板上,向下滚动并单击 定制代码 刺。这将打开这样的“定制CSS”页面;
请点击 自定义CSS 打开一个框,您可以在其中编写自定义CSS代码。在本教程中,我们将要编写的代码是用于滚动文本框的。
要创建一个简单的自定义CSS滚动文本框,请在其下方使用我们使用的CSS代码。
评论放在 /* */
。
.scroll-box {
background: #001a33; /* Text Box Background Color */
color: white; /* Color of the text on the box */
border: 2px solid rgb(34, 34, 118); /* Box border style */
height: 300px; /* maximum height of the box */
padding: 15px; /* Size of the space around the content */
overflow-y: scroll; /* specifies what should happen if content overflows an element's box. */
}
完成自定义文本框后,请点击 保存设置 按钮。
在WordPress报纸主题上创建滚动文本框
接下来,创建您的帖子内容并插入滚动文本框。要创建滚动文本框,您需要插入一个自定义HTML博客。
单击“自定义HTML”以插入自定义HTML博客。输入以下代码以在WordPress上创建自定义滚动文本框。
ENTER YOUR CONTENT HERE
您可以使用其他HTML标签,例如
用于预格式化的文本。例如;
ENTER CONTENT HERE以下是使用预先格式化的文本标签的“滚动”文本框示例,
。
{ "annotations": { "list": [ { "builtIn": 1, "datasource": "-- Grafana --", "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "description": "OpenVPN Server status using Prometheus and OpenVPN exporter ", "editable": true, "gnetId": 10562, "graphTooltip": 0, "id": 3, "links": [ { "icon": "external link", "tags": [ "openvpn" ], "targetBlank": true, "type": "dashboards" } ], "panels": [ { "cacheTimeout": null, "colorBackground": false, "colorPostfix": false, "colorPrefix": false, "colorValue": true, "colors": [ "#d44a3a", "rgba(237, 129, 40, 0.89)", "#299c46" ], "datasource": "Prometheus", "fieldConfig": { "defaults": { "custom": {} }, "overrides": [] }, "format": "none", "gauge": { "maxValue": 256, "minValue": 0, "show": false, "thresholdLabels": false, "thresholdMarkers": true }, "gridPos": { "h": 2, "w": 3, "x": 0, "y": 0 },美丽,不是吗?
因此,既然您已经定义了自定义CSS代码,则每次需要插入滚动文本框时,只需使用相关的HTML元素标签即可(
,,…)与class
“”的值的属性scroll-box
,按照本指南。这就是在WordPress报纸主题上创建滚动文本框是多么容易。我希望这是有益的。
请享用! !
更多WordPress教程
使用libModSecurity将对WordPress登录页面的访问限制为特定IP
在Ubuntu 20.04上使用LAMP Stack安装最新的WordPress
如何修复WordPress无法建立与WordPress.org的安全连接
在CentOS 8上使用Nginx和MySQL 8安装WordPress
在Debian 10 Buster上使用Nginx安装WordPress 5
。