html - 使用 Html 和 CSS 更改 Pinterest 小部件的背景

Question

我已经尝试了几个小时，但徒劳无功地使用 pinterest 的小部件在描述中使用不同的背景和文本颜色。我的页面是

http://www.nicholasboydcrutchley.com/short-stories/woman-and-wolf

我知道它会在加载时改变它的类。

有谁知道在 CSS 中放置什么代码和放在哪里？另外，使用什么html。或者，我可以固定小部件的高度以便只保留图片吗？

<a data-pin-do="embedPin" href="http://www.pinterest.com/pin/386535580491200669/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

我什至尝试过使用图钉按钮来修复参数，但我非常不确定如何在图钉的描述中包含#....如

<a href="//pinterest.com/pin/create/button/?media=http://www.nicholasboydcrutchley.com/uploads/1/5/9/8/15988944/8246087_orig.jpg&amp;description=Woman and Wolf by @Nicholas Boyd Crutchley ∞ #Read #shortstory www.nicholasboydcrutchley.com/ww ∞ #Art @leafbreeze7&amp;url=http:www.nicholasboydcrutchley.com/short-stories/woman-and-wolf"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"></a>

如果您知道如何在描述中使用#，那也很棒。

谢谢你的帮助

Answer 1

对于整个小部件:

1. 从 span 中删除类 PIN_1404822151302_embed_pin PIN_1404822151302_fancy 并添加您自己的类。
2. 复制并粘贴您要保留的相关 CSS。

跨度的 CSS(删除任何 !important)

.myPinWidget { 
    /*styles I want to keep from old class CSS */
    /*custom styles*/
}

或

对于实际按钮:

1. 删除类 PIN_1404822151302_repin 并添加您自己的类
2. 复制并粘贴您要保留的相关 CSS。

当前按钮的CSS

span.PIN_1404822151302_embed_pin a.PIN_1404822151302_embed_pin_link i.PIN_1404822151302_repin {
left: 12px!important;
top: 12px!important;
position: absolute!important;
height: 20px!important;
width: 40px!important;
background-size: 40px 60px!important;
background: transparent url(http://passets.pinterest.com/images/pidgets/pinit_bg_en_rect_red_20_1.png);
}

新按钮的 CSS(删除 !important)

.myPinButton { 
    /*styles I want to keep from old class CSS */
    /*custom styles*/
}

HTML

<i class="myPinButton" data-pin-id="386535580491200669" data-pin-log="embed_pin_repin" data-pin-href="//www.pinterest.com/pin/386535580491200669/repin/x/"></i>