Hi All,
I have changed my email header image but am at a loss on how to center the image for emails. Does anyone know what file needs to be adjusted and the code that needs to be used to make it appear in the center of the emails please.
Printable View
Hi All,
I have changed my email header image but am at a loss on how to center the image for emails. Does anyone know what file needs to be adjusted and the code that needs to be used to make it appear in the center of the emails please.
There's a css file in the email folder you can adjust. Just be aware there's mucho caching going on and you can fix it but have it appear not to be fixed; it's a frustrating process.
This is the file just want to know what I edit as I can't see where.
body {background-color:#ffffff; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
a:link {color:#0066cc;}
a:hover {background-color:#eeeecc; color:#0066cc;}
a:visited {color:#0066cc;}
.holder {background-color:#f9f9f9; border:1px solid #9a9a9a; font-size:9px; text-align:left; width:550px;}
.header {font-size:10px; padding:0px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.content-line {padding:5px;}
#checkout .content-line { font-size: 10px; }
.footer {border-top:1px solid #9a9a9a; font-size:9px; margin-top:10px; text-align:center; width:550px;}
.disclaimer {background-color:#f9f9f9; border:1px solid #cccccc; font-size:10px; margin-top:10px; padding:5px; width:550px;}
.disclaimer1 {color:#666666; padding:5px;}
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 {color:#666666; padding:5px;}
.copyright {border-bottom:0px solid #9a9a9a; padding:5px;}
.extra-info {background-color:#cccc99; border:1px solid #9a9a9a; font-size:10px; margin-top:10px; padding:5px; width:550px;}
.extra-info-bold {font-weight:bold;}
.unsubscribe {border-bottom:1px solid #9a9a9a; padding:5px;}
.gv {background-color:#66FF99; border:1px #9a9a9a; width:550px; padding:2px; font-size:10px; }
.gv-amount {font-weight:bold; color:#669966;}
.gv-code {font-weight:bold; color:#66CC66;}
.store-name {font-size:13px; padding:5px;}
.coupon-block { padding: 5px; border: 1px #cccccc solid; background-color: #FFFF99; }
.coupon-code {font-weight:bold;}
.gv-block { padding: 5px; border: 1px #cccccc solid; background-color: #99FF99; }
.content-line-title {font-weight:bold; font-size:11px; padding-top:3px;}
.order-detail-area {background-color:#CCCC99; border:1px #9a9a9a; width:542px; padding:2px; font-size:10px; }
.product-details {font-size:10px;}
.product-details-num {font-size:10px; font-weight:bold;}
.order-totals-text {font-size:10px; font-weight:bold;}
.order-totals-num {font-size:10px; }
.comments {background-color:#FF6699; border:1px #9a9a9a; width:542px; padding:2px; font-size:10px; }
.address-block {background-color:#E4E8F3; border:1px solid #9a9a9a; margin-top:3px;}
.address {font-size:10px;}
.payment-detail, .payment-footer {font-size:10px;}
.delivery-block, .billing_block { width: 50%; vertical-align: top; }
@media only screen and (max-width:640px){
.extra-info, .delivery-block, .billing-block {width:100%; margin:0; }
.holder, .header, .content, .footer, .disclaimer, .gv { width: 100%; }
.comments, .order-detail-area { width: 95%; }
.billing-block, .delivery-block { float:left; }
.billing-block { border-top:1px solid #9a9a9a; margin-top:5px; }
}
Try adding these rules at the bottom of that file, so it's "obvious" that they're additions for your forthcoming Zen Cart upgrade:
Code:.header { text-align: center; }
.header > img { margin: 0 auto; }
Thank you that worked a treat.Quote:
Originally Posted by lat9
Most excellent, thanks for the post-back!Quote:
Originally Posted by Bruce1952