在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
 。