Search code examples
htmlcsswidgetpinterestpinning

Use Html and CSS to change background of Pinterest widget

I have tried for hours in vain to use a widget of pinterest to have different background and text colour in description. My page is

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

I know it changes its class on load.

Does anyone know what code and where to put in CSS? Also, what html to use. Alternatively, can i fix the height of the widget so only the picture remains?

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

I've even tried using a pin button, fixing the parameters, but I am very unsure how to include # in the description of the pin.... as in

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

If you know how to allow # in the description, that would be great too.

Thank you for your kind help

Solution

  • For the whole widget:

    1. Remove the classes PIN_1404822151302_embed_pin PIN_1404822151302_fancy from the span and add your own class.
    2. Copy and paste the relevant CSS that you want to keep.

    CSS for span (remove any !important)

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

    OR

    For the actual button:

    1. Remove the class PIN_1404822151302_repin and add your own class
    2. Copy and paste the relevant CSS that you want to keep.

    CSS for current button

    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 for new button (remove !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>