时间戳

首页 > 解决方案 > 有没有办法通过主题的附加 CSS 界面添加新的 div 类？

css - 有没有办法通过主题的附加 CSS 界面添加新的 div 类？

问题描述

我正在尝试修改 woocommerce 网站，但我几乎没有接受过 HTML/CSS 培训。我学到的大部分内容来自反复试验、一些在线教程、在 Chrome 中使用开发者控制台等......

我正在尝试在名为tg-container. 我可以在它下面放一个，使用一个现有的类，我不需要看到它的信息。可以通过主题中内置的附加 CSS 界面来完成，还是我必须进入 style.css 和 html 来创建边界？我知道附加 CSS 界面的好处是在主题更新时无需直接编辑主题文件。

绕过页面

带边框的示例页面 - 仅在访问绕过页面后才能访问

图片：打开 Chrome 开发者控制台并显示区域代码的示例页面

----------------- 进一步实验----------

我创建了一个子主题并尝试以这种方式添加它，但我遗漏了一些东西（因为我不是编码员），我能够为图像创建区域，但图像没有显示出来。我已经尝试将它添加到子主题和父主题（编辑style.css和page.php）中。

在page.php孩子（和父母）的（之后）

<div class="page-header clearfix">
            <div class="tg-container">

我添加了

<h3 class="title-border"> </h3>

style.css我在孩子身上试过这个：

/*Add Wycinanki Borders*/

.title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

style.css我在孩子身上试过这个：

/*Add Wycinanki Borders*/

.page-header .title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

style.css我在父母身上试过这个：

.page-header .title-border {
        background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
        background-repeat: repeat-x;
        font-weight: 600;
       color: #3b3b3b;
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0; }

同样，它为图像创建了空间，但图像没有显示出来。我从“entry-sub-title”复制了其他属性，我能够成功地放置图像，认为它们的样式会相同。

感谢您的任何见解并帮助我了解我在做什么，哈哈哈。

标签： csswoocommercewordpress-themingthemes

解决方案

好的，我明白了。我<div class="title-border-top"> </div>在页面标题上方添加（实际上是在<div class="title-border-bottom"> </div>下面添加以供将来修改。

然后我在附加 CSS 中添加了以下内容：

.page-header .title-border-top{
    background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
    background-repeat: repeat-x;
    height: 30px;
            margin: 10px;
}

它正在工作，我从entry-sub-title一开始就隐藏了我接管的边界。现在我必须弄清楚 WP 为所有主要页面拉取了哪些页面模板，以便我可以将 html 添加到它们。

推荐阅读