1

I have a LinkedIn button on my website on top of a dark background, but the corners of the rounded LinkedIn button are white making it square looking. Is there anyway to make it transparent?

<li class="item-3">
<script src="//platform.linkedin.com/in.js"
type="text/javascript">
lang: en_US
</script>

I have tried background-color: transparent; in CSS but nothing happens. Adding background-color: white; makes a big white box around the whole LinkedIn button, so I assume transparent does work, but just not where I want it to.

enter image description here

mrmike
  • 398
  • 2
  • 4
  • 14
  • Try setting `background: rgba(255, 255, 255, 0.5)` or whatever – Andrew Dunai Feb 06 '15 at 10:54
  • That just changes the background of the box that the LinkedIn button is in, its like the LinkedIn button is separate from the box that it is in. Probably something to do with the JS. – mrmike Feb 06 '15 at 11:09
  • 1
    Do you have a screenshot? – erier Feb 06 '15 at 14:46
  • If you suspect the CSS is being set via JS, then you may well have to use JS to set it yourself. The alternative is judicious use of the CSS !important rule. – Owlvark Feb 08 '15 at 18:51

2 Answers2

3

Support from linkedin is laughable... I've contacted them re this issue. They refuse to acknowledge it. And have instead pointed me here: LinkedIn Homepage Redesign

This does not resolve the issue (obviously).

The style cannot be overwritten using css. I am going to remove the follow button, as this is the only available option. Great job LinkedIn...

Bmad
  • 46
  • 2
1

This is an issue that can be reproduced on LinkedIn's own Plugin Generator Page by changing the background color of the #widget element.

The culprit is this code on LinkedIn's server:

.framed #body .wrapper {
  position: relative;
  background: #fff;
}

Since this code is on another domain you cannot override it with your own CSS or JavaScript. (See here for example.)

Update 2015-06-19: LinkedIn has fixed the issue.

Community
  • 1
  • 1
Steven
  • 188
  • 9