/ Kaango Classified Marketplace / The Register-Guard
The Register-Guard recently launched a Kaango-powered Classified Marketplace.
I was in charge of the branding & template development.
One of the more interesting parts of this project was the coding of the header… It was a requirement to make all the CSS styles inline:
The actual “self-contained” HTML output.
<div style="width:990px;"> <div style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/bg-01.png) repeat-x left bottom;margin:5px 0;height:95px;"> <h5 style="width:484px;height:58px;margin:30px 10px 0;padding:0;overflow:hidden;text-indent:-999em;background:url(http://rg-assets.s3.amazonaws.com/vendor/kaango/images/logo-01.png) no-repeat;float:left;display:inline;"><a style="display:block;width:100%;height:100%;" href="/">The Register-Guard: Classified Marketplace</a></h5> <h6 style="width:260px;height:45px;margin:30px 10px 0;padding:0;overflow:hidden;text-indent:-999em;background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/flag-01.png) no-repeat;float:right;display:inline;"><a style="display:block;width:100%;height:100%;" href="http://www.registerguard.com">The Register-Guard</a></h6> <div style="font-size:0;line-height:0;border:0;margin:0;padding:0;height:0.1px;clear:both;"></div> </div> <div id="ieNav" style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/bg-02.png) repeat-x left center;margin:5px 0 0;"> <ul style="list-style:none;margin:0;padding:0;float:left;display:inline;"> <li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-01.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-01-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="http://special.registerguard.com/jobs/" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Jobs</a></li> <li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-02.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-02-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="/feListAds/categoryID/902" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Wheels</a></li> <li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-03.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-03-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="http://forums.registerguard.com/homefinder/" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Real Estate</a></li> <li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-04.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-04-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="/feListAds/categoryID/717" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Stuff</a></li> <li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-05.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-05-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="/feListAds/categoryID/25" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Garage Sales</a></li> <!--<li style="background:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-06.png) no-repeat 10px center;margin:0;padding:0;float:left;display:inline;"><a style="font: bold 18px/1 Arial, Helvetica, sans-serif;color:#8ac0e9;text-decoration:none;letter-spacing:.03em;background-image:url(http://rg-assets.s3.amazonaws.com/v4.0/universal/1.0/images/template/icon-06-hover.png);background-repeat:no-repeat;background-position:-9999px center;padding:10px 10px 10px 40px;display:block;" href="#" onmouseover="this.style.color='#febf0f';this.style.backgroundPosition='10px center';this.style.backgroundColor='#222';" onmouseout="this.style.color='#8ac0e9';this.style.backgroundPosition='-9999px center';this.style.backgroundColor='transparent';">Announcements</a></li>--> </ul> <div style="font-size:0;line-height:0;border:0;margin:0;padding:0;height:0.1px;clear:both;"></div> </div>
Inline styles were a requirement for the Kaango platform.