You can pay some attention to the styling of your store's checkout and cart templates to better match the feel of your new Magento theme.
To view the cart page as it currently appears, add a product from your store to the cart and use the My Cart button in the header of your website:
Open your theme's styles.css file in the /skin/frontend/default/m18/css/ directory and add the following CSS to the bottom of the file to style the cart table, which contains the products your customer is about to buy:
fieldset {
border: 0;
}
.a-right {
text-align: right;
}
.checkout-types, .form-list {
list-style: none;
margin: 10px 0;
}
.totals {
float: right;
}
.totals table {
width: 100%;
}
.checkout-types, .totals {
text-align: right;
}
.checkout-types li, .form-list li {
display: inline;
margin-right: 5px;
}
.form-list li.control {
display: block;
}
.data-table {
width: 100%;
}
.data-table a {
color: #000;
}
.data-table th, .data-table .even {
background: #f6f6f6;
}
.data-table th, .data-table td {
border-bottom: 1px #DDD solid;
padding: 5px;
}
.discount, .shipping {
background: #f6f6f6;
border-radius: 5px;
margin-bottom: 10px;
padding: 5px;
}Once this CSS has been added, your store's cart page will look more in line with your new Magento theme:
If you now click on the Proceed to checkout button on the cart screen, you will see Magento's checkout page, which currently looks similar to the following screenshot:
Add the following CSS to your theme's styles.css file to style the Your Checkout Progress block, which appears in the right-hand column of the checkout page to indicate to customers which stage of the checkout process they're at:
.block-progress {
border: 0;
margin: 0;
}
.block-progress dt {
background: #eee;
border: 1px solid #ccc;
color: #555;
font-size: 10px;
line-height: 1.35;
margin: 0 0 6px;
padding: 2px 8px;
text-transform: uppercase;
}
.block-progress dd {
border-top: 0;
padding: 2px 10px;
margin: 0 0 6px;
}
.block-progress dt.complete a {
text-transform: none;
}
.block-progress p {
margin: 0;
}Next, adding the CSS below provides styling for the buttons and form elements within the one-page checkout:
.opc .buttons-set {
margin-top: 0;
padding-top: 2em;
}
.opc .buttons-set p.required {
margin: 0;
padding: 0 0 10px;
}
.opc .buttons-set.disabled button.button {
display: none;
}
.opc .buttons-set .please-wait {
height: 28px;
line-height: 28px;
}
.opc .ul {
list-style: disc outside;
padding-left: 18px;
}Finally, adding the remaining CSS below provides the styling for the individual steps of the one-page checkout process, and different colors to indicate which particular step of the checkout your customer has completed:
.opc {
position: relative;
}
.opc .step-title {
background: #CCC;
border: 1px solid #CCC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #555;
margin: 10px 0 0 0;
padding: 10px;
text-align: right;
}
.opc .step-title .number {
background: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #444;
float: left;
font: normal 11px/12px arial, helvetica, sans-serif;
margin: 0 5px 0 0;
padding: 0 3px;
}
.opc .step-title h2 {
color: #555;
float: left;
font: bold 12px/14px Arial, Helvetica, sans-serif;
margin: 0;
}
.opc .step-title a {
display: none;
float: right;
font-size: 11px;
line-height: 16px;
}
.opc .allow .step-title {
background: #999;
border-color: #999;
border-top-color: #fff;
color: #fff;
cursor: pointer;
}
.opc .allow .step-title h2 {
color: #fff;
}
.opc .allow .step-title a {
color: #fff;
display: block;
font-size: 10px;
text-transform: uppercase;
}
.opc .active .step-title {
background: #e57d04;
border: none;
color: #fff;
cursor: default;
}
.opc .active .step-title h2 {
color: #fff;
}
.opc .active .step-title a {
display: none;
}
.opc .step {
border: 1px solid #ccc;
border-top: 0;
background: #f9f9f9;
padding: 15px 30px;
position: relative;
}
.opc .step .tool-tip {
right: 30px;
}If you now review your store's checkout, you will see that it is styled more neatly to help guide your customers through Magento's one-page checkout process:
