Rounded Boarders on Products

[neilspinney]

UPDATEd DUE TO TYPO IN CODE
Okay guys and girls,

Due to having time to work on this I have finally found a way to implerment it.

Here is my coding as I have done it, hopefully you codies out there won't pick up any problems with it!

CSS coding below needs to be added to your CSS Layout

#container1 {
-moz-border-radius: 10px;
-moz-box-shadow: 10px 10px 7px #888;
-webkit-border-radius: 10px;
-webkit-box-shadow: 10px 10px 7px #888;
width:600px;
background:#eeeeee;
border-color:#DEDEDE;
}
#container3 {
-moz-border-radius: 10px;
-moz-box-shadow: 10px 10px 7px #888;
-webkit-border-radius: 10px;
-webkit-box-shadow: 10px 10px 7px #888;
width:200px;
background:#ffffff;
border-color:#DEDEDE;
}


Page Layout (You should change this to suit needs)

<style type="text/css">
p.sample {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: left;
text-indent: 0ex;
}
</style>


<div id="container1">
<div class="content">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">

<form method="post" action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />">
<input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" />
<input type="hidden" name="PAGE" value="PRODUCT" />
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
<Actinic:SECTION BLOB='<Actinic:Variable Name="SectionCatFile"/>'/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
<!-- Hidden field when in trial mode -->
<input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
</actinic:block>
<div class="floatright">
<actinic:variable name="ProductImageLayout" />
<br/>
</div>

<p class="sample">

Part Number: <actinic:variable name="ProductReference" />
<br/><br/><actinic:variable name="ProductName" />

<br/>
</actinic:block>


<actinic:variable name="ProductDescription" /><br/>
<actinic:variable name="ExtendedInformationLinks" /><br />
<actinic:variable name="RealTimeStockDisplay" />



<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e">

<a href="<Actinic:Variable Name="ProductLinkInfo"/>"><br />
<Actinic:Variable Name="ProductLinkText"/>
</a>
</actinic:block>


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e">
<p/>
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=-1><Actinic:Variable Name="RetailCustomerMessage"/></Actinic:PRICE_EXPLANATION><br>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22RRP%22%20%2f%3e%20%21%3d%20%22%22">
<p><h2><span class="mainrrp">RRP £<actinic:variable encoding="html" name="RRP" /> (Including VAT at 17.5%)</span></h2><p/>
</actinic:block>


<actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e">
<h2>
<Actinic:PRICES PROD_REF="<actinic:variable Name="ProductID" />" RETAIL_PRICE_PROMPT="<Actinic:Variable Name="ProductPriceDescription"/>">
<actinic:variable name="PriceListRetail" />
</Actinic:PRICES>

</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False">
<Actinic:NOTINB2B><br /><strong><actinic:variable name="ProductPriceNotEnabledMessage" /></strong></Actinic:NOTINB2B>
</h2>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e">
<br /><actinic:variable name="DiscountList" value="Standard Discount List" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
<br />
<span class="actrequired"><Actinic:Variable Name="OtherInfoPrompt"/></span><br />
<input type="text" name="O_<Actinic:Variable Name="ProductID"/>" size="40" maxlength="1000" value="" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e">
<br />
<span class="actrequired"><actinic:variable name="DatePrompt"/></span><br />
<actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
</actinic:block>

<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e%20%3d%3d%20FALSE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e%20%3d%3d%20FALSE%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" >
<!-- This code is used when the quantity box is visible to all customers -->

<span class="actrequired"><h1><Actinic:Variable Name="QuantityPrompt"/></span>
&nbsp;
<input type="text" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e" >
<!-- This code is used when the quantity box is visible to retail customers, but not all other customer groups -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />">
<br />
<span class="actrequired"><Actinic:Variable Name="QuantityPrompt"/></span>
&nbsp;
<input type="text" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" />
</Actinic:ShowForPriceSchedule>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" >
<!-- This code is used when the quantity box needs to hidden from retail customers -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<br /><span class=''actrequired''><Actinic:Variable Name="QuantityPrompt"/></span>&nbsp;<input type=''text'' name=''Q_<actinic:variable Name="ProductID"/>'' size=''4'' value=''<Actinic:Variable Name="DefaultQuantity"/>'' />"></Actinic:ShowForPriceSchedule>
</actinic:block>
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e">
<input type="hidden" name="Q_<actinic:variable Name="ProductID"/>" value="<actinic:variable name="DefaultQuantity"/>" />
</actinic:block>

<br /><actinic:variable name="CartError" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
<actinic:variable name="AddToCartButton" />
<br/>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e">
<br /><br /><strong><span class="actrequired"><br /><Actinic:Variable Name="OutOfStock"/></span></strong>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e">
<br /><br /><strong><span class="actrequired"><Actinic:Variable Name="CatalogSuspended"/></span></strong>

</actinic:block>

<br/>
<div id="container3">
<div class="content">
<p/>Need Help? Why not call us FREE using Skype!<p/>
<!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:GParts.co.uk?call"><img src="http://mystatus.skype.com/bigclassic/GParts%2Eco.uk" style="border: none;" width="182" height="44" alt="My status" /></a>
<br/>
<br/>

<actinic:variable name="ProductAlsoBoughtList" />

<actinic:variable name="ProductRelatedProductsList" />

<actinic:variable name="FeefoProductLogo" />

<actinic:variable name="FeefoProductFeedback" />


</div>


Hopefully some of you can make use of this!

Yours

Neil Spinney

[NormanRouxel]

Unmatched DIVs and /DIVs. E.g. at the bottom you have

<div id="container3">
<div class="content">

But only one subsequent </div>. Also no CSS for container3. And nothing seems to use container2's CSS. And that Skype bit is specific to your site. As is also the RRP code I think.

It might be better to just show where the div and /div go (presumably at the top and bottom of the Product Layout(s)) instead of posting the huge screed of site specific code.

[jont]

What fallback do you have in place for non CSS3 compliant browsers?

[jont]

Saw this plug-in for rounded corners

http://www.ee-scape.com/acatalog/Rounded_Borders.html

I know nothing about the plug-in or the sellers but may be an out of the box solution for those not conversant with HTML / CSS

[NormanRouxel]

There are many jQuery based ways of doing this.

I just used http://plugins.jquery.com/project/corners to add a rounded background to all products / fragments on http://www.drillpine.biz/v9accordion...LR_Camera.html. Took about 10 minutes from knowing nothing about the plugin to having it live and working.

Obtain jquery.corners.min.js (from the first link above) and save into your Site folder.

Needs a few lines added above </head> in the overall layout.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corners.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.rounded').corners();});</script>

And put just e.g.

<div style="width:650px; background-color:#eee; padding:10px;" class="rounded {10px}">
.
.
.
</div>

Around all code in the Product List Layout that you use.