Question

此网站使用WordPress运行。主题有一个Facebook按钮，显示在标题中。

我想将主题的Facebook按钮移动到页面标题行中。 Here is a picture of what I'm trying to do。我以为我可以将这段代码复制到某个地方的儿童主题中。

<a class="genericon_parent genericon genericon-facebook-alt"  title="Facebook" href="https://www.facebook.com/karen.b.russell.54" onclick="javascript:window.open('https://www.facebook.com/karen.b.russell.54'); return false;"><span class="screen-reader-text">Facebook</span> </a>

我已将该代码复制到content.php，content-none.php，content-single.php，content-page.php，但现在它无法正确显示。 This is what it looks like now。

我想我可以将CSS格式从标题中的主题按钮复制到内容标题中的新格式。当我试图复制css时，它没有用。

如何调整按钮（在第二张图片中圈出来）看起来像第一张？

可以在healthylifeadvisors.com

查看实时代码

我看到原始按钮似乎正在使用此css：

.site .widget_catchadaptive_social_icons a.genericon {
background-color: #f2f2f2;
border: 1px solid #eee;
border-radius: 3px;
-moz-border-radius: 3px;
box-sizing: content-box;
-webkit-border-radius: 3px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
color: #404040;
margin: 0 0 5px 5px;
padding: 5px;}

和

healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;}

检查新按钮时显示的CSS是：

.entry-title, .entry-title a {
color: #404040;
}
healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;
}
a {
font-weight: 700;
color: #00BB58;
}
healthylifeadvisors.com/media="all"
a {
color: #21759b;
text-decoration: none;}
healthylifeadvisors.com/media="all"
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

Answer 1

这应该这样做：

.entry-title a.genericon {
  background-color: #f2f2f2;
  border: 1px solid #eee;
  border-radius: 3px;
  -moz-border-radius: 3px;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  color: #404040;
  margin: 0 0 5px 5px;
  padding: 5px;
}
.entry-title a.genericon-facebook-alt:hover {
  background-color: #3b5998;
  border-color: #3b5998;
  color: white;
}

在WordPress页面标题

1 个答案: