Editing "send page to a friend" page

I was having the same problem. The way we worked around it was by targeting it in the CSS:

table.sendToFriend {
   /* Styles here... */
}

There is another way that I used for the search page:

<t:if test=" page.filename == 'send-to-friend.jsp' ">
  <div>
</t:if>

<div class="templateComponent" id="body"></div>

<t:if test=" page.filename == 'send-to-friend.jsp' ">
  </div>
</t:if>

Roland King:

Thanks for your response! However, I want to do more with the page than just alter styles. I have content that needs to be placed on the "Send a page to a friend" page and my understanding is that css only manipulates the styles; it cannot be used to alter or add content.

After speaking with Convio support, I've found that there is no way to even force the component "send a page to a friend" to use a default wrapper that differs from the one inheritted from the page the link is in (this would fix my problem). I am told that my only option is to hire the IST department to customize the component and/or wrapper, which means it will cost me money. :-(

Roland, for that very reason, we dropped the built in "send to a friend" functionality completely and created our own. The complete set of four options is located on our news release pages, one of which is here: http://www.civilwar.org/aboutus/news/news-releases/2009-news/congress-allocates-9-million.html

If you wanted to add email, you could do that with relatively little effort.

Or, if you want something easy and fast, there are several services out there that will do this for you like ShareThis and AddThis. We found that people go straight for the social networking icons, though - a foreign icon or button like AddThis doesn't seem to attract the attention of people who aren't web savvy (like *ahem* our main demographic).

Social networking icons here: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/

The links themselves log hits on phantom pages for Google Analytics tracking. For example, if someone clickede the Twitter button on the above linked news release, it would show up as an additional hit on http://www.civilwar.org/outgoing/social/twitter/aboutus/news/news-releases/2009-news/congress-allocates-9-million.html. That lets us track clicks.

Code:

<style type="text/css">
.item_options{
     background: transparent url(http://www.civilwar.org/assets/images/design_elements/seperators/tile_double_bar_vert.gif) top left repeat-y;
     display: inline;
     float: right;
     margin-top: 0px;
     padding-left: 16px;
     position: absolute;
     right: 15px;
     top: inherit;
}

.item_options li {
     float: left;     
     padding-right: 12px;
     margin-right: 12px;
     border-right: 1px solid #e4e4dd;
}

.item_options li a {
     display: block;
     font-size: 9px;
     line-height: 12px;
}

.item_options li.last {
     margin: 0px;
     padding: 0px;
     border: none;
}


.item_options li a.print {
     background:url(http://www.civilwar.org/assets/images/links/print.gif) top left repeat;
     width: 41px;
     height: 40px;
     display: block;
     text-indent: -9999px;
}

.item_options li a.print:hover {
     background-position: left -41px;
}

.item_options li a.facebook {
     background: url(http://www.civilwar.org/assets/social-networking/facebook_32.png) no-repeat center top;
     padding-top: 30px;
}

.item_options li a.twitter {
     background: url(http://www.civilwar.org/assets/social-networking/twitter_32.png) no-repeat center top;
     padding-top: 30px;
}
</style>

<t:set id="facebook-outgoing-url" value="concat('/outgoing/social/facebook',path)" />
<t:set id="twitter-outgoing-url" value="concat('/outgoing/social/twitter',path)" />
<ul class="item_options">
     <li><a href="#rss_feed_link" class="rss"></a></li>
     <li><a href="http://www.facebook.com/share.php?u=${url}" onclick="pageTracker._trackPageview('${facebook-outgoing-url}');" class="facebook">Facebook</a></li>
     <li><a href="http://twitter.com/home/?status=I'm currently reading ${url} on @cwpt's site. Check it out!" onclick="pageTracker._trackPageview('${twitter-outgoing-url}');" class="twitter">Twitter</a></li>
     <li class="last"><a href="#" onclick="doPrinterFriendly(); return false;" class="print">Print</a></li>
</ul>

Roland King:

Thanks for your response! However, I want to do more with the page than just alter styles. I have content that needs to be placed on the "Send a page to a friend" page and my understanding is that css only manipulates the styles; it cannot be used to alter or add content.

After speaking with Convio support, I've found that there is no way to even force the component "send a page to a friend" to use a default wrapper that differs from the one inheritted from the page the link is in (this would fix my problem). I am told that my only option is to hire the IST department to customize the component and/or wrapper, which means it will cost me money. :-(

You can do what you want with the second example I gave about the search page. I just realized that the example wasn't showing, but now that is fixed.