3

We have a phone number at the top of our website, for customers to call us of course. I have the Skype plugin, which is handy and I've noticed other users have it too. But it throws off the design completely. I noticed the html of the webpage is altered with css styles. Is there a standard way to alter the appearance of the Skype phone numbers?

UPDATE: The phone number is altered with this span tag added around it:

<span class="skype_pnh_print_container_1359399953">

Then there's a ton of span tags after this which is the Skype menu when you hover your mouse over the phone number (hidden initially). I could override styles with this class, but I want to make sure I do this the proper way so that it works with different (newer) versions of Skype and all browsers (Skype might work differently in other systems?). Isn't there some official way of dealing with this?

at.
  • 50,922
  • 104
  • 292
  • 461
  • 1
    Is the Skype using `!important`? If not you might be able to overwrite it with an `!important` of your own. – thatidiotguy Feb 06 '13 at 21:06
  • I would recommend setting a top-level class if possible. And override using that vs using `!important`. – khollenbeck Feb 06 '13 at 21:07
  • If you use an inspection tool on the resulting page, can you see which style the phone number now has? – Mr Lister Feb 06 '13 at 21:07
  • I found [information](http://stackoverflow.com/questions/3032427/how-to-prevent-phone-numbers-to-be-converted-into-skype-links) about completely removing the styling and also [preventing](http://bacsoftwareconsulting.com/blog/index.php/web-development/prevent-skype-from-highlighting-phone-numbers/) the styling which might be useful – SShaheen Feb 06 '13 at 21:09
  • By the way, I'm not sure you should change the number's style. People who have the Skype plugin installed, are used to phone numbers looking like that, and if you change it from (what is to them) the default, they might not recognise it as such. – Mr Lister Feb 06 '13 at 21:10
  • @MrLister - you may have a point, but I need to change something, it looks very bad the way it is now. I can change some of the surrounding styling if I know the Skype plugin is installed.. – at. Feb 06 '13 at 21:11
  • Can you write us the tag .. to figure out if you added href="tel: or href="phone: or href="what ?? – Milche Patern Feb 06 '13 at 21:17
  • Same as --> http://stackoverflow.com/questions/3032427/how-to-prevent-phone-numbers-to-be-converted-into-skype-links – Milche Patern Feb 06 '13 at 21:19
  • @MilchePatern No, it's not. That is preventing. This is modifying. – SShaheen Feb 06 '13 at 21:37

2 Answers2

0
body span.skype_pnh_container { 
    /* "body" is not really necessary */
    /* here, but it increases CSS */
    /* specificity – just in case ... */

    display: none !important; 
    visibility: hidden !important; 
}

body span[class^="skype_pnh_container"] { 
    /* override the 'skype' styling */
    color: red!important;
    background-color: green!important;
}

body span[class^="skype_pnh_print_container"] {
    display: inline !important;
}

copy pasted from the net

Also, according to http://forum.skype.com/index.php?showtopic=78380 you can prevent it with the following META tag:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Carry on

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
0

Here's how I styled the Skype links:

a[href^="skype:"] {
  color: white;
}

Personally, I don't see any additional markup like extra Skype span tags, so the above CSS code should work for any Skype call links.

Chris Charlton
  • 46
  • 4
  • I've been using the CSS selector above for a long time. I'm sure this solution is the cleanest, regardless of browser/platform or need for META tag injections. – Chris Charlton May 11 '14 at 20:41