My attempt at modifying the background color of my HTML email template has been focused on changing the sidebar's white color, rather than altering the background of the email body itself.
This is the CSS code I have:
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
}
ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass b,
.ExternalClass br,
.ExternalClass img .ExternalClass div {
line-height: 100%;
}
a:link {
color: #075792;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: #075792;
background-color: transparent;
text-decoration: underline;
}
a:hover{
color: red;
background-color:transparent;
text-decoration: underline;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0 !important;
padding: 0;
}
body,
#body_style {
background: #fffffe;
min-height: 1000px;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
border-spacing: 0 !important;
}
table tr {
border-collapse: collapse;
border-spacing: 0 !important
}
table tbody {
border-collapse: collapse;
border-spacing: 0 !important
}
table {
border-collapse: collapse;
border-spacing: 0 !important
}
span.yshortcuts,
a span.yshortcuts {
color: #ffffff;
background-color: none;
border: none;
}
... (more CSS code)
I am struggling to eliminate the colored sides. Should I create blocks to expand the email template to cover the entire page instead of just the center smaller section? My html/css knowledge is limited.