Skip to content

Instantly share code, notes, and snippets.

@JacobLett
Created February 9, 2016 21:33
Show Gist options
  • Select an option

  • Save JacobLett/1a03df4392a6f80533e6 to your computer and use it in GitHub Desktop.

Select an option

Save JacobLett/1a03df4392a6f80533e6 to your computer and use it in GitHub Desktop.
hubspot email styles condensed
/*
------------------------------------
Important - to override the default styles you need to add default properties. Deleting them does not work.
------------------------------------
*/
/* ==== Page Styles ==== */
body, #backgroundTable { background-color: {{ background_color }}; /* Use body to determine background color */
font-family: {{ primary_font }}; }
#templateTable { width: {{ email_body_width }}px; background-color: {{ body_color }}; -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color:{{ primary_font_color }}; display:block; font-family: {{ primary_font }}; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; }
h1, .h1 { font-size:26px; }
h2, .h2 { font-size:20px; }
h3, .h3 { font-size:15px; }
h4, .h4 { font-size:13px; }
h5, .h5 { font-size:11px; }
h6, .h6 { font-size:10px; }
/* ==== Header Styles ==== */
#headerTable { background-color: {{ background_color }}; color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size:10px; line-height:120%; text-align:right; border-collapse: separate !important; padding-right: {{email_body_padding}}px; }
#headerTable a:link, #headerTable a:visited, /* Yahoo! Mail Override */ #headerTable a .yshortcuts /* Yahoo! Mail Override */{ font-weight:normal; text-decoration:underline; font-size:10px; }
/* ==== Template Wrapper Styles ==== */
#contentCell { padding: 10px 20px; background-color: {{ background_color }}; }
#contentTableOuter { border-collapse: separate !important;
background-color: {{ body_color }}; {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != '' %}
box-shadow: {{ email_main_body_box_shadow_css }}; {% endif %}
padding: {{email_body_padding}}px; }
#contentTableInner { width: {{email_body_width}}px; }
/* ==== Body Styles ==== */
.bodyContent { color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size: {{primary_font_size }}; line-height:150%; text-align:left; }
/* ==== Column Styles ==== */
table.columnContentTable { border-collapse:separate !important; border-spacing:0;
background-color: {{ body_color }}; }
td[class~="columnContent"] { color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size:{{primary_font_size }}; line-height:120%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; }
/* ==== Footer Styles ==== */
#footerTable { background-color: {{ background_color }}; }
#footerTable a { color: {{ secondary_font_color }}; }
#footerTable { color:{{ secondary_font_color }}; font-family:{{ primary_font }}; font-size:12px; line-height:120%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align:center; }
#footerTable a:link, #footerTable a:visited, /* Yahoo! Mail Override */ #footerTable a .yshortcuts /* Yahoo! Mail Override */{ font-weight:normal; text-decoration:underline; }
.hs-image-social-sharing-24 { max-width: 24px; max-height: 24px; }
/* ==== Standard Resets ==== */
.ExternalClass{ width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile changing default text sizes */
table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Remove spacing between tables in Outlook 2007 and up */
img { vertical-align: bottom; -ms-interpolation-mode:bicubic; } /* Allow smoother rendering of resized image in Internet Explorer */
/* Reset Styles */
body { margin:0; padding:0; }
table { border-collapse:collapse !important; }
body, #backgroundTable, #bodyCell{ height:100% !important; margin:0; padding:0; width:100% !important; }
a:link, a:visited { border-bottom: none; }
/* iOS automatically adds a link to addresses */
/* Style the footer with the same color as the footer text */
#footer a { color: {{ secondary_font_color }};; -webkit-text-size-adjust: none; text-decoration: underline; font-weight: normal;}
/* Hide preview text on rendering */
#preview_text { display: none; }
/* ==== Mobile Styles ==== */
@media only screen and (max-width: 650px) { /* ==== Client-Specific Mobile Styles ==== */
body, table, td, p, a, li, blockquote{ -webkit-text-size-adjust:none !important; } /* Prevent Webkit platforms from changing default text sizes */
body{ width:100% !important; min-width:100% !important; } /* Prevent iOS Mail from adding padding to the body */
/* ==== Mobile Reset Styles ==== */
td[id="bodyCell"] { padding:10px !important; }
/* ==== Mobile Template Styles ==== */
table[id="templateTable"] { max-width:{{ email_body_width }}px !important; width:100% !important; }
table[id="contentTableInner"] { max-width:{{ email_body_width }}px !important; width:300px !important; }
/* ==== Image Alignment Styles ==== */
h1, .h1 { font-size:26px !important; line-height:125% !important; }
h2, .h2 { font-size:20px !important; line-height:125% !important; }
h3, .h3 { font-size:15px !important; line-height:125% !important; }
h4, .h4 { font-size:13px !important; line-height:125% !important; }
h5, .h5 { font-size:11px !important; line-height:125% !important; }
h6, .h6 { font-size:10px !important; line-height:125% !important; }
.hide { display:none !important; } /* Hide to save space */
/* ==== Body Styles ==== */
td[class="bodyContent"] { font-size:16px !important; line-height:145% !important; }
/* ==== Footer Styles ==== */
td[id="footerTable"]{ padding-left: 0px !important; padding-right: 0px !important; font-size:12px !important; line-height:145% !important; }
/* ==== Image Alignment Styles ==== */
table[class="alignImageTable"] { width: 100% !important; }
td[class="imageTableTop"] { display: none !important; /*padding-top: 10px !important;*/}
td[class="imageTableRight"] { display: none !important; }
td[class="imageTableBottom"] { padding-bottom: 10px !important; }
td[class="imageTableLeft"] { display: none !important; }
/* ==== Column Styles ==== */
td[class~="column"] { display: block !important; width: 100% !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
td[class~=columnContent] { font-size:14px !important; line-height:145% !important;
padding-top: 10px !important; padding-right: 10px !important; padding-bottom: 10px !important; padding-left: 10px !important; }
#contentCell { padding: 10px 0px !important; }
#headerTable { padding-right: {{email_body_padding_num / 2 |int}}px !important; }
#contentTableOuter { padding: {{email_body_padding_num / 2 |int}}px !important; }
#preview_text {display: none;}
/* End Mobile styles*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment