Vandaag heb ik op een website de profielwidget van Pinterest toegevoegd. Heel vervelend alleen is de drop-shadow CSS die Pinterest heeft toegepast op de widgets, in onderstaande afbeelding is meteen duidelijk wat ik bedoel.

Pinterest widget "box-shadow" probleem

Het kan natuurlijk ook zijn dat je een andere kleur achtergrond wenst dan wit én geen ronde hoeken wenst. Hoe gaan we dit nou oplossen?

Het buitenste span element van de widget laat onderstaande CSS bij bijbehorende class zien.

span.PIN_1394313494148_embed_grid.PIN_1394313494148_fancy {
background: #fff!important;
box-shadow: 0 0 3px #aaa!important;
border-radius: 3px!important;
}

Wil je dit overschrijven middels eigen CSS om één of alle van de CSS regels aan te passen, dan dien je zelf een extra div element toe te voegen om de geplakte code van de Pinterest widget.

<div id="pinterest-container"><a data-pin-do="embedUser" href="http://nl.pinterest.com/klepbank/" data-pin-scale-height="248" data-pin-board-width="300">Visit KlepbankOnline.nl's profile on Pinterest.</a></div>

Vervolgens kun je in je CSS regels opnemen voor het div element met de class pinterest-container.

#pinterest-container > span { 
     box-shadow: none !important; 
}

Dit met dank aan Google en het artikel Anyone know how to remove border from Pinterest widget?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *