How to hide the skype toolbar telephone number styling from your users' browsers

Skype hide this option during install along with several other small matters like making it run on startup...

On their forum posts, the best suggestion they offer is using a meta tag to hide their styling. This is a rubbish solution in a lot of situations, their only other suggestion is sending them your website to be blacklisted for the feature.

What you're looking for is two lines of css:

.skype_pnh_container {display:none;}
.skype_pnh_print_container {display:inline;}

This reverses what their code does, which they inject into the head if you're wondering.

As a responsible internet user who checks what is hidden behind mysterious 'options' buttons, I was unaware of this feature until I placed some phone numbers in a 20px tall footer and asked a friend what he thought...

He told me the design was broken and the numbers were off the bottom of the page, I thought that can't be right, I tested! even had it working in ie6. I was surprised and got defensive, then he told me it was a skype link.

I fired up a sandboxed windows in virtualbox to run firefox and firebug. I installed skype

There in in the head of every page was a bit of viral css code.

@media screen {span.skype_pnh_print_container{ display:none !important;}span.skype_pnh_container, span.skype_pnh_container *{ background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0px 0px !important; background-repeat: no-repeat !important; border: 0px none !important; border-style: none !important; color: #49535A !important; cursor: pointer !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Tahoma, Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-style: normal !important; font-weight: bold !important; height: 14px !important; letter-spacing: 0 !important; line-height: 14px !important; margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important; position:static !important; text-decoration: none !important; text-indent:0px !important; text-transform: none !important; vertical-align: baseline !important; white-space:nowrap !important; word-spacing: normal !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_common *{ background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_common *{ background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_fax *{ background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_fax *{ background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_fax span.skype_pnh_right_span,span.skype_pnh_container span.skype_pnh_highlighting_inactive_fax span.skype_pnh_right_span{ background-position: -71px 0px !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_free *{ background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_free span.skype_pnh_dropart_flag_span{ background-position: 0px 1px !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_free span.skype_pnh_textarea_span{ background-position: -71px 0px !important;}span.skype_pnh_container span.skype_pnh_highlighting_inactive_free span.skype_pnh_text_span{ background-image: none !important; color: transparent !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_free *{ background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_free span.skype_pnh_dropart_flag_span{ background-position: 0px 1px !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_free span.skype_pnh_textarea_span{ background-position: -135px 0px !important;}span.skype_pnh_container span.skype_pnh_highlighting_active_free span.skype_pnh_text_span{ background-position: -135px 0px !important; color: #FFFFFF !important;}span.skype_pnh_container span.skype_pnh_left_span{ background-position: 0px 0px !important; width: 6px !important;}span.skype_pnh_container span.skype_pnh_dropart_span{ background-position: -11px 0px !important; width: 27px !important;}span.skype_pnh_container span.skype_pnh_dropart_wo_arrow_span{ background-position: -11px 0px !important; width: 18px !important;}span.skype_pnh_container span.skype_pnh_dropart_flag_span{ background-image: url('chrome://skype_ff_extension/skin/flags.gif') !important; background-position: 1px 1px !important; width: 18px !important;}span.skype_pnh_container span.skype_pnh_textarea_span{ background-position: -90px 0px !important;}span.skype_pnh_container span.skype_pnh_text_span{ background-position: -90px 0px !important;}span.skype_pnh_container span.skype_pnh_right_span{ background-position: -52px 0px !important; width: 15px !important;}} @media print { span.skype_pnh_print_container{}span.skype_pnh_container{ display:none !important;} } span.skype_pnh_mark{ display:none !important;}

So far, so annoying, it's wrapped the phone number in a span and set display:none for that in the above css.

Below that, it shows the skype add-in interface, or it would have, if it wasn't a footer. Here's an example of what it inserts into pages.

<div class="contactPhone">Main Office: <span class="skype_pnh_print_container">01234 567890</span>

<span class="skype_pnh_container" dir="ltr"><span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;<span class="skype_pnh_highlighting_inactive_common" title="Call this phone number in United Kingdom with Skype: +441234567890" dir="ltr"><span class="skype_pnh_left_span" skypeaction="skype_dropdown">&nbsp;&nbsp;</span><span class="skype_pnh_dropart_span" title="Skype actions" skypeaction="skype_dropdown"><span class="skype_pnh_dropart_flag_span" style="background-position: -1539px 1px ! important;" skypeaction="skype_dropdown">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="skype_pnh_textarea_span"><span class="skype_pnh_text_span">&nbsp;&nbsp01234 567890
</span></span><span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>&nbsp;<span class="skype_pnh_mark">end_of_the_skype_highlighting</span></span></div>