WordPress 中的 CSS Circle Mods，在哪里插入代码？答案

【问题标题】：CSS Circle Mods in WordPress, where to insert code?WordPress 中的 CSS Circle Mods，在哪里插入代码？
【发布时间】：2013-08-31 02:19:55
【问题描述】：

我已经尝试了几天来解决这个问题，我将非常感谢您的指导。
我正在尝试重新创建黑色圆圈以及 mm/dd/yy，如本主题所示：http://www.bluchic.com/how-to-change-header-text-to-a-logo-image-for-adelle-theme

所以我抓了下面的代码

} .post-date {
background: #000;
border-radius: 100px;
float: left;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.1;
margin-right: 0.667em;
padding: 0.95em 1.05em;
text-align: center;
text-transform: uppercase;
width: 48px;
}
.post-date a {
color: #ddd;
}
.post-date span {
display: block;
}
.post-date .entry-day {
color: #fff;
font-size: 21px;
font-size: 2.1rem;
}

我想把它放到这个主题中：http://sandbox.erinchambers.com/

然而，过去几年我一直远离 CSS，下面是我认为应该使用的代码的 sn-p？我很困惑，因为 CSS 版本似乎不同？

/* .article */

.article .article-content {width: 680px; float: right;}
  .article .post-header {margin-bottom: 30px; padding-top: 5px; border-top: 5px solid #000; border- bottom: 1px solid #000;}
  .article .post-meta {width: 240px; float: left; overflow: hidden;}
  .article ul.post-info-meta {overflow: hidden; font-size: .9em; margin: 5px 0; list-style: none;}
  .article ul.post-info-meta span {text-transform: uppercase; display: block; font-weight: 700;}
  .article ul.post-info-meta li {margin-bottom: 1px; padding: 0 0 0px 0px;}

我不确定我应该在哪里编辑样式表中的代码，是否应该制作一个子主题来执行此操作，或者我是否还必须编写一些额外的 HTML 或 PHP？如果是这样，我应该在哪里插入它？

【问题讨论】：

用div创建圆圈！！！
我只对 wordpress 模板进行了几次简单的编辑，但我认为您走在正确的轨道上。我相信你需要做两件事。 1. 在创建'post header' div 的区域内的php 页面模板中创建一个新的div（用于圆圈）。 2. 为圆创建一个新类。您已经找到了 css 的正确部分，并且您拥有上面创建圆圈border-radius 的必要代码。

标签： html css wordpress templates geometry

【解决方案1】：

如果您对 HTML 和 CSS 有一点了解，您只需要阅读一份指南，了解一些关于如何编辑 Wordpress 主题的简单指南。

明智的做法是复制您要更改的样式并将其下载到本地计算机上，以便您熟悉主题的资产。

添加一个圆圈，在你的情况下很简单

.post-date time
{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    background: #000;
    text-align: center;
}

解释我在那里做了什么

您已经有一个 li 标记，其类名为“.post-date”
在那个 li 标记中，您还有两个子标记 span 和 time
我们以具有特定子级的类为目标并为其分配属性

简而言之，如果您想低调而肮脏。您可以在当前主题中打开 style.css，无需复制任何内容，只需将上面的代码添加到文件底部即可。

【讨论】：