Embed code is styled separately from your video format links. If you revert to Styled for your embed code, your video format links should still have their new color.
But the "Share" button styling is part of Embed Code styling. So if you revert to Styled for your embed code, vPIP's inline styles will override the custom styling I made for you. Your Share button will go back to the way it was - a gray share button centered on its own line underneath the video format links. But the Share button will keep the left-side padding I added to make room for the Share icon. So if you revert we will need to comment out the CSS line that adds the padding. Then it will just look the way it did before we changed it.
In vPIP Config, when "Styled?" is checked for embed code, inline CSS is added to vPIP's embed code, and that INCLUDES the copy/paste part of the embed code, so that when someone grabs that they get a styled version, and if someone else grabs it from them, they get a styled version, too. Inline CSS overrides whatever is in an external style sheet. (Sometimes there are exceptions to this, but they're not supported the same way across different web browsers.)
In vPIP Config, when "Styled?" is UNchecked, inline CSS is NOT added to vPIP's embed code. That allows the styles I added to your external style sheet (ryanishungry.css) to control the appearance of your Share button. BUT, it also means that inline styles ALSO are NOT included in the copy/paste part of the embed code. So when someone grabs your embed code, they get an UNstyled version that looks bad.
So the choice is:
Have it look good on your site and bad when embedded
or
Go back to the gray button version, and wait for a version of vPIP that will NOT style the embed code but WILL style the copy/paste part so that it looks good when embedded elsewhere.
Does that make sense? It's hard to make this make sense. WHY did I sign up to teach a web design class again? LOL!
Cheryl
PS to show what I mean,
Here is the copy/paste component of your embed code with Styled turned on:
<div class="EmbedCodeShareBtn" id="divEmbedCodeShare1199383818436" style="border: 1px solid rgb(153, 153, 153); background: rgb(221, 221, 221) none repeat scroll 0%; margin-top: 3px; margin-left: 50%; margin-right: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 40px;"> <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383818436', true); vPIP_setEmbed(this, 'vPIP_embedCode1199383818436'); vPIP_setVisible('divEmbedCodeShare1199383818436', false); return false;">Share</a><br></div><div class="EmbedCodeArea" id="divEmbedCode1199383818436" style="border: 2px solid rgb(153, 153, 153); padding: 0pt; background: rgb(221, 221, 221) none repeat scroll 0%; margin-top: 3px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 12px; visibility: visible; display: block;"><table class="EmbedCodeTable" style="width: 96%; margin-left: 2%;" border="0"> <tbody><tr> <td width="15%"><div class="EmbedCodeBy" style="margin: 0pt; font-size: 8px; text-align: left;"> by: <a href="
http://vpip.org/" target="_blank">vPIP</a></div></td> <td>Embed (copy & paste):</td> <td width="20%"><div class="EmbedCodeCloseBtn" style="margin: 0pt; font-size: 11px;"> <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383818436', false); vPIP_setVisible('divEmbedCodeShare1199383818436', true); return false;">close</a><br></div></td> </tr> <tr> <td colspan="3"><textarea class="EmbedCodeTextarea" rows="5" name="vPIP_embedCode1199383818436" id="vPIP_embedCode1199383818436" style="padding: 0pt; font-size: 9px; margin-bottom: 5px; overflow-x: hidden; overflow-y: scroll; width: 100%; margin-left: 0pt;" onfocus="if(
window.vPIP_copyToClipBrd){window.vPIP_copyToClipBrd(this)};" readonly="readonly" cols=""></textarea></td> </tr></tbody></table></div>
See all the style= stuff? background color, border, margin, padding ...
Here's the same copy/paste component of your embed code with Styled OFF:<div class="EmbedCodeShareBtn" id="divEmbedCodeShare1199383747967"> <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383747967', true); vPIP_setEmbed(this, 'vPIP_embedCode1199383747967'); vPIP_setVisible('divEmbedCodeShare1199383747967', false); return false;">Share</a><br></div><div style="visibility: visible; display: block;" class="EmbedCodeArea" id="divEmbedCode1199383747967"><table class="EmbedCodeTable" border="0"> <tbody><tr> <td width="15%"><div class="EmbedCodeBy"> by: <a href="
http://vpip.org/" target="_blank">vPIP</a></div></td> <td>Embed (copy & paste):</td> <td width="20%"><div class="EmbedCodeCloseBtn"> <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383747967', false); vPIP_setVisible('divEmbedCodeShare1199383747967', true); return false;">close</a><br></div></td> </tr> <tr> <td colspan="3"><textarea class="EmbedCodeTextarea" rows="5" name="vPIP_embedCode1199383747967" id="vPIP_embedCode1199383747967" onfocus="if(
window.vPIP_copyToClipBrd){window.vPIP_copyToClipBrd(this)};" readonly="readonly" cols=""></textarea></td> </tr></tbody></table></div>
the only style= stuff here is to make sure the embed code is visible when you click the Share button.