CODEWITHSUNDEEP
jquerycsswidgetpinterest
Sam
Sam

Reputation: 2545

Restyle Pinterest Widget?

Is it possible to restyle this standard Pinterest widget? Take a look here. Let's say I simply want to change the background color:

http://business.pinterest.com/widget-builder/#do_embed_user (hit "Preview" to actually see it)

Nothing I do has any effect... amending my stylesheet, or even if I use jQuery and target it with something like .css('background-color','black').

Upvotes: 2

Views: 1665

Answers (1)

Sam
Sam

Reputation: 2545

So here's what's going on with the Pinterest widget: every time the page loads, the Pinterest widget script assigns itself a new CSS class name. So targeting it with CSS is tricky because you can't point to it directly. I was able to get to it by following a specific CSS path, like this:

div#pinterest_wrapper > span > span:first-child { background-color: black; }

where div#pinterest_wrapper is a <div> that I wrapped the their code in... just so I could find it easier. Once I got the path correct, it was a snap to style as needed.

(It's got a nested <span> heirarchy. And as shown above, it's that first internal <span> that you'll probably need to apply most styles to.)

Upvotes: 2

Related Questions