Minimal Pinterest Widget with CSS

Question

A while ago I had managed with very limited CSS knowledge to remove the user name; widget boarder; picture boarder; and 'follow on Pinterest' button. This was achieved by tagging the widget (in HTML) with:

div id="pinterest-container"

and then using the following CSS commands to hide everything but the pictures:

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

#pinterest-container span a:nth-child(3){
display: none !important;
}

.post-body center div#pinterest-container span span a{
display: block !important;
}

.post-body center div#pinterest-container span span span a{
display: block !important;
}

However a short time ago this stopped working and the picture boarders, user name and ffollow button all returned: http://www.andrewmacpherson.me/p/precedence.html

I would be very greateful if someone could help me hide these again, I've been searching and testing but with no luck!

Many thanks

Andrew

Answer 1

I remember hiding things like this back in the Myspace days. Overriding certain elements was often a complicated and brittle process. Fortunately, we've now got CSS attribute selectors, providing a more elegant way to handle situations such as yours. The $= part of the following selectors are targeting class attribute values ending with those certain suffixes (_img, _col, etc.). Hopefully, these overrides will last a little longer than the last batch.

Remove picture and widget borders:

#pinterest-container [class$=_img] {
  display: block !important;
  box-shadow: none !important;
  border-radius: 0 !important;  
}

#pinterest-container [class$=_col] {
  padding: 0;
}

Kill the follow buttons:

#pinterest-container [class$=_button] {
  display: none !important;
}

To remove the scrollbars, you'll have to do something a bit more general. Note: this will show all of the content in each group of images, so no truncation occurs.

#pinterest-container span span {
  overflow: hidden !important;
  height: 100% !important;
}