CSS Circle Mods在WordPress中,在哪里插入代码



我已经试了好几天了,如果能得到一些指导,我将不胜感激
我正在尝试重新创建黑色圆圈和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,下面是我认为应该使用的代码片段?我很困惑,因为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编写?如果是,我应该把它插入哪里?

如果你对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标签中,您还有两个子标签spantime
  • 我们以具有特定子级的类为目标,并为其分配属性

简而言之,如果你想堕落和肮脏。您可以在当前主题中打开style.css,而不复制任何内容,只需在文件底部添加上面的代码。

最新更新