For people customizing the appearance of their Show in a Box sites using CSS, here is an example of how to do change the look of vPIP's "Share" button and the Embed code it produces. For a complete list of the embed code classes you can style, see vPIP's styling documentation. And PLEASE NOTE, currently when you turn vPIP styling off and use your own, your custom styling does not travel with the Embed code when someone copy/pastes it into their own site. Instead they get an unstyled version. There may be an exception if a user copy/pastes from your site when using Firefox, but only with vPIP version 1.13f or higher - and if you have vPIP v1.13f or higher, be sure to check out example 2, as there have been changes to the embed code since example 1 was written.

Example 1

The example is drawn from Ryan Is Hungry, so hop over and look at how it works. If you compare it to the default appearance generated by vPIP, you'll see that the "Share" button has been moved up onto the same line as the video format links. Also the colors and font sizes of the default appearance have been modified. Or if you don't want to hunt down examples, then look at layouts 1 & 2 vs. layout 3 on this page: http://showinabox.pbwiki.com/Rearranging+the+post+order

Cheryl Colan came up with this; other CSS designers will no doubt come up with other solutions. Feel free to ask for clarification about it on the Show in a Box group: http://groups.google.com/group/show-in-a-box

In a nutshell, here's what you need to do:

1. Make sure you've got the latest and greatest version of the vPIP plugin activated and working on your WordPress site

    

2. Log into your admin panel and go to Options > vPIP Config

    

3. Make sure "Offer embed code?" is checked and "Styled?" is unchecked, like this:

   

    

   NOTE: if you want this to work for previous posts, you may have to edit the individual posts' vPIP settings and make sure "Styled?" is unchecked.

   Changing it in vPIP Config works for future posts, but does not edit past posts

    

4. Now you need to edit your site's style sheet (the CSS file for your theme). Below is the CSS used for RyanIsHungry. You can copy it but you will need to adapt it to match your own theme. It's pretty well commented so you can tell what to change. If you need more help, ask on the ShowInABox group or consider hiring one of the theme contributors to help you. One caveat to keep in mind - this work in all the browsers I tested it with, but it does not look good in IE6 or IE7. If/when I fix that, I'll update this code.

/* vPIP styling for whole hVlog DIV including "Share" Embed Code  --------------------------- */
/* Note: you must turn off embed code styling in vPIP Config and on individual posts for these styles to work */

.hVlog {
	font-size: 12px; /* adjusts text size for video format links */
	}

a.vpip-vs-mediatitle {
	color: #000000; /* if you want a color for the video format links that's different from regular links */
	}
	
.EmbedCodeShareBtn {
	display: inline !important; /* brings share button text up onto same line as video format links */
	padding-left: 30px; /* separates share button from video format links */
	background-image: url('../../images/share-icon-12x12.gif'); /* adds share icon - change file path as needed */
	background-repeat: no-repeat;
	background-position: 20px; /* positions share icon relative to text - adjust this value and padding-left to taste */
	}

	
.EmbedCodeShareBtn a, .EmbedCodeShareBtn a:visited {
	color: #000000; /* if you want a color for the share link that's different from regular links */
	}
	
.EmbedCodeArea {
	border: 1px solid #c6eefa; /* border width and color around embed code "box" */
	margin-top: 3px;
	padding: 0;
	background: #e1f3ff none repeat scroll 0%; /* background color for embed code "box" */
	font-size: 12px; /* text size for embed code box */
	display: block; /* keeps embed code in its own block right under the video links and share link */
	}
	
.EmbedCodeArea a, .EmbedCodeArea a:visited { 
	color: #000000; /* if you want a color for the embed area links that's different from regular links */
	}
	
table.EmbedCodeTable {
	width: 96%;
	margin-left: 2%;
	}

.EmbedCodeBy {
	margin: 0pt;
	font-size: 12px; /* text size for vPIP credit on embed code box /*
	text-align: left; /* text alignment for vPIP credit on embed code box */ 
	}
	

.EmbedCodeCloseBtn {
	margin: 0;
	font-size: 12px; /* text size for embed code close link */
	text-align: right; /* text alignment for close button on embed code box */
	}
	
.EmbedCodeTextarea {
	padding: 0;
	font-size: 12px; /* text size for the copy/paste embed code */
	margin-bottom: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 100%;
	margin-left: 0;
	}

Example 2

I don't know whether this changed in vPIP 1.13f or 1.13g, but the "Styled" checkbox has changed location and is no longer in the Embed Code area:

What's new in vPIP is that the video format links are now in an unordered list, so different CSS is required. Here is my new code as used at the home page for the ChocolateBox Show in a Box theme.

/* vPIP styling for whole hVlog DIV including "Share" Embed Code  --------------------------- */
/* Note: you must turn off embed code styling in vPIP Config and on individual posts for these styles to work */

.hVlog {
	font-size: 16px; /* adjusts text size for video format links */
	}

ul.vpip-formatslist {
	list-style-type: none; /* removes bullets from the list of video formats */
	display: inline !important; /* makes the list itself an inline element instead of a block element so the share button can be next to it */
	padding: 0;
	}
	
ul.vpip-formatslist li.vpip-formatslistitem {
	display: inline; /* puts list items on one line instead of each on its own line */
	line-height: 1.1em;
	}
	
ul.vpip-formatslist li.vpip-formatslistitem a {
	border-right: 1px solid #8b8084; /* puts a "pipe" to the right of each list item */
	padding: 0 10px; /* gives each list item a little whitespace on the left and right */
	}
	
.EmbedCodeShareBtn {
	display: inline !important; /* brings share button text up onto same line as video format links */
	padding-left: 25px; /* separates share button from video format links */
	background-image: url('images/share.gif'); /* adds share icon - change file path as needed */
	background-repeat: no-repeat;
	background-position: 5px; /* positions share icon relative to text - adjust this value and padding-left to taste */
	}

	
/*.EmbedCodeShareBtn a, .EmbedCodeShareBtn a:visited {
	color: #000000;  if you want a color for the share link that's different from regular links 
	}*/
	
.EmbedCodeArea {
	border: 1px solid #4f3b42; /* border width and color around embed code "box" */
	margin-top: 3px;
	padding: 0;
	background: #8b8084 none repeat scroll 0%; /* background color for embed code "box" */
	font-size: 12px; /* text size for embed code box */
	display: block; /* keeps embed code in its own block right under the video links and share link */
	}
	
.EmbedCodeArea a, .EmbedCodeArea a:visited, .EmbedCodeArea a:hover { 
	color: #201a1d;  /* if you want a color for the embed area links that's different from regular links */
	} 
	
table.EmbedCodeTable {
	width: 96%;
	margin-left: 2%;
	}

.EmbedCodeBy {
	margin: 0pt;
	font-size: 12px; /* text size for vPIP credit on embed code box /*
	text-align: left; /* text alignment for vPIP credit on embed code box */ 
	}
	

.EmbedCodeCloseBtn {
	margin: 0;
	font-size: 12px; /* text size for embed code close link */
	text-align: right; /* text alignment for close button on embed code box */
	}
	
.EmbedCodeTextarea {
	padding: 0;
	font-size: 12px; /* text size for the copy/paste embed code */
	margin-bottom: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 100%;
	margin-left: 0;
	}

You should also note that as of vPIP 1.13f Beta, vPIP supports passing the style of a vPIP class from its stylesheet into the embed code. So if your users browse with Firefox and copy/paste you embed code, it should pick up your custom styling for vPIP class entries. But it will only work if you've got each class defined on its own, they can't be grouped.

.EmbedCodeBy {
	STYLE RULES HERE
	}

not

.EmbedCodeArea a, .EmbedCodeArea a:visited, .EmbedCodeArea a:hover { 
	STYLE RULES HERE
	}

like I have in the example. And I have no idea if something like this will be passed via Firefox (if you test it, please report back):

ul.vpip-formatslist li.vpip-formatslistitem {STYLE RULES HERE}

Keep adding examples if you have good ones.

I'm not thrilled with the way the embed code table looks in Internet Explorer 7 and will keep working on it. But it is passable. And it looks nice in well-behaved browsers.