2017-04-14 24 views
1

CSSからGoogleの広告情報ボタンの背景色を変更する方法。広告をカスタマイズしましたが、Googleの広告情報ボタンの背景色を変更することはできません。私は色を変更したネイティブ広告を見たことがあります。削除しても、どこにもないコードのすべての部分を追加すると、どうすればその背景色を変更できますか?私は、CSSコードとadmobCssAdmobネイティブ広告CSS Googleの情報ボタンの背景色

/* 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 does not allow

+0

。 com広告を作成するときは、正しい? –

+0

はい、広告隊のネイティブ広告 – BaranBerk

答えて

0

私はCSSで本当に慣れていないよ許可していませんが、あなたが要素を検査することができますidがabgbgで、その色がデフォルトで#cdccccに設定されていることを確認してください。スクリーンショットでオレンジ色に変更しました(#FFA500)。私はCSSでこれをどのように表現するのか、それが可能なのかどうかはわかりませんが、正しい方向に向けるべきです。

enter image description here


編集:

miniuteのためにそれで遊んでた後、あなたはそうのような背景色を変更することができます。これは、AdMobのからCSSです

.abgbg { 
    fill: #FFFFFF !important; 
} 
+0

あなたはそうですが、adMobは私にそのような変更を許可していません。あなたのローカル広告ユニットにクリエイティブスタイルのエラーが1つあります。広告ユニットを保存する前に、これらのエラーを修正して広告ユニットを再確認する必要があります。詳しくは 複数の広告タイプの場合\t 「.abgbg」は使用できません – BaranBerk

+0

追加時にスタイルを確認できません。 .abgbg { 記入:#FFFFFF!重要; } – BaranBerk

+0

@BaranBerkあ、今見ています。私は広告ユニットを保存しようとしなかった。私はこれが可能だとは思わない。あなたの質問にこれを実装した広告の例の写真を追加できますか?多分、彼らはこれを別のやり方でやっています。 –

関連する問題