Question

我想将such intro（我在Codepen上找到的）添加到我的网站上，即添加到主页上的顶部全宽小部件，但是它的＆＃39;样式与主题的CSS相矛盾。

如何在我的主页上完成这项工作？是否需要将HTML代码嵌入到WordPress文本小部件中的插件，或者是什么？谢谢你的回答。

    * {
  margin: 0;
  padding: 0;
}

body {
  background: rgb(23,41,58); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}

canvas {
  display: block;
  width: 100%;
}

Answer 1

您可以将carvas标记放在新标记内并编辑该CSS类：

<div id="new-id"><carvas></carvas></div>

我建议你下载一个名为“simple css”的插件，并在“简单css”界面中更改类和Id，并编辑你的“new-id”CSS。

new-id {
  background: rgb(23,41,58); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}

您也可以在侧边栏中添加新的窗口小部件类型文本，并根据需要使用新的CSS类或ID编辑窗口小部件。

Answer 2

在复制/粘贴代码之前，我需要查看CSS SELECTOR以了解您复制的代码在大多数情况下执行的操作。

你链接的codepen主要由JS和一些CSS组成。

你的CSS代码集中了所有元素（*）和页面（正文）的所有内容，在实现之前你需要将这些CSS选择器隔离到一个将加载画布的div。

你甚至没有谈论他在这个代码中非常重要的javascript部分。

也许尝试通过查看HTML，CSS教程来了解您的技能代码，以了解您想要的基础知识。

如何将自定义HTML代码添加到wordpress小部件，以便它的css不会破坏主题样式？

2 个答案: