【问题标题】:Admob Native Ad CSS Google Info Button Background ColorAdmob 原生广告 CSS Google 信息按钮背景颜色
【发布时间】:2017-04-14 12:53:05
【问题描述】:

我们如何从 CSS 更改谷歌广告信息按钮的背景颜色。我们已经自定义了广告,但我们无法更改谷歌广告信息按钮的背景颜色。我已经看到一些改变了颜色的原生广告,即使我删除了添加代码的每一部分,它也没有去任何地方,所以我怎样才能改变它的背景颜色?我已经添加了css代码和图片

    /* Note: 1px = 1dp in this css */

/* == Colors == */
body {
  background-color: #ffffff;
}
.title-link {
  color: #000000;
}
.button {
  background-color: #9D0000;
}
.button-text,
.button-link {
  color: #FFFFFF;
}
.price,
.reviews {
  color: rgba(0,0,0,0.5);
}
.reviews svg {
  fill: rgba(0,0,0,0.7);
}
.url-link {
  color: rgba(0,0,0,0.3);
}
.body {
  color: rgba(0,0,0,0.7);
}

/* == Fonts == */
body {
  font-family: "Lobster";
  font-weight: normal;
  font-size: 10px;
}
@media (min-height: 300px) {
  body {
    font-size: 11px;
  }
}
@media (min-width: 360px) and (min-height: 300px) {
  body {
    font-size: 12px;
  }
}
@media (min-width: 700px) and (min-height: 300px) {
  body {
    font-size: 16px;
  }
}
.title {
  font-size: 1.1em;
  line-height: 1.2em;
}
.button {
  font-size: 1.1em;
}
.body,
.price,
.reviews,
.url {
  font-size: 1em;
  line-height: 1.1em;
}
@media (min-width: 360px) and (min-height: 300px) {
  .title {
    font-size: 1.2em;
    line-height: 1.25em;
  }
  .button {
    font-size: 1.2em;
  }
}
@media (min-width: 700px) and (min-height: 300px) {
  .title {
    font-size: 1.3em;
    line-height: 1.35em;
  }
  .button {
    font-size: 1.3em;
  }
}

/* == Layout == */
.title {
  margin-bottom: 5px;
  padding: 5px 0 0 8px;
}
.body {
  margin: 2px 8px;
}
.button {
  position: absolute;
  bottom: 8px;
  left: 8px;
}
/* == App install and video ad layouts == */
.app-icon {
  float: left;
  margin: 0 8px 4px 8px;
  padding: 0;
}
.image-gallery,
.video {
  margin: 0 auto 8px auto;
}
/* == Content ad layout == */
.image {
  margin: 0 auto 4px auto;
}

/* == Body == */
.body {
  /* add more customizations here */
}

/* == App icon == */
.app-icon img {
  height: 50px;
  width: 50px;
  border-radius: 20%;
}
@media (min-width: 360px) and (min-height: 300px) {
  .app-icon img {
    height: 70px;
    width: 70px;
  }
}

/* == Title == */
.title {
  display: block;
  text-align: left;
}

/* == Button == */
.button {
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
}
.button-link {
  display: block;
  position: relative;
  padding: 0 1em;
}
.button svg {
  display: none;
}
.button {
  width: 90%;
  width: calc(100% - 16px);
  height: 2.8em;
}
.button-text {
  display: block;
  line-height: 2.8em;
  text-align: center;
}
@media (min-width: 700px) and (min-height: 300px) {
  .button {
    height: 2em;
  }
  .button-text {
    line-height: 2em;
  }
}

/**
 * == Large image and video ==
 * App install:
 *   Use .image-gallery selector
 * Content:
 *   Use .image selector
 * Video:
 *   Use .video selector
 */
.image-link,
.image img {
  width: 100%;
  height: 100%;
}
.image-gallery a,
.image a {
  display: block;
  line-height: 0;
}
.image-gallery,
.video,
.image {
  width: 90%;
  width: calc(100% - 16px);
}
.image-gallery,
.video {
  height: 50%;
  height: calc(100% - 11em);
}
.image {
  height: 50%;
  height: calc(100% - 10em);
}
@media (min-width: 700px) and (min-height: 300px) {
  .image-gallery,
  .video {
    height: calc(100% - 8.5em);
  }
  .image {
    height: calc(100% - 8em);
  }
}

/* == Attribution == */
.attribution {
  background-color: #ffffff;
  border-radius: 2px;
  color: #aeaeae;
  display: table;
  font-size: 10px;
  line-height: 13px;
  margin: 4px 8px;
  padding: 0 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.rtl .attribution {
  background-color: #ffffff;
  left: auto;
  right: 0;
}

/* == Other == */
.ads a {
  text-decoration: none;
}
.ads, .ad {
  /**
   * DO NOT TOUCH OR REMOVE
   * Will break image rendering
   */
  height: 100%;
  width: 100%;
  padding: 0;
  word-wrap: break-word;
}
.ad {
  /* Padding for attribution */
  padding-top: 23px;
  height: calc(100% - 23px);
}

@DanielStorm 找到了如何更改它,但现在 Admob 不允许它

【问题讨论】:

  • 这是 AdMob.com 制作广告时的 CSS,对吗?
  • 是的,ad mob 原生广告

标签: css admob native-ads


【解决方案1】:

我对 CSS 不是很熟悉,但您可以检查元素并看到它的 id 是 abgbg,并且它的颜色默认设置为 #cdcccc。我在屏幕截图中将其更改为橙色(#FFA500)。我不确定如何在 CSS 中表达这一点,或者是否有可能,但这应该会为您指明正确的方向。


编辑:

玩了一会儿之后,您可以像这样更改背景颜色:

.abgbg {
    fill: #FFFFFF !important;
}

【讨论】:

  • 亲爱的 Daniel,您是对的,但 adMob 不允许我进行这样的更改。它说:您的本地广告单元有 1 个广告素材样式错误。在保存广告单元之前,您必须更正这些错误并重新验证广告单元。了解详情 对于多种广告类型,“.abgbg”不能使用
  • 添加 .abgbg { fill: #FFFFFF !important; 时无法验证样式}
  • @BaranBerk 啊,我现在明白了。我没有尝试保存广告单元。我不认为这是可能的。您能否在您的问题中添加一张广告示例图片?也许他们正在以不同的方式解决这个问题。
猜你喜欢
  • 2021-07-27
  • 2018-05-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-11
  • 1970-01-01
  • 2018-07-09
  • 2013-06-24
相关资源
最近更新 更多