How to edit Skype contact me button CSS?

Question

I need help with Skype contact me button.

Standard skype button using margin: 24px; vertical-align: -30px; so I'm trying to remove margin and vertical align, but nothing working.

Adding code snippet:

Skype.ui({
  "name": "chat",
  "element": "SkypeButton_Call_Sandrita.logistics_1",
  "participants": ["Sandrita.logistics"],
  "imageSize": 24
});

#SkypeButton_Call_Sandrita.logistics_1_paraElement {
  margin: 0;
}
#SkypeButton_Call_Sandrita.logistics_1_paraElement img {
  margin: 0 !important;
  vertical-align: middle !important;
}

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

<header>
  <div class="container">
    <div id="SkypeButton_Call_Sandrita.logistics_1"></div>
  </div>
</header>

Thank you for any help!

Answer 1

You need to escape the dots in the id you are using (note that . is used for referring classes) - see demo below:

Skype.ui({
  "name": "chat",
  "element": "SkypeButton_Call_Sandrita.logistics_1",
  "participants": ["Sandrita.logistics"],
  "imageSize": 24
});

#SkypeButton_Call_Sandrita\.logistics_1_paraElement {
  margin: 0;
}
#SkypeButton_Call_Sandrita\.logistics_1_paraElement img {
  margin: 0 !important;
  vertical-align: middle !important;
}

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

<header>
  <div class="container">
    <div id="SkypeButton_Call_Sandrita.logistics_1"></div>
  </div>
</header>

Answer 2

The selector isn't working because it contains a dot "."

Skype.ui({
           "name": "chat",
           "element": "SkypeButton_Call_Sandrita",
           "participants": ["Sandrita.logistics"],
           "imageSize": 24
         });

#SkypeButton_Call_Sandrita div {
  margin:0;
}
#SkypeButton_Call_Sandrita img {
  margin:0 !important;
  vertical-align:middle !important;
}

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

<header>
  <div class="container">
    <div id="SkypeButton_Call_Sandrita"> </div>
  </div>
</header>

Answer 3

Remove dot from your id #SkypeButton_Call_Sandrita_logistics_1

Skype.ui({
  "name": "chat",
  "element": "SkypeButton_Call_Sandrita_logistics_1",
  "participants": ["Sandrita.logistics"],
  "imageSize": 24
});

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

<style>
  #SkypeButton_Call_Sandrita_logistics_1_paraElement {
    margin: 0;
  }
  #SkypeButton_Call_Sandrita_logistics_1_paraElement img {
    margin: 0px !important;
    vertical-align: middle !important;
  }
</style>

<header>
  <div class="container">
    <div id="SkypeButton_Call_Sandrita_logistics_1"></div>
  </div>
</header>