Resources
Universal Header & Footer
JS & CSS Includes
The News21Skin js & css include files will inject a header and footer into a page. The width of each will be 940px
<link rel="stylesheet" href="http://assets.news21.com/2011/news21skin.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://assets.news21.com/2011/news21skin.js"></script>
Header
The most basic News21 header div code:
<div id="news21-header"></div>
Headers come in 3 different styles ...
- Black Background: (Default) includes logo & branding along with search box w/ outline image on black background color
- Transparent Background: includes logo & branding along with search box w/ outline image but with no background color
- Pure Background: includes logo & branding along with search box w/out outline image and no background color
Style code used and example below:
<div id="news21-header" class="header-black"></div>
<div id="news21-header" class="header-transparent"></div>
<div id="news21-header" class="header-pure"></div>
Incubator Specific Header
The search box uses google search engine ... but in order for the search to be specific to your domain ... you will need to give the header a proper class.
<div id="news21-header" class="arizonastate"></div>
<div id="news21-header" class="berkeley"></div>
<div id="news21-header" class="columbia"></div>
<div id="news21-header" class="maryland"></div>
<div id="news21-header" class="northcarolina"></div>
<div id="news21-header" class="southerncalifornia"></div>
<div id="news21-header" class="syracuse"></div>
<div id="news21-header" class="northwestern"></div>
Note: you can easily use multiple classes as seen in this example
<div id="news21-header" class="columbia header-pure"></div>
Footer
News21Skin Footers come in 2 styles ...
- Gray Text: (Default) text and images are a gray color
- White Text: text and images are white
<div id="news21-footer";</div>
<div id="news21-footer" class="footer-white"></div>
See demo of header and footer includes
http://assets.news21.com/2011/demo.html
Story Republish
An example of the beta implementation of the republish include can be found at
http://assets.news21.com/2011/republish.html
PLEASE NOTE YOU WILL NEED TO REQUEST AN API KEY TO USE
Implementation CSS & JS
<link rel="stylesheet" href="http://assets.news21.com/2011/news21skin.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://assets.news21.com/2011/jquery.news21ams.js"></script>
Implementation HTML & jQuery
<a href="#" rel="#news21republish_overlay" class="news21republishlink">republish</a>
<div id="news21republish_overlay"></div>
ON DOCUMENT READY
Note: 193 in the initialization refers to the story id within the ams
jQuery().news21ams({'api_key':'14e8378b7b806e820ec8f8a4ecc9a156282','ams_url':'http://ams.news21.com/api'});
jQuery('a.news21republishlink').click(function() {jQuery.news21ams.getStoryRepublish(193);});
News21 Logos
News21 standard logos are below ... for a hi-res pdf click
here
http://assets.news21.com/logos/news21-100x100.png
http://assets.news21.com/logos/news21-200x40.png
http://assets.news21.com/logos/news21-225x225.png