Created
February 9, 2016 21:33
-
-
Save JacobLett/1a03df4392a6f80533e6 to your computer and use it in GitHub Desktop.
hubspot email styles condensed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| ------------------------------------ | |
| 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