Pinterest board widget CSS styling

Question

I've been stuck on this for the last hour and a half and can't solve it. So, I know pinterest widgets reset their class on page load, I have managed to get the widget looking as good as I can be bothered with, now just one element needs to go.

In the following link, at the bottom, you can see the widget - and the 'see on' box thing. This is what needs to go.

http://innov8web.co.uk/new3/

I have tried everything I can think of. Code snippets attached. Any help will be appreciated.

a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget span a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget span span a.PIN_1394396792408_embed_grid_ft{display:none!important;}


a.PIN_1394395968955_embed_grid.PIN_1394395968955_fancy{display:none!important;}
.PIN_1394395968955_embed_grid.PIN_1394395968955_fancy{display:none!important;}

And the javascript I have tried

<script>
function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('span a.PIN_1394396792408_embed_grid_ft{display:none !important;}')
</script>

So, thanks in advance.

Answer 1

Try something like this:

function removeSeeOn(){
     var el = document.getElementById("pinterest-widget").getElementsByTagName("a");
     el[el.length-1].style.display = "none !important";
}

This is assuming there is only one element with that class name (which it seems like there is). Add this function to your script then add removeSeeOn(); to your body's onload attribute.

If that doesn't work you could try adding this to your css:

#pinterest-widget>span>a {
     display:none !important;
}

This is another way to do the same thing:

#pinterest-widget span a:only-of-type {
     display:none !important;
}

Answer 2

I have successfully styled Pinterest embedded widgets using pure CSS.

The following code removes the title, border, background, and link, leaving you with nothing but the images. It assumes you have your widget contained in a div with the class "pinterest". Tweak to get the result you want:

div.pinterest > span > a {
  display: none !important;
}
div.pinterest > span span:first-child {
  display: none !important;
}
div.pinterest > span {
  box-shadow: 0 0 0 transparent !important;
  background: transparent none !important;
  padding: 0 !important;
  margin: 0 !important;
}