Rounded Corners in Smart Theme

[jont]

Must be Christmas and feeling benevolent so here is a way to get rounded corners into the smart theme:

In actinic.css add:

.container {
	width: 150px;
	background: url(corners_right.gif) top right no-repeat;
	}
	
.desc {
	margin: 0;
	padding: 9px 9px 10px 9px;
	background: url(corners_left.gif) top left no-repeat;
	font-weight: bold;
	font-size: 14px;
	}
	
.yahooscript {
	margin: 0;
	padding: 0 0 0 9px;
	background: url(corners_left.gif) bottom left no-repeat;
	}
	
.yahooscript em {
	display: block;
	padding: 0 9px 9px 0;
	font-style: normal;
	background: url(corners_right.gif) bottom right no-repeat;
	}

Be wary of any existing css names you may have already specified

Into the Act_Primary.html (and other primary template where required eg Act_BrochurePrimary.html and Act_PrimaryCheckout.html) comment out:

<table width="150" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td height="22" bgcolor="NETQUOTEVAR:PALCOLOR2CSS" background="tab_pal2.gif" class="actsmallheading"><b>&nbsp;&nbsp;STORE SECTIONS</b></td>
        </tr>
        <tr> 
          <td class="thinred2"> 
            <table width="100%" cellspacing="2" cellpadding="2">
              <tr>
                <td>
                  <script language=Javascript1.2>
			document.write(YahooSections(section_tree)) 
		  </script>
                </td>
              </tr>
            </table> </td>
        </tr>
      </table>

and replace with:

<div class="container">
   <p class="desc">Store Sections</p>
   <p class="yahooscript">
     <em>
        <script language=Javascript1.2>
	document.write(YahooSections(section_tree)) 
	</script>
     </em>
   </p>
</div>

images are attached and to be saved into the root and PreviewHTML folders of the site. Screen grab attached to show the results. The images are more than large enough to expand to 970 pixels - should be enough to the biggest of sections. The background images are white background with black border - to change colours you will need to edit in a graphics package (ensure the corners_left.gif is 9px wide if you do edit)

Once implemented is very easy to then add to any of the other boxes on the page. Best of all it removes another of those nasty nested tables from the layout.

As ever - back up your templates and no responsibility accepted for destroying your site, global warming or Chelsea winning the title. Tested in IE and Firefox. If anyone can improve on this all I ask is it is posted back to the forum for others to use also.

Hope is of use. Enjoy.

[Bruce]

Nice one Jonty !!