PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I'd have to do some testing to be certain, but these changes should get you going in the right direction:

Find the following block of CSS

#navigation-bar{
    background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
    height: 43px;
    line-height: 0;
    width: 960px;
    }

and change it to

#navigation-bar{
    background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
    height: 43px;
    line-height: 0;
    width: 960px;
    text-align: center;
    }

Then find

#navigation-bar ul {
margin: 0px auto;
padding: 14px 0px 0px;
width: 560px;
clear: both;
}

and remove the width: 560px; portion

Then find

#navigation-bar li {
color: rgb(100, 100, 100);
list-style: none;
line-height: 12px;
float: right;
text-align: center;
margin: 0px 2px;
font-weight: normal;
}

and change it to

#navigation-bar li {
position: relative;
display: inline-block;
color: rgb(100, 100, 100);
list-style: none;
line-height: 12px;
text-align: center;
margin: 0px 2px;
font-weight: normal;
}

At this point, you'll want to invert the output of your navigation items (Home should go first instead of last, then all products... etc). Also, move the "first-child" class from checkout div to the home div.

Next, you'll want to completely remove this style

#navigation-bar li div div {
border-right: 1px solid rgb(255, 255, 255);
padding: 5px 18px;
}

and add in this one

.item-right-side
{
border-right: 1px solid rgb(255, 255, 255);
padding: 5px 18px;
}

.first-child .item-right-side
{
border: none;
}

You'll also want to remove this style from your mini basket css

#mini-basket 
{
    line-height: 2px;
}

You'll probably need to do some other minor tweaks once you get that up and going, but that should get you at least to a working state.

I'll include the contents of both css below.
What specific changes would you make? I hate to annoy you with this but my css skills are rudimentary at best.
Thank you so much...

/*****************************************/  /*************** RESET CSS ***************/                
/*****************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;} 
q:before,q:after {content:'';}




/*** Site ***/
body{
    background:#fff url() top center no-repeat;
    font:12px/1.46 Lucida Sans Unicode, Lucida Grande, sans-serif;
    margin:0;
    color:#2b2a2a;
    text-align:center;
}


td{ font-size:1em; }


form{
    display:inline;
    margin:0;
    padding:0;
}


h1{ font:normal 1.5em Arial, Helvetica, sans-serif ; color:#2b2a2a;   }
h2{ font:normal 1.3em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
h3{ font:normal 1.1em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }


h2.header{
    color:#fff;
    padding:10px;
    background-color:transparent;
    font-weight:bold;
}


p {
    padding-bottom:10px;
    }


a img{ border:0; }


a:link            { color:#484848; }
a:visited        { color:#484848; }
a:active        { color:#42992f; }
a:hover            { color:#42992f; }


.clear            { clear:both; font-size:0em; height:0em; }


.floatright        { float:right; }
.floatleft        { float:left; }


.alignright        { text-align:right; }
.alignleft        { text-align:left; }


.aligncenter    { text-align:center; }
.margincenter    { margin:0 auto; }


.small            { font-size:.9em; }
.smaller        { font-size:.8em; }
.smallest        { font-size:.7em; }
.large            { font-size:1.1em; }
.larger            { font-size:1.2em; }
.largest        { font-size:1.3em; }
.bold            { font-weight:bold; }
.italic            { font-style:italic; }
.red            { color:#dd0000; }
.blue            { color:#0000ff; }
.grey            { color:#999999; }
.nowrap            { white-space:normal; }


.link-pipe        { color:#999999; }


.input_error{ border-color:#cc0000 #ff0000 #ff0000 #ff0000; }


select{
    border-width:1px;
    border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    padding:1px 2px;
}


.error-message{ 
    padding:4px;
    text-align:center;
    width:60%;
    margin:0 auto;
    color:#dd0000;
    font-weight:bold;
}


.LOGN .error-message,
.AFCL .error-message,
.ORDL .error-message{
    margin:12px 24px;
    width:auto;
}


.information-message{ 
    padding:4px;
    text-align:center;
    width:60%;
    margin:0 auto;
    color:#0000dd;
}


.LOGN .information-message{
    margin:12px 24px;
    width:auto;
}
td.field textarea {
        width:200px; height:100px;
        
    }
.textfield, select, textarea,
#tax-fields .form_row input{
    border-width:1px;
    border-style:solid;
    border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    padding:1px 2px;
    font:normal 1em Arial, Helvetica, Verdana, sans-serif;
}


.textfield, textarea{
    width:140px; height:18px;
}


.button{
    border:none;
    background-color:#449a31;
    color:#ffffff;
    font-size:.9em;
    padding:3px;
    margin:0;
    cursor:pointer;
    width: auto;
      overflow: visible;


}


#site-container{
        border-collapse: collapse;
        border-left: 1px solid #beb9b7;
        border-bottom: 1px solid #beb9b7;
        border-right: 1px solid #beb9b7;
        margin: 0 auto;
        text-align: left;
        width: 960px;
}


#bottom-wrap    { clear:both; font-size:0em; height:0em; }


/*** Top Navigation Bar ***/


#navigation-bar{
    background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
    height: 43px;
    line-height: 0;
    width: 960px;
    }


#navigation-bar ul{ 
    margin:0 auto;
    padding:14px 0 0 0 ;
    width:560px;
    clear:both;
}


#navigation-bar li{
    color:#646464;
    list-style:none;
    line-height:12px;
    float:right;
    text-align:center;
    margin:0 2px;
    font-weight:normal;
}


#navigation-bar li.navigation-item-on    {  }
#navigation-bar li.navigation-item-off    {  }


/* tab padding */
#navigation-bar li div div{
    border-right: 1px solid #fff;
    padding: 5px 18px;
    }
    
    #navigation-bar li.first-child div div {
        border:0;
    }
    


/* tab off side images */
#navigation-bar li.navigation-item-off div.item-left-side    { background:transparent url() no-repeat scroll left top; }
#navigation-bar li.navigation-item-off div.item-right-side    { background:transparent url() no-repeat scroll right top; }


/* tab on side images */
#navigation-bar li.navigation-item-on div.item-left-side    { background:transparent url() no-repeat scroll left top; }
#navigation-bar li.navigation-item-on div.item-right-side    { background:transparent url() no-repeat scroll right top; }


/* navigation bar links */
#navigation-bar li a:link,
#navigation-bar li a:visited,
#navigation-bar li a:hover,
#navigation-bar li a:active{ 
    color:#fff; 
    text-decoration:none;
}


#nav-checkout        {}
#nav-search            {}
#nav-basket            {}
#nav-account        {}
#nav-all-products    {}
#nav-storefront        {}


/*** Left Navigation ***/


#left-navigation {
    padding: 0 10px 10px;
    vertical-align: top;
    width: 220px;
}


/*** One Column Pages ***/
.one-column #left-navigation{ display:none; }
.one-column #main-content {width:940px; padding: 20px;}
#shipping-payment .form_row {text-align:left;}


#category-tree{
    background:#d5cea5 url() repeat-y scroll center top;
    padding: 0 20px;
}


#category-tree-top-image{ 
    width:219px;


    }
#category-tree-bottom-image{
    background: url(images/footer-bottom-bg.jpg) bottom no-repeat;
    padding-bottom: 35px;
    width:219;
}


#category-tree a{
    display:block;
    text-decoration:none;
    color:#73370c;
    font-size:12px;
}


#category-tree div{
    padding:5px  0;
    border-bottom:1px dotted #6b3410;
}


#category-tree .level-1 a{ 
    padding:4px 6px 4px 0; 
    background:transparent url() right no-repeat;
        
    
    }
#category-tree .level-2 a{ padding:4px 6px 4px 20px; }
#category-tree .level-3 a{ padding:4px 6px 4px 30px; }
#category-tree .level-4 a{ padding:4px 6px 4px 40px; }
#category-tree .level-5 a{ padding:4px 6px 4px 50px; }
#category-tree .level-6 a{ padding:4px 6px 4px 60px; }


#category-tree div.active{ }
#category-tree-header{    
    background: url(images/categoryTitle-bg.jpg) no-repeat scroll center top transparent;
        height: 4px;
        width: 219px;
    }


#category-tree-footer{
     background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;
    height: 60px;
    padding: 80px 0 0 20px;
    width: 200px;
    margin-top:20px;
}


#category-tree-footer img{
    width:35px; height:35px;
    margin-left: 5px;
}


    #category-tree-footer img.social-icons-first {
        margin-left:25px;
    }
/*** Content ***/


#content-container{
    clear: both;
    margin: 0 auto;
    width: 960px;
    margin-top:10px;
}




#main-content { 
    padding-right: 10px;
    vertical-align: top;
    width: 690px;
}


/*** Global Header/Footer ***/


#global-header{
    background: url() no-repeat scroll center top transparent;
    height: 80px;
    padding-right: 10px;
    }




#logo{
     padding: 20px 0 0 10px;
    height:51px;
    width:177px;
}


#logo a{
    background:url(images/logo.gif) no-repeat scroll left top transparent;
    cursor:pointer;
    display:block;
    height:51px;
    width:177px;
}


#search{
    float:right;
    padding:40px 0 4px 0;
}


#header-links{
    float:right;
    padding:40px 12px 0 0;
    line-height:22px;
    color:#ededed;
    text-align:right;
}
    #header-links a{
        color:#515151;
    }
#global-footer{ 
    border-top: 1px solid #BEB9B7;
    margin: 40px 0;
    padding-top: 20px;
    text-align: center;
    }


    
#footer-links a{
    color:#774d4e;
    }


#footer-links ul{
    font:.9em normal Verdana, Helvetica, Arial, sans-serif;
    margin:8px 0;
    padding:0;
}




#footer-links ul li{
    list-style-type:none;
    border-left:1px solid #646464;
    padding:0 2px 0 6px;
    margin:0;
    text-align:center;
    display:inline;
}


#footer-links ul li.first-child{ border:0; }
#global-footer #footer-links #footer-sitemap-link{ display:none; }


#miva-link{
    font-size:.8em;
    margin:16px 0;
}


#miva-link a{ color:#999999; }


#page-header{ clear:both; }
#page-footer{ clear:both; }


#maintenance{
    color:#dd0000;
    font-weight:bold;
}


/*** ACAD, ACED, AFAD, AFED, OCST ***/


.logout-link{
    margin:12px 10px;
    float:right;
}


#customer-fields label,
#affiliate-fields label{
    clear: both;
    float: left;
    padding: 2px 5px 3px 0;
    text-align: right;
    white-space: nowrap;
    width: 170px;
}


#affiliate-commissions label,
.OSEL .non-editable label{
    float:left;
    width:120px;
    font-weight:bold;
    text-align:right;
    padding:0 6px 0 0;
}


#customer-fields input.textfield,
#affiliate-fields input.textfield,
#tax-fields input,
#affiliate-commissions div.form_row div,
.non-editable div.form_row div{
    width:170px;
    margin:0 0 4px 0;
}


#affiliate-commissions div.form_row div{ float:left; }


#customer-fields select,
#affiliate-fields select{
    width:176px;
    margin:0 0 4px 0;
}


#login-details,
#affiliate-information{
    margin:0 0 16px 0;
}


#affiliate-commissions .form_row{ margin:0 0 8px 0; }


.AFAD #affiliate-fields{
    width:50%;
    margin:0 auto;
}


.AFED #affiliate-fields #affiliate-contact,
.AFED #affiliate-fields #affiliate-commissions{
    float:left;
    width:50%;
}


#affiliate-commissions .affiliate-code{
    width:230px !important;
}


#affiliate-commissions #affiliate-image{
    width:236px !important;
    overflow:auto;
}


#affiliate-terms{ margin-left:155px; }


#affiliate-fields .form_row div.non-editable{
    margin:0 0 8px 0;
    padding:2px 0 0 0;
}


.save-button,
.continue-button{
    clear:both;
    text-align:right;
    padding:24px 0 0 0;
}


.required{ font-weight:bold; }


h2.fields-heading{
    background-color:#68635f;
    color:#fff;
    margin:0 0 12px 0;
    padding:4px 4px 4px 12px;
}


.address2-label{ margin:0 0 14px 0; }


.controls{ 
    font:normal .7em Verdana, Helvetica, Arial, sans-serif;
    visibility:hidden;
}


#customer-fields .controls label{
    float:none;
}


#ship-to,
#bill-to{
    width:50%;
    float:left;
}


#ship-to h2 input.checkbox,
#bill-to h2 input.checkbox{
    margin:0 2px 0 12px;
    padding:0;
    width:13px;
    height:13px;
    overflow:hidden;
}


div.invalid input.textfield,
div.invalid select,
#tax-fields div.invalid input{
    border-color:#cc0000 #ff0000 #ff0000 #ff0000;
}


div.invalid label{ color:#dd0000; }


.warning-message{
    padding:4px;
    text-align:center;
    width:60%;
    margin:0 auto;
    color:#dd0000;
}


#customer-fields.editable .form_row,
#affiliate-fields.editable .form_row{
    margin:0 0 6px 0;
    text-align:left;
}


#customer-fields.non-editable .form_row{
    margin:0 0 4px 0; 
    text-align:left;
}


#customer-fields.non-editable label,
#affiliate-fields.non-editable label{
    margin:0 0 0 30px;
    padding:0 4px 0 0;
    font-weight:bold;
    width:110px;
    text-align:right;
    float:left;
    clear:both;
    white-space:nowrap;
}


#customer-fields.non-editable .form_row div,
#affiliate-fields.non-editable .form_row div{
    float:left;
}


#update-record{
    clear:both;
    margin:24px 0 0 24px;
}


.tax-fields label{ font-weight:bold; }


/*** LOGN, AFCL, ORDL, ORHL ***/


.AFCL #main-content,
.LOGN #main-content, .ORHL #main-content{
    width:940px;


}


.ORHL #main-content{ }


.ORDL #main-content{ padding:28px 16px; }


.AFCL .section,
.LOGN .section{
        float:left;
        height:220px;
        width:49%;
        text-align:center;
    }




.ORDL .section{
    float:left;
    height:220px;
    width:33%;
}


.ORHL .lookup-section{ 
    float:left;
    height:220px;
    width:50%;
}


.ORHL .signin-section{
    float:left;
    height:220px;
    width:48%;
}
.lookup-section .form_row {}
.signin-section .form_row {}


.section h3,
.lookup-section h3,
.signin-section h3{
    text-align:center;
    padding-bottom:10px;
}


.form_row{ 
    margin:0 0 6px 0; 
    text-align:center;
    }


.LOGN label,
.ORDL label,
.AFCL label{
    clear:both;
    width:80px;
    padding:3px 5px;
}


.ORHL label{ 
    clear:both;
    padding:3px 5px;
    text-align:right;
    white-space:nowrap;
    width:90px;
}


.grey-border-right{ border-right:1px solid #cccccc; }


.logn-input{ width:120px; }


#invalid-key{
    width:23px;
    float:left;
    margin:0 4px 0 0;
    border-width:1px;
    border-style:solid;
    border-color:#cc0000 #ff0000 #ff0000 #ff0000;
}


.sign-in-buttons{ 
    text-align:center;
    margin:12px 0 0 0;
}


.forgot-password{ 
    font-size:.9em; 
    text-align:center;
    margin:12px 0 0 0;
}


/*** BASK, OCST, OPAY, OSEL ***/


#basket-contents.non-editable,
#basket-contents.editable,
#order-contents table{
    width:100%;
    border-left:1px solid #d6d6d6;
    border-top:1px solid #d6d6d6;
    margin-top:10px;
}


#basket-contents.non-editable table,
#basket-contents.editable table,
#order-contents table{
    border-collapse:collapse;
    width:100%;
    color:#000;
}


#basket-contents.non-editable td,
#basket-contents.editable td,
#order-contents td{
    background-color:#fff;
    border-bottom:1px solid #d6d6d6;
    border-right:1px solid #d6d6d6;
    vertical-align:top;
    padding:6px;
    font:normal 1em Arial;
}


#basket-contents table tr.basket-heading td,
#basket-contents table tr.basket-heading td,
#order-contents table tr.heading td{
    background-color:#68635f;
    color:#fff;
    font-weight:bold;
    text-align:center;
    font-size:1em;
    white-space:nowrap;
}


#basket-contents .basket-qty-input{ width:34px; }


#basket-contents .item-remove{
    width:8%;
    vertical-align:middle;
}


#basket-contents table .basket-heading td.item-name{
    text-align:left;
}


#basket-contents.editable .item-quantity{
    width:13%;
    text-align:center;
    white-space:nowrap;
}


#basket-contents.non-editable .item-quantity{
    width:6%;
    text-align:center;
}


#basket-contents .item-options .item-name{ padding-left:16px; }


#basket-contents.non-editable .item-name{ width:59%; }
#basket-contents.editable .item-name    { width:66%; }


#basket-contents td.item-name{ text-align:left; }


#basket-contents .item-price{
    width:10%;
    text-align:right;
    white-space:nowrap;
}


#basket-contents .item-total{
    width:10%;
    text-align:right;
}


#basket-contents .basket-charges .charge-description,
#basket-contents .basket-charges .formatted-charge{
    font-style:italic;
    text-align:right;
    white-space:nowrap;
}




#basket-contents #basket-totals .formatted-total,
#basket-contents #basket-totals .total-prompt{
    font-weight:bold;
    text-align:right;
}


#basket-contents .item-options td{}


.checkout .item-quantity    { width:8% !important; }
.checkout .item-name        { width:64% !important; }


#fields-key{ margin:16px 0; }


.checkout-button{
    margin:12px 10px;
    text-align:right;
}


#payment-fields input{
    border-width:1px;
    border-style:solid;
    border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    padding:1px 2px;
    font:normal 1em Arial, Helvetica, Verdana, sans-serif;
}


#payment-fields label{
    white-space:nowrap;
    text-align:left;
    padding:3px 5px 3px 0;
    clear:both;
    margin:2px 0 0 0;
}


#payment-fields td{
    padding:0 0 6px 0;
}


#shipping-payment .form_row{ margin:10px 0 0 0; }


#shipping-payment label{
    float:left;
    width:65px;
    white-space:nowrap;
    text-align:left;
    padding:3px 5px 3px 0;
    clear:both;
    margin:2px 0 0 0; 
}


.OSEL .continue-button,
.OPAY .continue-button{ 
    margin:0 0 12px 0;
}


.OCST #basket-contents{ margin: 0 0 32px 0; }


.OPAY .fields-key{ margin:0 0 16px 0; }
#payment-fields .form_row{ margin:10px 0 0 0; }


#customer-fields.non-editable{ margin:0 0 32px 0; }
#basket-contents.non-editable{ margin:16px 0 32px 0; }


/*** CTGY, SRCH, PLST, OUS1, OUSM ***/


.categoy-listing,
.all-products,
.related-products,
.search-results{
    clear:both;
}


.product-item{
    float:left;
    padding:0 9px 20px;
    width:215px !important;
}


.product-item .padding{
    background-color:#fff;
    height:300px;
    overflow:hidden;
    padding:20px 10px;
    text-align:center;
    color:#484848;
    border:#dbd9b5 1px solid;
}
        
.product-next-previous{ 
    clear:both;
    margin:12px 0; 
}


.CTGY .product-details,
.PLST .product-details,
.SRCH .product-details{
        overflow: hidden;
    text-align:center;
    color:#493933;
    padding:0;
    margin:0;
}


.product-item .product-thumbnail{ 
    margin:0 0 12px 0; 
    text-align:center;
}


.product-item .product-thumbnail img{
    max-width:150px; height:150px;
}


.purchase-buttons{
    text-align:center;
    margin:16px 0 0 0;
}


.purchase-buttons input.button{
        margin:0 0 0 17px;
        padding:5px;
        float:left;
}


.line-item td.item-buttons{
    white-space:nowrap;
}


.line-item tr.header-row td{ font-weight:bold; }


.thumbnail-not-available{
    display:block;
    width:110px;
    height:110px;
    background:transparent url() no-repeat scroll left top;
    margin:0 auto;
}


.image-not-available{
    display:block;
    background:transparent url() no-repeat scroll left top;
}


.next-previous{ margin:12px 0 0 0; }


.next-button    { float:right; }
.previous-button{ float:left; }


.search-again{ margin:0 3px 10px; }


.OUS1 #main-content{
    padding-left:225px;
    padding-right:225px;
}


.upsale-heading{ text-align:center; }


.OUS1 .product-thumbnail{
     float: left;
    height: 300px;
    max-width: 300px;
    text-align: center;
    padding:0 20px 0 0;
}


.OUS1 .product-description        { margin:16px 0 0 0; }
.OUS1 .thumbnail-not-available    { margin:16px auto; }


.OUSM #main-content{ 
    padding-left:160px;
    padding-right:160px;
}


.upsale-batch{
    width:100%;
    padding:2px;
}


.upsale-batch .heading td    { font-weight:bold; }


.upsale-checkbox{ width:32px; }
.upsale-name{ width:175px; }


.OUS1 .purchase-buttons textarea{
    text-align:center;
    width:390px;
    height:100px;
}


.OUSM .continue-button{ text-align:center; }


.line-item table{ width:100%; margin-bottom:30px;}
.line-item table tr.heading td{ font-weight:bold; }
.line-item table td{ 
    padding:10px;
    border: 1px solid #ddd;
}
.item-buttons input.button {
    float: left;
    margin: 0 0 0 5px;
    padding: 5px;
    }
.line-item .item-name{ width:30%; }
.line-item tr.alt_row{ background-color:#f0f0f0; }


/*** PRODUCT DISPLAY ***/


.product-details-1{
    width:48%;
    float:left;
}
    .product-details-1 p{
        text-align:center;
    }
.product-details-2{
    width:48%;
    float:right;
}


.product-details-2 .purchase-buttons {
    margin:16px 0;
    text-align:left;
    width:200px;
    }
    .product-details-2 .purchase-buttons .button {
        font-size:17px;
        height:39px;
        margin:10px 0 0;
        text-shadow:2px 2px 2px #496E92;
        width:140px;
        }    
    .product-image{         
            max-width:300px;
            margin:0 20px;
            text-align:center;


     }


    .product-image img{
        max-width:300px; 
        max-height:300px;
        }


.product-quantity-input{
    margin:0 4px;
    overflow:auto;
    width:34px;
    text-align:left;
    
}


.related-products{
    clear:both;
    margin:32px 0 16px 0;
}


.product-attributes{
    margin:16px 0;
    text-align:left;
}


.product-attributes td{
    padding:4px 0;
}


.product-attributes td.prompt{
    vertical-align:top;
    text-align:left;
    padding-right:5px;
}


.product-attributes td.field{
    text-align:left;
}


/*** INVC ***/


.INVC .order-id,
.ORDS .order-id{
    float:left;
    font-weight:bold;
}


.INVC .order-date,
.ORDS .order-date{
    float:right;
    text-align:right;
}


.INVC .order-date span,
.ORDS .order-date span{
    font-weight:bold; 
}


.INVC h3,
.ORDS h3{ 
    clear:both;
    margin:16px 0 24px 0;
}


/*** PATR ***/


.PATR .continue-button{
    text-align:right;
    margin:12px 0;
}


/*** SMAP ***/


.SMAP h3{
    
}


.SMAP .category{
    width:33%;
    text-align:left;
    float:left;
}


.SMAP .category .padding{
    padding:2px;
}


.SMAP .product{
    width:33%;
    text-align:left;
    float:left;
}


.SMAP .product .padding{ padding:2px; }


/*** ORDH, ORDS ***/


#orderhistory-list table{ border-collapse:collapse; }


#order-contents table{
    width:100%;
}


#order-contents table td, 
#orderhistory-list table td{ 
    vertical-align:top;
}


#orderhistory-list .order-reorder        { text-align:center; }
#orderhistory-list .order-invoice        {  }
#orderhistory-list .order-description    { text-align:left; }
#orderhistory-list .order-date            {  }
#orderhistory-list .order-purchased        { text-align:center; }
#orderhistory-list .order-quantity        { text-align:center; }
#orderhistory-list .order-status        { text-align:center; }
#orderhistory-list .order-tracking        { text-align:left; }
#orderhistory-list .order-total            { text-align:right; }
#orderhistory-list .order-price            { text-align:right; }
#orderhistory-list .order-view            { 
    vertical-align:middle;
    padding:0 8px;
}


#orderhistory-list tr.heading td { 
    font-weight:bold;
    white-space:nowrap;
}


#order-contents table tr td.order-reorder        { text-align:center; }
#order-contents table tr td.order-invoice        {  }
#order-contents table tr td.order-description    { text-align:left; }
#order-contents table tr td.order-date            { text-align:left }
#order-contents table tr td.order-purchased        { text-align:center; }
#order-contents table tr td.order-quantity        { text-align:center; }
#order-contents table tr td.order-status        { text-align:left; }
#order-contents table tr td.order-tracking        { text-align:left; }
#order-contents table tr td.order-total            { text-align:right; }
#order-contents table tr td.order-price            { text-align:right; }


#order-contents table tr td.charge-description,
#order-contents table tr td.charge-fee{
    font-style:italic;
    text-align:right;
}


#order-contents table tr td.charge-fee{ text-align:right; }
#order-contents table tr td.formatted-total,
#order-contents table tr td.total-prompt{
    text-align:right;
    font-weight:bold;
}


#customer-fields{
    margin:16px 0;
}


#Order_BillZip{ width:44px; }


.widest{ width:100%; }




/**** Homepage Elements *****/


/**** body.SFNT #left-navigation {display:none;} *****/
body.SFNT #main-content {padding-bottom:20px; width:698px;}
body.SFNT #main-content h1, body.SFNT #main-content h2, body.SFNT #main-content h3 {margin-left:20px;}
                            
#header {                   
    background: url(images/header.jpg) no-repeat scroll center top transparent;
    height: 283px;
    width:700px;
    }
    #header a {
        position:absolute;
        width:700px; height:283px;
        }
    #header a span{
        display:none;
        }    


#free-shipping {
    background: url(images/shipping-banner.jpg) no-repeat scroll center top transparent;
        display: inline;
        float: left;
        height: 62px;
        margin: 20px 0 10px;
        width: 700px;
    }
    #free-shipping a {
        position:absolute;
        width:940px; height:46px;
        }
    #free-shipping a span{
        display:none;
        }    
    
    
#left-ad {
    background:transparent url(images/left-ad.jpg) top no-repeat;
    width:460px; height:132px;
    padding-bottom:20px;
    margin-top:20px;
    float:left;
    }
    #left-ad a {
        position:absolute;
        width:460px; height:132px;
        }
    #left-ad a span{
        display:none;
        }
        
        #right-ad {
            background:transparent url(images/right-ad.jpg) top no-repeat;
            width:460px; height:132px;
            padding-bottom:20px;
            float:right;
            margin-top:20px;
            }
            #right-ad a {
                position:absolute;
                width:460px; height:132px;
                }
            #right-ad a span{
                display:none;
                }
/*---- welcome banner ----*/
    #welcome-banner {
        background: url(images/welcome-bg.jpg) no-repeat scroll left top transparent;
        display: inline;
        float: left;
        height: 93px;
        margin: 15px 0 0;
        padding: 60px 0 0 20px;
        width: 680px;
        }


        
        #welcome-banner h1{
                color: #523F29;
                margin:0;
                padding:0;
                }
         #welcome-banner p {
            color:#6e6e6e;
            width: 460px;
            margin-top:10px;
        }
        #welcome-banner a {
            color:#FFF;
            text-decoration: underline;
            margin-top:10px;
            padding:0 20px 10px 20px;
        }
/*---- end welcome banner ----*/
        




/*---- end newsletter ----*/
        #social-media {
             background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;
           display: inline;
           float: left;
           height: 162px;
           margin: 15px 0 0 20px;
           width: 220px;
        }
            
            #social-media .social-icons {
                display: inline;
                float: left;
                margin: 55px 0 0 17px;
                padding:0;
            }
/*---- end newsletter ----*/




/*---- sub pages ----*/
    #main-content h1 {
        margin:20px 0 20px 10px;
        color:#FFFv;
    }




    /*----- image machine css ----*/




    .thumbnails{
         display: block;
        margin: 0 0 0 60px;
        padding: 0;
        width: 230px;
        }


        .thumbnails li{
            display:block;
            float:left;
            margin:5px 5px 0 0;
            padding:0;
            width:50px;
            height:50px;
            text-align:center;
            border:1px solid #eeeeee;
            cursor:pointer;
            }


        .thumbnails li span{
            display:inline-block;
            height:100%;
            text-align:center;
            vertical-align:middle;
            }


        .thumbnails li img{
            vertical-align:middle;
            }


    .swatches{
        display:inline;
        margin:0;
        padding:0;
        }


        .swatches li{
            display:block;
            float:left;
            margin:4px 4px 0 0;
            padding:0;
            width:50px;
            height:50px;
            text-align:center;
            border:1px solid #eeeeee;
            cursor:pointer;
            }


        .swatches li span{
            display:inline-block;
            height:100%;
            text-align:center;
            vertical-align:middle;
            }


        .swatches li img{
            vertical-align:middle;
            }


    .product-image-margin{
        height:8px;
        }


        .closeup {


           position:absolute;
           top:150px;
           padding:15px;
           background:#fff;
           border:3px solid #eaeaea;
           text-align:center;
           display:none;
           z-index:9999;
           min-width:274px;
           min-height:274px;
           border-radius:5px; 
           -moz-border-radius:5px;
           -webkit-border-radius:5px;
           box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
           -moz-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
           -webkit-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
        }


        .closeup a {
           cursor:pointer;
           position:absolute;
          right: -15px;
            top: -15px;
           z-index:9999;
           color:#ff0000;
        }


        #closeup-caption {
           margin:15px 15px 0;
           padding:5px;
           font:bold 14px Arial, Helvetica, sans-serif;
           color:#fff;
           background:#666;
           -moz-border-radius:5px;
           -webkit-border-radius:5px;
           box-shadow:rgba(255,255,255, 0.75) 0px 0px 25px;
           display:none;
        }
        .closeup_backing {
           position:absolute;
           left:0px;
           top:0px;
           background:#000;
           background:rgba(0,0,0,.6);
           filter:alpha(opacity=60);
           width:100%;
           z-index:100;
        }
        .CTGY .product-details .product-name,
        .PLST .product-details .product-name,
        .SRCH .product-details .product-name{
                height: 3em;
                    line-height: 1.5em;
                    overflow: hidden;
}


#breadcrumbs li{
float:left;
margin-right:10px;
}        


#filter-items-container
{
    color: #434343;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#filter-items-container .per-page
{
    position: relative;
    float:left;
    padding: 0 5px;
    margin-right: 5px;
    height: 22px;
    line-height: 20px;
}
#filter-items-container .per-page label
{
    margin-right: 3px;
}
#filter-items-container .per-page select
{
    padding: 0;
}
#filter-items-container .sorting
{
    position: relative;
    float:left;
    padding: 0 5px;
    height: 22px;
    line-height: 20px;
}
#filter-items-container .sorting label
{
    margin-right: 3px;
}
#filter-items-container .sorting select
{
    padding: 0;
    font-size: 11px;
}




.page-links-previous, .page-links-next
{
    text-decoration: none;
    line-height: 20px;
    padding: 0 8px;
    white-space: nowrap;
    font-weight: bold;
}
.page-links-previous
{
    float: left;
    text-align: right;
}
.page-links-next
{
    float: right;
    text-align: left;
}
.page-links-inactive
{
    text-decoration: none;
    padding: 2px 3px;
}
.page-links-active
{
    color: #434343;
    border-bottom: 2px solid #434343;
    font-weight: bold;
    text-decoration: none;
    padding: 1px 3px;
}
.page-links-deactivated
{
    color: #999;
    text-decoration: none;
}
.page-links-deactivated:hover
{
    color: #999;
    text-decoration: none;
    background: none;
}
.page-disp {
    display: block;
    line-height: 20px;
    float: left;
    text-align: center;
}
.page-links, .page-links a
{
    color: #434343;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
    .page-links
    {
        margin: 0px;
        text-align: right;
        float: right;
    }
    
.page-links-container
{
    text-decoration: none;
    display:block;
    float: right;
}
.page-links-title
{
    margin-top: 3px;
    position: relative;
    display:block;
    float:left;
}


.CTGY .product-details .product-name A:hover,
.PLST .product-details .product-name A:hover,
.SRCH .product-details .product-name A:hover {
height: 3em;
line-height: 1.5em;
overflow: hidden;
}

#global-mini-basket-container{
    display: block;
    float: right;
    line-height: 22px;
    padding: 4px 3px 0px 0px;
}


#global-mini-basket-hover-content
{
    display: none;
    float: left;
    z-index:10;
    position: absolute;
    min-width: 250px;
    max-width: 410px;
    background: #FFF;
}


#global-mini-basket-hover-content table
{
    display: table;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid #666;
    background: #FFF;
}


#global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
{
    color: #FFF;
    padding: 5px;
    font-weight: bold;
    font-size: 13px;
    background: #666;
}


#global-mini-basket-hover-content table tbody td
{
    padding: 3px 5px;
    line-height: 14px;
    color: #000000;
}


#global-mini-basket-hover-content table tbody tr.on td
{
    background: #EEE;
}


#global-mini-basket-hover-content table thead th a
{
    color: #FFF;
}


#mini-basket 
{
    line-height: 2px;
}


.minibasket_backing
{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}


#global-mini-basket-hover-content .on a:link 
{
  color: #000;
}

[chrisgable]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I'll include the contents of both css below.
What specific changes would you make? I hate to annoy you with this but my css skills are rudimentary at best.
Thank you so much...

/*****************************************/  /*************** RESET CSS ***************/				
/*****************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;} 
q:before,q:after {content:'';}




/*** Site ***/
body{
	background:#fff url() top center no-repeat;
	font:12px/1.46 Lucida Sans Unicode, Lucida Grande, sans-serif;
	margin:0;
	color:#2b2a2a;
	text-align:center;
}


td{ font-size:1em; }


form{
	display:inline;
	margin:0;
	padding:0;
}


h1{ font:normal 1.5em Arial, Helvetica, sans-serif ; color:#2b2a2a;   }
h2{ font:normal 1.3em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
h3{ font:normal 1.1em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }


h2.header{
	color:#fff;
	padding:10px;
	background-color:transparent;
	font-weight:bold;
}


p {
	padding-bottom:10px;
	}


a img{ border:0; }


a:link			{ color:#484848; }
a:visited		{ color:#484848; }
a:active		{ color:#42992f; }
a:hover			{ color:#42992f; }


.clear			{ clear:both; font-size:0em; height:0em; }


.floatright		{ float:right; }
.floatleft		{ float:left; }


.alignright		{ text-align:right; }
.alignleft		{ text-align:left; }


.aligncenter	{ text-align:center; }
.margincenter	{ margin:0 auto; }


.small			{ font-size:.9em; }
.smaller		{ font-size:.8em; }
.smallest		{ font-size:.7em; }
.large			{ font-size:1.1em; }
.larger			{ font-size:1.2em; }
.largest		{ font-size:1.3em; }
.bold			{ font-weight:bold; }
.italic			{ font-style:italic; }
.red			{ color:#dd0000; }
.blue			{ color:#0000ff; }
.grey			{ color:#999999; }
.nowrap			{ white-space:normal; }


.link-pipe		{ color:#999999; }


.input_error{ border-color:#cc0000 #ff0000 #ff0000 #ff0000; }


select{
	border-width:1px;
	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
	padding:1px 2px;
}


.error-message{ 
	padding:4px;
	text-align:center;
	width:60%;
	margin:0 auto;
	color:#dd0000;
	font-weight:bold;
}


.LOGN .error-message,
.AFCL .error-message,
.ORDL .error-message{
	margin:12px 24px;
	width:auto;
}


.information-message{ 
	padding:4px;
	text-align:center;
	width:60%;
	margin:0 auto;
	color:#0000dd;
}


.LOGN .information-message{
	margin:12px 24px;
	width:auto;
}
td.field textarea {
		width:200px; height:100px;
		
	}
.textfield, select, textarea,
#tax-fields .form_row input{
	border-width:1px;
	border-style:solid;
	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
	padding:1px 2px;
	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
}


.textfield, textarea{
	width:140px; height:18px;
}


.button{
	border:none;
	background-color:#449a31;
	color:#ffffff;
	font-size:.9em;
	padding:3px;
	margin:0;
	cursor:pointer;
	width: auto;
  	overflow: visible;


}


#site-container{
		border-collapse: collapse;
	    border-left: 1px solid #beb9b7;
		border-bottom: 1px solid #beb9b7;
		border-right: 1px solid #beb9b7;
	    margin: 0 auto;
	    text-align: left;
	    width: 960px;
}


#bottom-wrap	{ clear:both; font-size:0em; height:0em; }


/*** Top Navigation Bar ***/


#navigation-bar{
	background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
    height: 43px;
    line-height: 0;
    width: 960px;
	}


#navigation-bar ul{ 
	margin:0 auto;
	padding:14px 0 0 0 ;
	width:560px;
	clear:both;
}


#navigation-bar li{
	color:#646464;
	list-style:none;
	line-height:12px;
	float:right;
	text-align:center;
	margin:0 2px;
	font-weight:normal;
}


#navigation-bar li.navigation-item-on	{  }
#navigation-bar li.navigation-item-off	{  }


/* tab padding */
#navigation-bar li div div{
	border-right: 1px solid #fff;
	padding: 5px 18px;
	}
	
	#navigation-bar li.first-child div div {
		border:0;
	}
	


/* tab off side images */
#navigation-bar li.navigation-item-off div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
#navigation-bar li.navigation-item-off div.item-right-side	{ background:transparent url() no-repeat scroll right top; }


/* tab on side images */
#navigation-bar li.navigation-item-on div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
#navigation-bar li.navigation-item-on div.item-right-side	{ background:transparent url() no-repeat scroll right top; }


/* navigation bar links */
#navigation-bar li a:link,
#navigation-bar li a:visited,
#navigation-bar li a:hover,
#navigation-bar li a:active{ 
	color:#fff; 
	text-decoration:none;
}


#nav-checkout		{}
#nav-search			{}
#nav-basket			{}
#nav-account		{}
#nav-all-products	{}
#nav-storefront		{}


/*** Left Navigation ***/


#left-navigation {
    padding: 0 10px 10px;
    vertical-align: top;
    width: 220px;
}


/*** One Column Pages ***/
.one-column #left-navigation{ display:none; }
.one-column #main-content {width:940px; padding: 20px;}
#shipping-payment .form_row {text-align:left;}


#category-tree{
	background:#d5cea5 url() repeat-y scroll center top;
	padding: 0 20px;
}


#category-tree-top-image{ 
	width:219px;


	}
#category-tree-bottom-image{
	background: url(images/footer-bottom-bg.jpg) bottom no-repeat;
	padding-bottom: 35px;
	width:219;
}


#category-tree a{
	display:block;
	text-decoration:none;
	color:#73370c;
	font-size:12px;
}


#category-tree div{
	padding:5px  0;
	border-bottom:1px dotted #6b3410;
}


#category-tree .level-1 a{ 
	padding:4px 6px 4px 0; 
	background:transparent url() right no-repeat;
		
	
	}
#category-tree .level-2 a{ padding:4px 6px 4px 20px; }
#category-tree .level-3 a{ padding:4px 6px 4px 30px; }
#category-tree .level-4 a{ padding:4px 6px 4px 40px; }
#category-tree .level-5 a{ padding:4px 6px 4px 50px; }
#category-tree .level-6 a{ padding:4px 6px 4px 60px; }


#category-tree div.active{ }
#category-tree-header{	
	background: url(images/categoryTitle-bg.jpg) no-repeat scroll center top transparent;
	    height: 4px;
	    width: 219px;
	}


#category-tree-footer{
 	background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;
    height: 60px;
    padding: 80px 0 0 20px;
    width: 200px;
	margin-top:20px;
}


#category-tree-footer img{
	width:35px; height:35px;
	margin-left: 5px;
}


	#category-tree-footer img.social-icons-first {
		margin-left:25px;
	}
/*** Content ***/


#content-container{
	clear: both;
	margin: 0 auto;
	width: 960px;
	margin-top:10px;
}




#main-content { 
    padding-right: 10px;
	vertical-align: top;
	width: 690px;
}


/*** Global Header/Footer ***/


#global-header{
	background: url() no-repeat scroll center top transparent;
	height: 80px;
	padding-right: 10px;
	}




#logo{
	 padding: 20px 0 0 10px;
	height:51px;
	width:177px;
}


#logo a{
	background:url(images/logo.gif) no-repeat scroll left top transparent;
	cursor:pointer;
	display:block;
	height:51px;
	width:177px;
}


#search{
	float:right;
	padding:40px 0 4px 0;
}


#header-links{
	float:right;
	padding:40px 12px 0 0;
	line-height:22px;
	color:#ededed;
	text-align:right;
}
	#header-links a{
		color:#515151;
	}
#global-footer{ 
	border-top: 1px solid #BEB9B7;
	margin: 40px 0;
	padding-top: 20px;
	text-align: center;
	}


	
#footer-links a{
	color:#774d4e;
	}


#footer-links ul{
	font:.9em normal Verdana, Helvetica, Arial, sans-serif;
	margin:8px 0;
	padding:0;
}




#footer-links ul li{
	list-style-type:none;
	border-left:1px solid #646464;
	padding:0 2px 0 6px;
	margin:0;
	text-align:center;
	display:inline;
}


#footer-links ul li.first-child{ border:0; }
#global-footer #footer-links #footer-sitemap-link{ display:none; }


#miva-link{
	font-size:.8em;
	margin:16px 0;
}


#miva-link a{ color:#999999; }


#page-header{ clear:both; }
#page-footer{ clear:both; }


#maintenance{
	color:#dd0000;
	font-weight:bold;
}


/*** ACAD, ACED, AFAD, AFED, OCST ***/


.logout-link{
	margin:12px 10px;
	float:right;
}


#customer-fields label,
#affiliate-fields label{
    clear: both;
    float: left;
    padding: 2px 5px 3px 0;
    text-align: right;
    white-space: nowrap;
    width: 170px;
}


#affiliate-commissions label,
.OSEL .non-editable label{
	float:left;
	width:120px;
	font-weight:bold;
	text-align:right;
	padding:0 6px 0 0;
}


#customer-fields input.textfield,
#affiliate-fields input.textfield,
#tax-fields input,
#affiliate-commissions div.form_row div,
.non-editable div.form_row div{
	width:170px;
	margin:0 0 4px 0;
}


#affiliate-commissions div.form_row div{ float:left; }


#customer-fields select,
#affiliate-fields select{
	width:176px;
	margin:0 0 4px 0;
}


#login-details,
#affiliate-information{
	margin:0 0 16px 0;
}


#affiliate-commissions .form_row{ margin:0 0 8px 0; }


.AFAD #affiliate-fields{
	width:50%;
	margin:0 auto;
}


.AFED #affiliate-fields #affiliate-contact,
.AFED #affiliate-fields #affiliate-commissions{
	float:left;
	width:50%;
}


#affiliate-commissions .affiliate-code{
	width:230px !important;
}


#affiliate-commissions #affiliate-image{
	width:236px !important;
	overflow:auto;
}


#affiliate-terms{ margin-left:155px; }


#affiliate-fields .form_row div.non-editable{
	margin:0 0 8px 0;
	padding:2px 0 0 0;
}


.save-button,
.continue-button{
	clear:both;
	text-align:right;
	padding:24px 0 0 0;
}


.required{ font-weight:bold; }


h2.fields-heading{
	background-color:#68635f;
	color:#fff;
	margin:0 0 12px 0;
	padding:4px 4px 4px 12px;
}


.address2-label{ margin:0 0 14px 0; }


.controls{ 
	font:normal .7em Verdana, Helvetica, Arial, sans-serif;
	visibility:hidden;
}


#customer-fields .controls label{
	float:none;
}


#ship-to,
#bill-to{
	width:50%;
	float:left;
}


#ship-to h2 input.checkbox,
#bill-to h2 input.checkbox{
	margin:0 2px 0 12px;
	padding:0;
	width:13px;
	height:13px;
	overflow:hidden;
}


div.invalid input.textfield,
div.invalid select,
#tax-fields div.invalid input{
	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
}


div.invalid label{ color:#dd0000; }


.warning-message{
	padding:4px;
	text-align:center;
	width:60%;
	margin:0 auto;
	color:#dd0000;
}


#customer-fields.editable .form_row,
#affiliate-fields.editable .form_row{
	margin:0 0 6px 0;
	text-align:left;
}


#customer-fields.non-editable .form_row{
	margin:0 0 4px 0; 
	text-align:left;
}


#customer-fields.non-editable label,
#affiliate-fields.non-editable label{
	margin:0 0 0 30px;
	padding:0 4px 0 0;
	font-weight:bold;
	width:110px;
	text-align:right;
	float:left;
	clear:both;
	white-space:nowrap;
}


#customer-fields.non-editable .form_row div,
#affiliate-fields.non-editable .form_row div{
	float:left;
}


#update-record{
	clear:both;
	margin:24px 0 0 24px;
}


.tax-fields label{ font-weight:bold; }


/*** LOGN, AFCL, ORDL, ORHL ***/


.AFCL #main-content,
.LOGN #main-content, .ORHL #main-content{
	width:940px;


}


.ORHL #main-content{ }


.ORDL #main-content{ padding:28px 16px; }


.AFCL .section,
.LOGN .section{
		float:left;
		height:220px;
		width:49%;
		text-align:center;
	}




.ORDL .section{
	float:left;
	height:220px;
	width:33%;
}


.ORHL .lookup-section{ 
	float:left;
	height:220px;
	width:50%;
}


.ORHL .signin-section{
	float:left;
	height:220px;
	width:48%;
}
.lookup-section .form_row {}
.signin-section .form_row {}


.section h3,
.lookup-section h3,
.signin-section h3{
	text-align:center;
	padding-bottom:10px;
}


.form_row{ 
	margin:0 0 6px 0; 
	text-align:center;
	}


.LOGN label,
.ORDL label,
.AFCL label{
	clear:both;
	width:80px;
	padding:3px 5px;
}


.ORHL label{ 
	clear:both;
	padding:3px 5px;
	text-align:right;
	white-space:nowrap;
	width:90px;
}


.grey-border-right{ border-right:1px solid #cccccc; }


.logn-input{ width:120px; }


#invalid-key{
	width:23px;
	float:left;
	margin:0 4px 0 0;
	border-width:1px;
	border-style:solid;
	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
}


.sign-in-buttons{ 
	text-align:center;
	margin:12px 0 0 0;
}


.forgot-password{ 
	font-size:.9em; 
	text-align:center;
	margin:12px 0 0 0;
}


/*** BASK, OCST, OPAY, OSEL ***/


#basket-contents.non-editable,
#basket-contents.editable,
#order-contents table{
	width:100%;
	border-left:1px solid #d6d6d6;
	border-top:1px solid #d6d6d6;
	margin-top:10px;
}


#basket-contents.non-editable table,
#basket-contents.editable table,
#order-contents table{
	border-collapse:collapse;
	width:100%;
	color:#000;
}


#basket-contents.non-editable td,
#basket-contents.editable td,
#order-contents td{
	background-color:#fff;
	border-bottom:1px solid #d6d6d6;
	border-right:1px solid #d6d6d6;
	vertical-align:top;
	padding:6px;
	font:normal 1em Arial;
}


#basket-contents table tr.basket-heading td,
#basket-contents table tr.basket-heading td,
#order-contents table tr.heading td{
	background-color:#68635f;
	color:#fff;
	font-weight:bold;
	text-align:center;
	font-size:1em;
	white-space:nowrap;
}


#basket-contents .basket-qty-input{ width:34px; }


#basket-contents .item-remove{
	width:8%;
	vertical-align:middle;
}


#basket-contents table .basket-heading td.item-name{
	text-align:left;
}


#basket-contents.editable .item-quantity{
	width:13%;
	text-align:center;
	white-space:nowrap;
}


#basket-contents.non-editable .item-quantity{
	width:6%;
	text-align:center;
}


#basket-contents .item-options .item-name{ padding-left:16px; }


#basket-contents.non-editable .item-name{ width:59%; }
#basket-contents.editable .item-name	{ width:66%; }


#basket-contents td.item-name{ text-align:left; }


#basket-contents .item-price{
	width:10%;
	text-align:right;
	white-space:nowrap;
}


#basket-contents .item-total{
	width:10%;
	text-align:right;
}


#basket-contents .basket-charges .charge-description,
#basket-contents .basket-charges .formatted-charge{
	font-style:italic;
	text-align:right;
	white-space:nowrap;
}




#basket-contents #basket-totals .formatted-total,
#basket-contents #basket-totals .total-prompt{
	font-weight:bold;
	text-align:right;
}


#basket-contents .item-options td{}


.checkout .item-quantity	{ width:8% !important; }
.checkout .item-name		{ width:64% !important; }


#fields-key{ margin:16px 0; }


.checkout-button{
	margin:12px 10px;
	text-align:right;
}


#payment-fields input{
	border-width:1px;
	border-style:solid;
	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
	padding:1px 2px;
	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
}


#payment-fields label{
	white-space:nowrap;
	text-align:left;
	padding:3px 5px 3px 0;
	clear:both;
	margin:2px 0 0 0;
}


#payment-fields td{
	padding:0 0 6px 0;
}


#shipping-payment .form_row{ margin:10px 0 0 0; }


#shipping-payment label{
	float:left;
	width:65px;
	white-space:nowrap;
	text-align:left;
	padding:3px 5px 3px 0;
	clear:both;
	margin:2px 0 0 0; 
}


.OSEL .continue-button,
.OPAY .continue-button{ 
	margin:0 0 12px 0;
}


.OCST #basket-contents{ margin: 0 0 32px 0; }


.OPAY .fields-key{ margin:0 0 16px 0; }
#payment-fields .form_row{ margin:10px 0 0 0; }


#customer-fields.non-editable{ margin:0 0 32px 0; }
#basket-contents.non-editable{ margin:16px 0 32px 0; }


/*** CTGY, SRCH, PLST, OUS1, OUSM ***/


.categoy-listing,
.all-products,
.related-products,
.search-results{
	clear:both;
}


.product-item{
	float:left;
	padding:0 9px 20px;
	width:215px !important;
}


.product-item .padding{
	background-color:#fff;
	height:300px;
	overflow:hidden;
	padding:20px 10px;
	text-align:center;
	color:#484848;
	border:#dbd9b5 1px solid;
}
		
.product-next-previous{ 
	clear:both;
	margin:12px 0; 
}


.CTGY .product-details,
.PLST .product-details,
.SRCH .product-details{
    	overflow: hidden;
	text-align:center;
	color:#493933;
	padding:0;
	margin:0;
}


.product-item .product-thumbnail{ 
	margin:0 0 12px 0; 
	text-align:center;
}


.product-item .product-thumbnail img{
	max-width:150px; height:150px;
}


.purchase-buttons{
	text-align:center;
	margin:16px 0 0 0;
}


.purchase-buttons input.button{
		margin:0 0 0 17px;
		padding:5px;
		float:left;
}


.line-item td.item-buttons{
	white-space:nowrap;
}


.line-item tr.header-row td{ font-weight:bold; }


.thumbnail-not-available{
	display:block;
	width:110px;
	height:110px;
	background:transparent url() no-repeat scroll left top;
	margin:0 auto;
}


.image-not-available{
	display:block;
	background:transparent url() no-repeat scroll left top;
}


.next-previous{ margin:12px 0 0 0; }


.next-button	{ float:right; }
.previous-button{ float:left; }


.search-again{ margin:0 3px 10px; }


.OUS1 #main-content{
	padding-left:225px;
	padding-right:225px;
}


.upsale-heading{ text-align:center; }


.OUS1 .product-thumbnail{
     float: left;
    height: 300px;
    max-width: 300px;
    text-align: center;
	padding:0 20px 0 0;
}


.OUS1 .product-description		{ margin:16px 0 0 0; }
.OUS1 .thumbnail-not-available	{ margin:16px auto; }


.OUSM #main-content{ 
	padding-left:160px;
	padding-right:160px;
}


.upsale-batch{
	width:100%;
	padding:2px;
}


.upsale-batch .heading td	{ font-weight:bold; }


.upsale-checkbox{ width:32px; }
.upsale-name{ width:175px; }


.OUS1 .purchase-buttons textarea{
	text-align:center;
	width:390px;
	height:100px;
}


.OUSM .continue-button{ text-align:center; }


.line-item table{ width:100%; margin-bottom:30px;}
.line-item table tr.heading td{ font-weight:bold; }
.line-item table td{ 
	padding:10px;
	border: 1px solid #ddd;
}
.item-buttons input.button {
	float: left;
    margin: 0 0 0 5px;
    padding: 5px;
	}
.line-item .item-name{ width:30%; }
.line-item tr.alt_row{ background-color:#f0f0f0; }


/*** PRODUCT DISPLAY ***/


.product-details-1{
	width:48%;
	float:left;
}
	.product-details-1 p{
		text-align:center;
	}
.product-details-2{
	width:48%;
	float:right;
}


.product-details-2 .purchase-buttons {
	margin:16px 0;
	text-align:left;
	width:200px;
	}
	.product-details-2 .purchase-buttons .button {
		font-size:17px;
		height:39px;
		margin:10px 0 0;
		text-shadow:2px 2px 2px #496E92;
		width:140px;
		}	
	.product-image{ 		
			max-width:300px;
			margin:0 20px;
			text-align:center;


	 }


	.product-image img{
		max-width:300px; 
		max-height:300px;
		}


.product-quantity-input{
	margin:0 4px;
	overflow:auto;
	width:34px;
	text-align:left;
	
}


.related-products{
	clear:both;
	margin:32px 0 16px 0;
}


.product-attributes{
	margin:16px 0;
	text-align:left;
}


.product-attributes td{
	padding:4px 0;
}


.product-attributes td.prompt{
	vertical-align:top;
	text-align:left;
	padding-right:5px;
}


.product-attributes td.field{
	text-align:left;
}


/*** INVC ***/


.INVC .order-id,
.ORDS .order-id{
	float:left;
	font-weight:bold;
}


.INVC .order-date,
.ORDS .order-date{
	float:right;
	text-align:right;
}


.INVC .order-date span,
.ORDS .order-date span{
	font-weight:bold; 
}


.INVC h3,
.ORDS h3{ 
	clear:both;
	margin:16px 0 24px 0;
}


/*** PATR ***/


.PATR .continue-button{
	text-align:right;
	margin:12px 0;
}


/*** SMAP ***/


.SMAP h3{
	
}


.SMAP .category{
	width:33%;
	text-align:left;
	float:left;
}


.SMAP .category .padding{
	padding:2px;
}


.SMAP .product{
	width:33%;
	text-align:left;
	float:left;
}


.SMAP .product .padding{ padding:2px; }


/*** ORDH, ORDS ***/


#orderhistory-list table{ border-collapse:collapse; }


#order-contents table{
	width:100%;
}


#order-contents table td, 
#orderhistory-list table td{ 
	vertical-align:top;
}


#orderhistory-list .order-reorder		{ text-align:center; }
#orderhistory-list .order-invoice		{  }
#orderhistory-list .order-description	{ text-align:left; }
#orderhistory-list .order-date			{  }
#orderhistory-list .order-purchased		{ text-align:center; }
#orderhistory-list .order-quantity		{ text-align:center; }
#orderhistory-list .order-status		{ text-align:center; }
#orderhistory-list .order-tracking		{ text-align:left; }
#orderhistory-list .order-total			{ text-align:right; }
#orderhistory-list .order-price			{ text-align:right; }
#orderhistory-list .order-view			{ 
	vertical-align:middle;
	padding:0 8px;
}


#orderhistory-list tr.heading td { 
	font-weight:bold;
	white-space:nowrap;
}


#order-contents table tr td.order-reorder		{ text-align:center; }
#order-contents table tr td.order-invoice		{  }
#order-contents table tr td.order-description	{ text-align:left; }
#order-contents table tr td.order-date			{ text-align:left }
#order-contents table tr td.order-purchased		{ text-align:center; }
#order-contents table tr td.order-quantity		{ text-align:center; }
#order-contents table tr td.order-status		{ text-align:left; }
#order-contents table tr td.order-tracking		{ text-align:left; }
#order-contents table tr td.order-total			{ text-align:right; }
#order-contents table tr td.order-price			{ text-align:right; }


#order-contents table tr td.charge-description,
#order-contents table tr td.charge-fee{
	font-style:italic;
	text-align:right;
}


#order-contents table tr td.charge-fee{ text-align:right; }
#order-contents table tr td.formatted-total,
#order-contents table tr td.total-prompt{
	text-align:right;
	font-weight:bold;
}


#customer-fields{
	margin:16px 0;
}


#Order_BillZip{ width:44px; }


.widest{ width:100%; }




/**** Homepage Elements *****/


/**** body.SFNT #left-navigation {display:none;} *****/
body.SFNT #main-content {padding-bottom:20px; width:698px;}
body.SFNT #main-content h1, body.SFNT #main-content h2, body.SFNT #main-content h3 {margin-left:20px;}
                            
#header {                   
	background: url(images/header.jpg) no-repeat scroll center top transparent;
    height: 283px;
	width:700px;
	}
	#header a {
		position:absolute;
		width:700px; height:283px;
		}
	#header a span{
		display:none;
		}	


#free-shipping {
	background: url(images/shipping-banner.jpg) no-repeat scroll center top transparent;
	    display: inline;
	    float: left;
	    height: 62px;
	    margin: 20px 0 10px;
	    width: 700px;
	}
	#free-shipping a {
		position:absolute;
		width:940px; height:46px;
		}
	#free-shipping a span{
		display:none;
		}	
	
	
#left-ad {
	background:transparent url(images/left-ad.jpg) top no-repeat;
	width:460px; height:132px;
	padding-bottom:20px;
	margin-top:20px;
	float:left;
	}
	#left-ad a {
		position:absolute;
		width:460px; height:132px;
		}
	#left-ad a span{
		display:none;
		}
		
		#right-ad {
			background:transparent url(images/right-ad.jpg) top no-repeat;
			width:460px; height:132px;
			padding-bottom:20px;
			float:right;
			margin-top:20px;
			}
			#right-ad a {
				position:absolute;
				width:460px; height:132px;
				}
			#right-ad a span{
				display:none;
				}
/*---- welcome banner ----*/
	#welcome-banner {
		background: url(images/welcome-bg.jpg) no-repeat scroll left top transparent;
	    display: inline;
	    float: left;
	    height: 93px;
	    margin: 15px 0 0;
	    padding: 60px 0 0 20px;
	    width: 680px;
		}


		
		#welcome-banner h1{
				color: #523F29;
				margin:0;
				padding:0;
				}
		 #welcome-banner p {
			color:#6e6e6e;
			width: 460px;
			margin-top:10px;
		}
		#welcome-banner a {
			color:#FFF;
			text-decoration: underline;
			margin-top:10px;
			padding:0 20px 10px 20px;
		}
/*---- end welcome banner ----*/
		




/*---- end newsletter ----*/
		#social-media {
		 	background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;
		   display: inline;
		   float: left;
		   height: 162px;
		   margin: 15px 0 0 20px;
		   width: 220px;
		}
			
			#social-media .social-icons {
				display: inline;
			    float: left;
			    margin: 55px 0 0 17px;
				padding:0;
			}
/*---- end newsletter ----*/




/*---- sub pages ----*/
	#main-content h1 {
		margin:20px 0 20px 10px;
		color:#FFFv;
	}




	/*----- image machine css ----*/




	.thumbnails{
	 	display: block;
		margin: 0 0 0 60px;
		padding: 0;
		width: 230px;
		}


		.thumbnails li{
			display:block;
			float:left;
			margin:5px 5px 0 0;
			padding:0;
			width:50px;
			height:50px;
			text-align:center;
			border:1px solid #eeeeee;
			cursor:pointer;
			}


		.thumbnails li span{
			display:inline-block;
			height:100%;
			text-align:center;
			vertical-align:middle;
			}


		.thumbnails li img{
			vertical-align:middle;
			}


	.swatches{
		display:inline;
		margin:0;
		padding:0;
		}


		.swatches li{
			display:block;
			float:left;
			margin:4px 4px 0 0;
			padding:0;
			width:50px;
			height:50px;
			text-align:center;
			border:1px solid #eeeeee;
			cursor:pointer;
			}


		.swatches li span{
			display:inline-block;
			height:100%;
			text-align:center;
			vertical-align:middle;
			}


		.swatches li img{
			vertical-align:middle;
			}


	.product-image-margin{
		height:8px;
		}


		.closeup {


		   position:absolute;
		   top:150px;
		   padding:15px;
		   background:#fff;
		   border:3px solid #eaeaea;
		   text-align:center;
		   display:none;
		   z-index:9999;
		   min-width:274px;
		   min-height:274px;
		   border-radius:5px; 
		   -moz-border-radius:5px;
		   -webkit-border-radius:5px;
		   box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
		   -moz-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
		   -webkit-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
		}


		.closeup a {
		   cursor:pointer;
		   position:absolute;
		  right: -15px;
		    top: -15px;
		   z-index:9999;
		   color:#ff0000;
		}


		#closeup-caption {
		   margin:15px 15px 0;
		   padding:5px;
		   font:bold 14px Arial, Helvetica, sans-serif;
		   color:#fff;
		   background:#666;
		   -moz-border-radius:5px;
		   -webkit-border-radius:5px;
		   box-shadow:rgba(255,255,255, 0.75) 0px 0px 25px;
		   display:none;
		}
		.closeup_backing {
		   position:absolute;
		   left:0px;
		   top:0px;
		   background:#000;
		   background:rgba(0,0,0,.6);
		   filter:alpha(opacity=60);
		   width:100%;
		   z-index:100;
		}
		.CTGY .product-details .product-name,
		.PLST .product-details .product-name,
		.SRCH .product-details .product-name{
				height: 3em;
    				line-height: 1.5em;
    				overflow: hidden;
}


#breadcrumbs li{
float:left;
margin-right:10px;
}		


#filter-items-container
{
    color: #434343;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#filter-items-container .per-page
{
    position: relative;
    float:left;
    padding: 0 5px;
    margin-right: 5px;
    height: 22px;
    line-height: 20px;
}
#filter-items-container .per-page label
{
    margin-right: 3px;
}
#filter-items-container .per-page select
{
    padding: 0;
}
#filter-items-container .sorting
{
    position: relative;
    float:left;
    padding: 0 5px;
    height: 22px;
    line-height: 20px;
}
#filter-items-container .sorting label
{
    margin-right: 3px;
}
#filter-items-container .sorting select
{
    padding: 0;
    font-size: 11px;
}




.page-links-previous, .page-links-next
{
    text-decoration: none;
    line-height: 20px;
    padding: 0 8px;
    white-space: nowrap;
    font-weight: bold;
}
.page-links-previous
{
    float: left;
    text-align: right;
}
.page-links-next
{
    float: right;
    text-align: left;
}
.page-links-inactive
{
    text-decoration: none;
    padding: 2px 3px;
}
.page-links-active
{
    color: #434343;
    border-bottom: 2px solid #434343;
    font-weight: bold;
    text-decoration: none;
    padding: 1px 3px;
}
.page-links-deactivated
{
    color: #999;
    text-decoration: none;
}
.page-links-deactivated:hover
{
    color: #999;
    text-decoration: none;
    background: none;
}
.page-disp {
    display: block;
    line-height: 20px;
    float: left;
    text-align: center;
}
.page-links, .page-links a
{
    color: #434343;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
    .page-links
    {
        margin: 0px;
        text-align: right;
        float: right;
    }
    
.page-links-container
{
    text-decoration: none;
    display:block;
    float: right;
}
.page-links-title
{
    margin-top: 3px;
    position: relative;
    display:block;
    float:left;
}


.CTGY .product-details .product-name A:hover,
.PLST .product-details .product-name A:hover,
.SRCH .product-details .product-name A:hover {
height: 3em;
line-height: 1.5em;
overflow: hidden;
}

#global-mini-basket-container{
	display: block;
	float: right;
	line-height: 22px;
	padding: 4px 3px 0px 0px;
}


#global-mini-basket-hover-content
{
	display: none;
	float: left;
	z-index:10;
	position: absolute;
	min-width: 250px;
	max-width: 410px;
	background: #FFF;
}


#global-mini-basket-hover-content table
{
	display: table;
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid #666;
	background: #FFF;
}


#global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
{
	color: #FFF;
	padding: 5px;
	font-weight: bold;
	font-size: 13px;
	background: #666;
}


#global-mini-basket-hover-content table tbody td
{
	padding: 3px 5px;
	line-height: 14px;
	color: #000000;
}


#global-mini-basket-hover-content table tbody tr.on td
{
	background: #EEE;
}


#global-mini-basket-hover-content table thead th a
{
	color: #FFF;
}


#mini-basket 
{
	line-height: 2px;
}


.minibasket_backing
{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}


#global-mini-basket-hover-content .on a:link 
{
  color: #000;
}

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Good morning (I am assuming) Chris,

It looks like the extra lines are coming from your navigation CSS (specifically this one: "#navigation-bar li div div"). The problem is that this class applies to all sub-divs of your navigation-bar element that are within an li + div. The smaller right border is due to the <div style="clear: both;"></div> element, and the other weird right border seems to be coming from the mini-basket div element. I'd suggest instead of having the "#navigation-bar li div div" style, assign a class name to all the navigation elements that you actually want a border on, that way it doesn't apply to elements outside of that scope.

Also, since the Basket Contents link is dynamic in its width, I'd suggest (strongly, since it will break how your navigation looks) that you change the width of your navigation-item ul to be auto, the navigation item itself to have a text-align center (which means you could remove the margin: 0 auto; on your ul), make your li "navigation-item-on" class elements NOT float right (which means you will have to reverse the order). This will allow for the width to grow as needed, while still maintaining a center alignment of the navigation. Just a suggestion. Do notice, however, that without adjusting how the width of your navigation bar is set, your home button will be dropped down a line and not visible if you have even a single product in your basket.

So, to sum up, I'd:

1. Change the "#navigation-bar li div div" to be ".item-right-side" (which seems to be what the right border is supposed to be on anyway)
2. Fix the width restriction on the navigation-bar
3. Remove the float: right on the li elements (you may need to add "display: inline-block;" to the class as well)
4. Update the styling of the mini basket to match your store :)

Let me know if anything is unclear or you'd like further clarification. Hope you're having a wonderful day.

--Ryan

I'm still having trouble on my site with the link for the mini-basket. As you'll see if you visit www.baptist-books.com there are two pipe style characters following the mini-basket link. I have already remove the "Miva >> mini-basket tab >> advanced mode and delete <span class="grey">|</span>" code, but the pipe characters still remain. What am I missing? I'll include the code below.

Mini-Basket Code

<div id="mini-basket">    <a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" id="global-mini-basket-link">Basket<mvt:if expr="NOT l.settings:global_minibasket:empty"> Contents (&mvte:global_minibasket:basket_count;)</mvt:if></a>
    <mvt:if expr="NOT l.settings:global_minibasket:empty">
    <div style="clear: both;"></div>
    <div id="global-mini-basket-hover-content">
    <table width="100%">
        <thead>
            <tr>
                <th colspan="2" align="left">Basket Summary</th>
                <th colspan="2" align="right"><a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;">Basket</a><mvt:if expr="l.settings:global_minibasket:orderminimum_met"> / <a href="&mvt:global:secure_sessionurl;Screen=OINF&amp;Store_Code=&mvta:store:code;">Checkout</a></mvt:if></th>
            </tr>
        </thead>
        <tbody>
            <mvt:foreach iterator="item" array="global_minibasket:items">
            <mvt:if expr="(pos1-1) MOD 2 EQ 0 or pos1 EQ 1"><tr class="on"><mvt:else><tr></mvt:if>
                <td nowrap align="center" valign="middle">
                    <form method="post" action="&mvt:global:sessionurl;Screen=BASK">
                        <input type="hidden" name="Action" value="RPRD" />
                        <input type="hidden" name="Store_Code" value="&mvte:store:code;" />
                        <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
                        <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                        <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                        <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                        <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                        <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
                        <mvt:item name="buttons" param="Remove" />
                    </form>
                </td>
                <td colspan="2" width="100%" align="left">
                    <b><a href="&mvt:global:sessionurl;Screen=PROD&amp;Store_Code=&mvta:store:code;&amp;Product_Code=&mvta:item:code;">&mvt:item:name;</a></b><br />
                    Code: &mvt:item:code;<br />
                    Quantity: &mvte:item:quantity;
                    <mvt:foreach iterator="option" array="item:options">
                        <br />
                        <mvt:if expr="l.settings:option:option_id">
                        &mvt:option:attr_code;: &mvt:option:opt_code;
                        <mvt:elseif expr="NOT ISNULL l.settings:option:data">
                        &mvt:option:attr_code;: &mvt:option:data;
                        <mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
                        &mvt:option:attr_code;: &mvt:option:data_long;
                        <mvt:else>
                        &mvt:option:attr_code;
                        </mvt:if>
                    </mvt:foreach>
                </td>
                <td nowrap align="right" valign="middle">
                    <b>&mvt:item:formatted_subtotal_comprehensive;</b>
                </td>
            </tr>
            </mvt:foreach>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4" align="right">Basket Total: &mvt:global_minibasket:formatted_total;</td>
            </tr>
        </tfoot>
    </table>
    </div>
    </mvt:if>


<script type="text/javascript">
    function MiniBasket()
    {
        var self = this;


        this.content_container      = document.getElementById( 'global-mini-basket-hover-content' );
        this.display_link           = document.getElementById( 'global-mini-basket-link' );
        this.minibasket_backing     = document.createElement( 'div' );
        
        if ( this.content_container )
        {
            this.minibasket_backing.className = 'minibasket_backing';


            document.getElementsByTagName( 'body' )[ 0 ].insertBefore( this.minibasket_backing, document.getElementsByTagName( 'body' )[ 0 ].firstChild );


            if ( this.display_link )        this.display_link.onclick       = function() { ( ( self.content_container.style.display == 'none' ) ? self.Show() : self.Hide() ); return false; }
            if ( this.minibasket_backing )  this.minibasket_backing.onclick = function() { self.Hide(); return false; }


            this.content_container.style.display = 'none';
        }
    }


    MiniBasket.prototype.Show = function()
    {
        var self = this;
        
        window.onresize = function() { self.Resize(); }
        
        this.content_container.style.display  = 'block';
        this.minibasket_backing.style.display = 'inline';
        
        if ( document.documentElement.clientHeight > document.body.scrollHeight )
        {
            this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
        }
        else
        {
            this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
        }
    }


    MiniBasket.prototype.Hide = function()
    {
        this.content_container.style.display  = 'none';
        this.minibasket_backing.style.display = 'none';


        window.onresize = null;
    }


    MiniBasket.prototype.Resize = function()
    {
        if ( document.documentElement.clientHeight > document.body.scrollHeight )
        {
            this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
        }
        else
        {
            this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
        }
    }


    var minibasket = new MiniBasket();
</script>

</div>

Mini-Basket CSS

#global-mini-basket-container{
    display: block;
    float: right;
    line-height: 22px;
    padding: 4px 3px 0px 0px;
}


#global-mini-basket-hover-content
{
    display: none;
    float: left;
    z-index:10;
    position: absolute;
    min-width: 250px;
    max-width: 410px;
    background: #FFF;
}


#global-mini-basket-hover-content table
{
    display: table;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid #666;
    background: #FFF;
}


#global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
{
    color: #FFF;
    padding: 5px;
    font-weight: bold;
    font-size: 13px;
    background: #666;
}


#global-mini-basket-hover-content table tbody td
{
    padding: 3px 5px;
    line-height: 14px;
    color: #000000;
}


#global-mini-basket-hover-content table tbody tr.on td
{
    background: #EEE;
}


#global-mini-basket-hover-content table thead th a
{
    color: #FFF;
}


#mini-basket 
{
    line-height: 2px;
}


.minibasket_backing
{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

[chrisgable]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I'm still having trouble on my site with the link for the mini-basket. As you'll see if you visit www.baptist-books.com there are two pipe style characters following the mini-basket link. I have already remove the "Miva >> mini-basket tab >> advanced mode and delete <span class="grey">|</span>" code, but the pipe characters still remain. What am I missing? I'll include the code below.

Mini-Basket Code

<div id="mini-basket">	<a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" id="global-mini-basket-link">Basket<mvt:if expr="NOT l.settings:global_minibasket:empty"> Contents (&mvte:global_minibasket:basket_count;)</mvt:if></a>
	<mvt:if expr="NOT l.settings:global_minibasket:empty">
	<div style="clear: both;"></div>
	<div id="global-mini-basket-hover-content">
	<table width="100%">
		<thead>
			<tr>
				<th colspan="2" align="left">Basket Summary</th>
				<th colspan="2" align="right"><a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;">Basket</a><mvt:if expr="l.settings:global_minibasket:orderminimum_met"> / <a href="&mvt:global:secure_sessionurl;Screen=OINF&amp;Store_Code=&mvta:store:code;">Checkout</a></mvt:if></th>
			</tr>
		</thead>
		<tbody>
			<mvt:foreach iterator="item" array="global_minibasket:items">
			<mvt:if expr="(pos1-1) MOD 2 EQ 0 or pos1 EQ 1"><tr class="on"><mvt:else><tr></mvt:if>
				<td nowrap align="center" valign="middle">
					<form method="post" action="&mvt:global:sessionurl;Screen=BASK">
						<input type="hidden" name="Action" value="RPRD" />
						<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
						<input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
						<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
						<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
						<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
						<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
						<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
						<mvt:item name="buttons" param="Remove" />
					</form>
				</td>
				<td colspan="2" width="100%" align="left">
					<b><a href="&mvt:global:sessionurl;Screen=PROD&amp;Store_Code=&mvta:store:code;&amp;Product_Code=&mvta:item:code;">&mvt:item:name;</a></b><br />
					Code: &mvt:item:code;<br />
					Quantity: &mvte:item:quantity;
					<mvt:foreach iterator="option" array="item:options">
						<br />
						<mvt:if expr="l.settings:option:option_id">
						&mvt:option:attr_code;: &mvt:option:opt_code;
						<mvt:elseif expr="NOT ISNULL l.settings:option:data">
						&mvt:option:attr_code;: &mvt:option:data;
						<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
						&mvt:option:attr_code;: &mvt:option:data_long;
						<mvt:else>
						&mvt:option:attr_code;
						</mvt:if>
					</mvt:foreach>
				</td>
				<td nowrap align="right" valign="middle">
					<b>&mvt:item:formatted_subtotal_comprehensive;</b>
				</td>
			</tr>
			</mvt:foreach>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4" align="right">Basket Total: &mvt:global_minibasket:formatted_total;</td>
			</tr>
		</tfoot>
	</table>
	</div>
	</mvt:if>


<script type="text/javascript">
	function MiniBasket()
	{
		var self = this;


		this.content_container      = document.getElementById( 'global-mini-basket-hover-content' );
		this.display_link           = document.getElementById( 'global-mini-basket-link' );
		this.minibasket_backing     = document.createElement( 'div' );
		
		if ( this.content_container )
		{
			this.minibasket_backing.className = 'minibasket_backing';


			document.getElementsByTagName( 'body' )[ 0 ].insertBefore( this.minibasket_backing, document.getElementsByTagName( 'body' )[ 0 ].firstChild );


			if ( this.display_link )        this.display_link.onclick       = function() { ( ( self.content_container.style.display == 'none' ) ? self.Show() : self.Hide() ); return false; }
			if ( this.minibasket_backing )  this.minibasket_backing.onclick = function() { self.Hide(); return false; }


			this.content_container.style.display = 'none';
		}
	}


	MiniBasket.prototype.Show = function()
	{
		var self = this;
		
		window.onresize = function() { self.Resize(); }
		
		this.content_container.style.display  = 'block';
		this.minibasket_backing.style.display = 'inline';
		
		if ( document.documentElement.clientHeight > document.body.scrollHeight )
		{
			this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
		}
		else
		{
			this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
		}
	}


	MiniBasket.prototype.Hide = function()
	{
		this.content_container.style.display  = 'none';
		this.minibasket_backing.style.display = 'none';


		window.onresize = null;
	}


	MiniBasket.prototype.Resize = function()
	{
		if ( document.documentElement.clientHeight > document.body.scrollHeight )
		{
			this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
		}
		else
		{
			this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
		}
	}


	var minibasket = new MiniBasket();
</script>

</div>

Mini-Basket CSS

#global-mini-basket-container{
	display: block;
	float: right;
	line-height: 22px;
	padding: 4px 3px 0px 0px;
}


#global-mini-basket-hover-content
{
	display: none;
	float: left;
	z-index:10;
	position: absolute;
	min-width: 250px;
	max-width: 410px;
	background: #FFF;
}


#global-mini-basket-hover-content table
{
	display: table;
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid #666;
	background: #FFF;
}


#global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
{
	color: #FFF;
	padding: 5px;
	font-weight: bold;
	font-size: 13px;
	background: #666;
}


#global-mini-basket-hover-content table tbody td
{
	padding: 3px 5px;
	line-height: 14px;
	color: #000000;
}


#global-mini-basket-hover-content table tbody tr.on td
{
	background: #EEE;
}


#global-mini-basket-hover-content table thead th a
{
	color: #FFF;
}


#mini-basket 
{
	line-height: 2px;
}


.minibasket_backing
{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}

[lesliekirk]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I can't seem to find the necessary template changes for the ACAD and the ACED to be able to use the email address instead of the username anywhere. Is this going to generate the changes needed to code for these two screens?

Password Reauthentication Enabling:
To require customers to enter their current password when changing email address or password, use the following steps:

1. In the administration interface, click on the Customers link from left navigation
2. Click the Settings tab
3. Check the box next to “Require Customers to Reauthenticate when Changing Passwords"
4. Click Update to save the changes

Now, when a customer attempts to change their password or email address, they will be required to enter their current password as a security precaution. This setting is left off by default on upgraded stores, and turned on by default in new stores

NOTE* If you enable this setting, you will need to update the customer fields template to account for the new reauthentication requirement. Please continue reading the next section below (Changing the Page Template) to make these template changes.

Changing the Page Template:
There are now five different templates for the Customer Fields template (which can be found on such pages as ACAD and ACED):

1. Checkout: Display-Only
2. Checkout: Editable
3. Customer: Legacy Add/Edit
4. Customer: Add
5. Customer: Edit

Checkout: Display-Only – Generates code that will display the non-editable customer fields only (used during the checkout process)
Checkout: Editable – Generates code that will display editable customerfields (used during the checkout process)
Customer: Legacy Add/Edit – Generates code that looks the same as the pre-PR8 Update 7 version of the Customer Add and Edit pages
Customer: Add – Generates code for the new Customer Add template (Removes the Login field as the email address is now used by default as the login)
Customer: Edit – Generates code for the new Customer Edit template (Removes the Email Address, Login, and Password fields, which are now changed through their own specific pages)

Ideal settings with the new customer changes would be “Customer: Add” on page ACAD, and “Customer: Edit” on page ACED, although the “Customer: Legacy Add/Edit” will work with the new Reauthentication setting

If you created your store before updating to Update 7 and you have reauthentication enabled, you must first update the ACED template before the reauthentication will work. If you do not, your customers will not be able to update their credentials!

[jsdva]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I'm having trouble with the ACRT, CPWD, FPWD and CEML pages not formatting correctly. We get duplicate top nav and cat trees that ruins the format. I've added the CSS above, but it doesn't fix the issues.

ACRT calls for <body class="&mvte:page:code;">
CPWD calls for <body class="CPWD one-column">
FPWD calls for <body class="FPWD one-column">CEML calls for <body class="CEML one-column">

none are in the css above. I can't figure out what I'm missing - but at least I'm consistently missing it!

https://www.2collectcola.com/FPWD.html
https://www.2collectcola.com/CEML.html
https://www.2collectcola.com/CPWD.html
https://www.2collectcola.com/ACRT.html

Help would be most appreciated!

Firefox looks fine, but it is very kind. IE 9/8/7 on the other hand is cutting off your header content and top nav. You have some real issues with your code though, so if you clean up that code, it may straighten itself out. http://validator.w3.org/

Hope this helps,

Jamie

[Gene->]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

The following posts will contain documentation on:

1. Mini-Basket
2. Shipping Estimate
3. Customer Template/CSS/Settings Changes
   1. Password Reauthentication Setting
   2. Customer Fields templates for pages ACAD/ACED
   3. Template changes to pages ACLN, LOGN, ORHL, and ORDL.
   4. CSS changes
   
   

Mini-Basket Documentation:
Note* MiniBasket will add its own CSS file during installation. In cssui, this file will be placed in the store's folder location. In MMUI stores (including MMUI with the css_fw Framework installed), the css file will be placed in the root directory.

1. In the Administration interface, click on the Utilities link from left navigation
2. Check the box next to Mini-Basket
3. Click Update to save the changes
4. Click the Pages link from left navigation
5. Click the Items tab
6. Edit the “global_minibasket” item
7. Assign the “global_minibasket” item to all the pages you wish it to appear on
8. Click on your store name link from left navigation
9. Click on tab Mini-Basket
10. Here, you can choose to limit the product name length, edit the template (using Advanced Mode), or elect to use image types if your store uses them.
11. Before the Mini-Basket will display in runtime, you must assign the global_minibasket item to your page template. Insert '<mvt:item name="global_minibasket">' into an appropriate template after assigning the item to the page in use. Good locations include: Global Header, Navigation Bar, or Category Tree (depending on your store's layout). You may wish to alter the css styles in the minibask.css file to match your store's layout/styling. </mvt:item>

Shipping Estimate Documentation:

1. In the Administration interface, click on the Utilities link from left navigation
2. Check the box next to Shipping Estimate
3. Click Update to save the changes
4. A new page will have been created SERT: Shipping Estimate Rates. This page is used to display the rates once the calculate shipping button is checked (explained later)
5. Click the Pages link from left navigation
6. Click the Items tab
7. Assign the “shipestimate” item (not the “shipestimate_rates” item) to the page you wish to display rates, such as the PROD or BASK pages
8. Edit the page you assigned the shipestimate item to
9. Insert the shipestimate item into the template code (for example, on the PROD page, you can insert <mvt:item name="shipestimate"> right after <mvt:item name="product_display">) and click update</mvt:item></mvt:item>
10. Click on the Shipping Estimate tab
11. If on a page that uses the product item (and a product is actually passed to that page), you can change the mode to “Single Product”, and it will show shipping rates for just the single product in a single quantity. If shipping to multiple countries, use the multiple select to enable the countries you ship to (using control-click or shift-click to highlight multiples) You may also change the template code using advanced mode if you need to change the template. NOTE* If the mode is set to “Single Product” and a product is NOT passed, the fallback will use the “Entire Basket” setting as a backup.
12. The Results Display setting will allow the shipping rates to display in either a new popup window, or in the same element as the popup dialog on the page.
13. In runtime, view your page that has the shipestimate item assigned
14. Click the Estimate Shipping link – a new dialog will show up where you can enter the shipping address. NOTE* Without shipping methods enabled, or if no shipping rates are returned, a default “Unable to estimate shipping rates, please check your address and try again” message will be returned. This can be changed by editing the SERT page template code

Password Reauthentication Enabling:
To require customers to enter their current password when changing email address or password, use the following steps:

1. In the administration interface, click on the Customers link from left navigation
2. Click the Settings tab
3. Check the box next to “Require Customers to Reauthenticate when Changing Passwords"
4. Click Update to save the changes

Now, when a customer attempts to change their password or email address, they will be required to enter their current password as a security precaution. This setting is left off by default on upgraded stores, and turned on by default in new stores

NOTE* If you enable this setting, you will need to update the customer fields template to account for the new reauthentication requirement. Please continue reading the next section below (Changing the Page Template) to make these template changes.

Changing the Page Template:
There are now five different templates for the Customer Fields template (which can be found on such pages as ACAD and ACED):

1. Checkout: Display-Only
2. Checkout: Editable
3. Customer: Legacy Add/Edit
4. Customer: Add
5. Customer: Edit

Checkout: Display-Only – Generates code that will display the non-editable customer fields only (used during the checkout process)
Checkout: Editable – Generates code that will display editable customerfields (used during the checkout process)
Customer: Legacy Add/Edit – Generates code that looks the same as the pre-PR8 Update 7 version of the Customer Add and Edit pages
Customer: Add – Generates code for the new Customer Add template (Removes the Login field as the email address is now used by default as the login)
Customer: Edit – Generates code for the new Customer Edit template (Removes the Email Address, Login, and Password fields, which are now changed through their own specific pages)

Ideal settings with the new customer changes would be “Customer: Add” on page ACAD, and “Customer: Edit” on page ACED, although the “Customer: Legacy Add/Edit” will work with the new Reauthentication setting

If you created your store before updating to Update 7 and you have reauthentication enabled, you must first update the ACED template before the reauthentication will work. If you do not, your customers will not be able to update their credentials!

//////////////////////////////////////////////////////////////////////

There is a syntax error in line 11 of the instructions for;

Mini-Basket Documentation:

'<mvt:item name="global_minibasket">'

SHOULD READ

<mvt:item name="global_minibasket" />

... he ending /> was not closed off correctly.

////////////////////////////////////////////////////////////////////////

[coca cola]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

I'm having trouble with the ACRT, CPWD, FPWD and CEML pages not formatting correctly. We get duplicate top nav and cat trees that ruins the format. I've added the CSS above, but it doesn't fix the issues.

ACRT calls for <body class="&mvte:page:code;">
CPWD calls for <body class="CPWD one-column">
FPWD calls for <body class="FPWD one-column">CEML calls for <body class="CEML one-column">

none are in the css above. I can't figure out what I'm missing - but at least I'm consistently missing it!

https://www.2collectcola.com/FPWD.html
https://www.2collectcola.com/CEML.html
https://www.2collectcola.com/CPWD.html
https://www.2collectcola.com/ACRT.html

Help would be most appreciated!

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

...

Password Reauthentication Enabling:
To require customers to enter their current password when changing email address or password, use the following steps:

1. In the administration interface, click on the Customers link from left navigation
2. Click the Settings tab
3. Check the box next to “Require Customers to Reauthenticate when Changing Passwords"
4. Click Update to save the changes

Now, when a customer attempts to change their password or email address, they will be required to enter their current password as a security precaution. This setting is left off by default on upgraded stores, and turned on by default in new stores

NOTE* If you enable this setting, you will need to update the customer fields template to account for the new reauthentication requirement. Please continue reading the next section below (Changing the Page Template) to make these template changes.

Changing the Page Template:
There are now five different templates for the Customer Fields template (which can be found on such pages as ACAD and ACED):

1. Checkout: Display-Only
2. Checkout: Editable
3. Customer: Legacy Add/Edit
4. Customer: Add
5. Customer: Edit

Checkout: Display-Only – Generates code that will display the non-editable customer fields only (used during the checkout process)
Checkout: Editable – Generates code that will display editable customerfields (used during the checkout process)
Customer: Legacy Add/Edit – Generates code that looks the same as the pre-PR8 Update 7 version of the Customer Add and Edit pages
Customer: Add – Generates code for the new Customer Add template (Removes the Login field as the email address is now used by default as the login)
Customer: Edit – Generates code for the new Customer Edit template (Removes the Email Address, Login, and Password fields, which are now changed through their own specific pages)

Ideal settings with the new customer changes would be “Customer: Add” on page ACAD, and “Customer: Edit” on page ACED, although the “Customer: Legacy Add/Edit” will work with the new Reauthentication setting

If you created your store before updating to Update 7 and have reauthentication enabled, you must first update before the reauthentication will work.

Please note that if you enable Password Reauthentication, YOU WILL NEED TO UPDATE YOUR ACED PAGE TEMPLATE CODE USING THE ABOVE "CHANGING THE PAGE TEMPLATE" SECTION, otherwise your customers will not be able to update their information with this enabled. Just remember, updating your template code will overwrite any changes you have made to that template.

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Below are the changes to the ACLN page (in MMUI css_fw, MMUI default_fw, and CSSUI cssui_default_fw)

These changes affect the viewability of the new Change Email Address and Change Password pages. If you are using the new "Require Reauthentication" setting with an altered ACED page (using the "Customer: Add" mode), then altering this page template is recommended.

ACLN: MMUI css_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
<head>
	<title>&mvt:store:name;: Edit Customer Account</title>
	<base href="&mvt:global:basehref;">
	<mvt:item name="head" param="css_list" />
	<mvt:item name="head" param="head_tag" />
</head>

<mvt:item name="body">
<mvt:item name="hdft" param="global_header" />
<mvt:item name="navbar" />

<div id="mainbody_account">
	<mvt:item name="hdft" param="header" />
	
	<div style="text-align:center;">
	<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=ACED">Edit Account Info</a>&nbsp;&nbsp;
	<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=CEML">Change Email Address</a>&nbsp;&nbsp;
	<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=CPWD">Change Password</a>&nbsp;&nbsp;
	<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=ORDH">Customer Order History</a>&nbsp;&nbsp;
	</div>

	<br />
	<mvt:item name="hdft" param="footer" />
<br class="clear" />
<mvt:item name="hdft" param="global_footer" />
</div>
</mvt:item>
</html>

ACLN: MMUI default_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
<head>
	<title>&mvt:store:name;: Edit Customer Account</title>
	<base href="&mvt:global:basehref;">
	<mvt:item name="head" param="head_tag" />
</head>

<mvt:item name="body">
	<mvt:item name="hdft" param="global_header" />

	<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr><td align="left" valign="bottom">
		<mvt:item name="navbar" />
	</td></tr>

	<tr><td align="left" valign="bottom">
		<mvt:item name="hdft" param="header" />
	</td></tr>

	<tr><td align="left" valign="top" width="100%">
		<mvt:item name="fonts" param="body_font">
		<br>
                <a href="&mvt:global:secure_sessionurl;Action=LOGO&Screen=SFNT&Store_Code=&mvta:global:Store_Code;">Logout</a><br>
		<br>
		<center>
			<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=ACED">Edit Account Info</a>&nbsp;&nbsp;
			<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=CEML">Change Email Address</a>&nbsp;&nbsp;
			<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=CPWD">Change Password</a>&nbsp;&nbsp;
			<a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=ORDH">Customer Order History</a>&nbsp;&nbsp;

			<br><br>
		</center>
		</mvt:item>
	</td></tr>

	<tr><td align="left" valign="bottom">
		<mvt:item name="hdft" param="footer" />
	</td></tr>
	</table>

	<mvt:item name="hdft" param="global_footer" />
</mvt:item>
</html>

ACLN: CSSUI cssui_default_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
<head>
	<title>&mvt:store:name;: My Account</title>
	<base href="&mvt:global:basehref;" />
	<mvt:item name="head" param="css_list" />
	<mvt:item name="head" param="head_tag" />
</head>
<body class="ACLN">
<div id="site-container">
	<div id="global-header"><mvt:item name="hdft" param="global_header" /></div>
	<div id="navigation-bar"><mvt:item name="navbar" /></div>
	<table id="content-container">
		<tr>
			<td id="left-navigation"><mvt:item name="category_tree" /></td>
			<td id="main-content">
				<div id="page-header"><mvt:item name="hdft" param="header" /></div>
				<div id="breadcrumbs"><mvt:item name="breadcrumbs" /></div>
				<div class="logout-link"><a href="&mvt:global:secure_sessionurl;Action=LOGO&amp;Screen=SFNT&amp;Store_Code=&mvta:global:Store_Code;">Logout</a></div>

				<h1>My Account</h1>

				<div class="account-links">
					<ul>
						<li><a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=ACED">Edit Account Info</a></li>
						<li><a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=CEML">Change Email Address</a></li>
						<li><a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=CPWD">Change Password</a></li>
						<li><a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&amp;Screen=ORDH">Customer Order History</a></li>
					</ul>
				</div>

				<div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
			</td>
		</tr>
	</table>
	<div id="bottom-wrap"></div>
	<div id="global-footer"><mvt:item name="hdft" param="global_footer" /></div>
</div>
</body>
</html>

[Viscott]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Hey Jon, sure thing. Our forums do not allow css file attachments, so I am putting it in a zip, but it is just the one file. Another option (just for future reference) is that you can go to the Frameworks tab and apply the cssui_default_fw Framework. This, however, will reset pretty much everything in your store to stock, so I wouldn't recommend it if you have made other template changes you wish to keep.

Thanks, that cleaned up the update login forms.

[Mark Hood]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

It would be nice to have these changes separate but what are the changes to ACLN? Or am I missing it among the other stuff?

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Can you attach a NEW complete cssui.css file? I have 2 new stores that I would prefer to just replace the cssui.css file.

Hey Jon, sure thing. Our forums do not allow css file attachments, so I am putting it in a zip, but it is just the one file. Another option (just for future reference) is that you can go to the Frameworks tab and apply the cssui_default_fw Framework. This, however, will reset pretty much everything in your store to stock, so I wouldn't recommend it if you have made other template changes you wish to keep.

[Viscott]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Can you attach a NEW complete cssui.css file? I have 2 new stores that I would prefer to just replace the cssui.css file.

[rguisewite]

Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Below are the changes to the ORDL page (in MMUI css_fw, MMUI default_fw, and CSSUI cssui_default_fw)

ORDL: MMUI css_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
    <head>
        <title>&mvt:store:name;: Checkout: Customer Login</title>
        <base href="&mvt:global:basehref;">
        <mvt:item name="head" param="css_list" />
        <mvt:item name="head" param="head_tag" />
    </head>
    <mvt:item name="body">
        <mvt:item name="hdft" param="global_header" />
        <mvt:item name="navbar" />
        <div id="mainbody">
            <mvt:item name="category_tree" />
            <div id="content">
                <mvt:item name="hdft" param="header" />
                <div class="floatleft">
                    <a href="&mvt:global:secure_sessionurl;Screen=ACNT&Order=1&Store_Code=&mvta:store:code;">Create New Account</a>
                </div>
                     <a href="&mvt:global:secure_sessionurl;Screen=OCST&Store_Code=&mvta:store:code;">Place Order Without Account</a>
                <br />
                <mvt:item name="messages" />
                <form method="post" action="&mvt:global:secure_sessionurl;" autocomplete="off">
                    <input type="hidden" name="Store_Code" value="&mvte:store:code;">
                    <input type="hidden" name="Screen"     value="OCST">
                    <input type="hidden" name="Action"     value="LOGN" />
                    <br />
                    <div id="login">
                        <label for="Customer_LoginEmail">Email Address:</label> <input type="text" name="Customer_LoginEmail" id="Customer_LoginEmail" value="&mvte:global:Customer_LoginEmail;" style="width: 200px;" autocomplete="off">
                        <label for="Customer_Password">Password:</label> <input type="password" name="Customer_Password" id="Customer_Password" style="width: 200px;" autocomplete="off">
                        <div id="nextbutton">
                            <mvt:item name="buttons" param="Login" />
                        </div>
                        <div class="forgot-password-link">
                            <a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=FPWD">Forgot Password?</a>
                        </div>
                    </div>
                </form>
            <br />
            <mvt:item name="hdft" param="footer" />
            </div>
            <br class="clear" />
            <mvt:item name="hdft" param="global_footer" />
        </div>
    </mvt:item>
</html>

ORDL: MMUI default_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
<head>
    <title>&mvt:store:name;: Checkout: Customer Login</title>
    <base href="&mvt:global:basehref;">
    <mvt:item name="head" param="head_tag" />
</head>

<mvt:item name="body">
    <mvt:item name="hdft" param="global_header" />    

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td align="left" valign="bottom">
        <mvt:item name="navbar" />
    </td></tr>

    <tr><td align="left" valign="bottom"> 
        <mvt:item name="hdft" param="header" />
    </td></tr>

    <tr><td align="left" valign="top" width="100%">
        <br>
        <table border="0">
        <tr><td align="left">
            <mvt:item name="fonts" param="body_font">
                <a href="&mvt:global:secure_sessionurl;Screen=ACNT&Order=1&Store_Code=&mvta:store:code;">Create New Account</a>
            </mvt:item>
        </td><td align="right">
            <mvt:item name="fonts" param="body_font">
            <a href="&mvt:global:secure_sessionurl;Screen=OCST&Store_Code=&mvta:store:code;">Place Order Without Account</a>
            </mvt:item>
        </td></tr>

        <tr><td colspan="2">
            <mvt:item name="fonts" param="body_font">
                <mvt:item name="messages" />
            </mvt:item>
        </td></tr>

        <tr><td colspan="2">
            <form method="post" action="&mvt:global:secure_sessionurl;" autocomplete="off">
            <input type="hidden" name="Store_Code" value="&mvt:store:code;">
            <input type="hidden" name="Screen" value="OCST">
            <input type="hidden" name="Action" value="LOGN">

            <table border="0">
            <tr><td align="left" valign="middle" colspan=3>
                <mvt:item name="fonts" param="body_font">
                <b>Login to Existing Account:</b>
                </mvt:item>
            </td></tr>

            <tr><td align="left" valign="middle">  
            </td><td align="left" valign="middle">
                <mvt:item name="fonts" param="body_font">
                <b>Email Address:</b>
                </mvt:item>
            </td><td align="left" valign="middle">
                <mvt:item name="fonts" param="body_font">
                <input type="text" size=40 name="Customer_LoginEmail" value="&mvte:global:Customer_LoginEmail;" autocomplete="off">
                </mvt:item>
            </td></tr>

            <tr><td align="left" valign="middle">
                  
            </td><td align="left" valign="middle">
                <mvt:item name="fonts" param="body_font">
                <b>Password:</b>
                </mvt:item>
            </td><td align="left" valign="middle">
                <mvt:item name="fonts" param="body_font">
                <input type="password" size="40" name="Customer_Password" autocomplete="off">
                </mvt:item>
            </td></tr>

            <tr><td align="left" valign="middle">
                  
            </td><td align="left" valign="middle">
                 
            </td><td align="right" valign="middle">
                <mvt:item name="fonts" param="body_font">
                <mvt:item name="buttons" param="Login" />
                </mvt:item>
            </td></tr>

            <tr><td align="center" valign="middle" colspan="3">
                <mvt:item name="fonts" param="body_font">
                <a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=FPWD">Forgot Password?</a>
                </mvt:item>
            </td></tr>
            </table>
            </form>
        </td></tr>
        </table>
    </td></tr>

    <tr><td align="left" valign="bottom"> 
        <mvt:item name="hdft" param="footer" />
    </td></tr>
    </table>

    <mvt:item name="hdft" param="global_footer" />    
</mvt:item>
</html>

ORDL: CSSUI cssui_default_fw
New default template (changes/additions are highlighted)

<mvt:item name="html_profile" />
<head>
    <title>&mvt:store:name;: Checkout: Customer Login</title>
    <base href="&mvt:global:basehref;" />
    <mvt:item name="head" param="css_list" />
    <mvt:item name="head" param="head_tag" />
</head>
<body class="ORDL one-column">
<div id="site-container">
    <div id="global-header"><mvt:item name="hdft" param="global_header" /></div>
    <div id="navigation-bar"><mvt:item name="navbar" /></div>
    <table id="content-container">
        <tr>
            <td id="left-navigation"><mvt:item name="category_tree" /></td>
            <td id="main-content">
                <div id="page-header"><mvt:item name="hdft" param="header" /></div>

                <form name="logn" action="&mvt:global:secure_sessionurl;" method="post" autocomplete="off">
                <input type="hidden" name="Store_Code" value="&mvte:store:code;" />
                <input type="hidden" name="Screen" value="OCST" />
                <input type="hidden" name="Action" value="LOGN" />

                <div class="section grey-border-right aligncenter">
                    <h3>Create New Account</h3>
                    <input type="button" value="Create Account" class="button" onclick="window.location = '&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Order=1&Screen=ACAD';" />
                </div>
                <div class="section grey-border-right">
                    <h3>Sign In</h3>
                    <mvt:if expr="l.settings:messages:error_message_count">
                    <div class="error-message">
                    <mvt:foreach iterator="error" array="messages:error_messages">
                        &mvt:error;
                    </mvt:foreach>
                    </div>
                    <mvt:elseif expr="l.settings:messages:information_message_count">
                    <div class="information-message">
                    <mvt:foreach iterator="message" array="messages:information_messages">
                        &mvt:message;
                    </mvt:foreach>
                    </div>

                    </mvt:if>
                    
                    <div class="form_row">
                        <label for="Customer_LoginEmail">Email Address:</label><input type="text" name="Customer_LoginEmail" id="Customer_LoginEmail" class="textfield logn-input" value="&mvte:global:Customer_LoginEmail;" autocomplete="off" />
                    </div>
                    <div class="form_row">
                        <label for="Customer_Password">Password:</label><input type="password" name="Customer_Password" id="Customer_Password" class="textfield logn-input" autocomplete="off" />
                    </div>
                    <div class="clear"></div>
                    <div class="sign-in-buttons"><mvt:item name="buttons" param="login" /></div>
                    <div class="forgot-password"><a href="&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=FPWD">Forgot password?</a></div>
                    
                </div>
                <div class="section aligncenter">
                    <h3>Express Checkout</h3>
                    <input type="button" value="Proceed to Checkout" class="button" onclick="window.location = '&mvt:global:secure_sessionurl;Store_Code=&mvta:store:code;&Screen=OCST';" />
                </div>
                </form>

                <div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
            </td>
        </tr>
    </table>
    <div id="bottom-wrap"></div>
    <div id="global-footer"><mvt:item name="hdft" param="global_footer" /></div>
</div>
</body>
</html>