0

我已经尝试了几个小时徒劳地使用 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>

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

<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>

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

谢谢你的热心帮助

4

1 回答 1

0

对于整个小部件：

  1. PIN_1404822151302_embed_pin PIN_1404822151302_fancy从中删除类span并添加您自己的类。
  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>
于 2014-07-08T12:25:09.450 回答