Custom CSS and Outlook

Adrienne

As most of you may know, current versions of Outlook do not support CSS (at least not between <head> </head> of the email message).

This is a huge setback for designers as many institutions and corporations still use the damn thing.

Email messages that render perfectly on Mac Mail, Gmail clients and so forth, display totally unstyled on Outlook.

I understand that theACYM visual editor writes inline CSS into the HTML elements directly, which is all fine and dandy by me.

However, I have also noticed that styles defined for a Joomla article block (via parameters in the visual editor) will affect all other blocks of the same type.

I am wondering if there is a way to apply custom INLINE styles to each block without using a custom stylesheet, which Outlook will simply ignore.

Thanks!

mihha

No, you can't add CSS styles inline, but when you are using custom CSS code using "Add custom stylesheet", AcyMailing will put the code inline in the places where it should be

Adrienne

mihha The fact remains that Outlook does not load any of the styles, though.

Adrienne

mihha Your assessment is incorrect, in any case.
I can see in the raw source of a received message that the styles are loaded in the header, not inline.
The inline styles are generated by ACYM's visual editor and remain unchanged.

I'm posting here the relevant block.

`--b1=_9rt22GKJGWzLnSzqMBI0AIDXV90LY6tYfXlLKDbjQM
Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: quoted-printable

<html xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:v=3D"urn:schemas-microso=
ft-com:vml" xmlns:o=3D"urn:schemas-microsoft-com:office:office"><head><meta http=
-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8" />=0A<meta n=
ame=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D1.0" />=
=0A<title>Email subject</title>=0A<style>@media only screen and (max-device=
-width:479px){.acymailing_content *[valign=3Dmiddle]{width:auto}}@media onl=
y screen and (max-width:479px){.acymailing_content *[valign=3Dmiddle]{width=
:auto}}#acymwysidtemplate .acymailing_content{margin-bottom:10px}#acym_=
_wysidtemplate .acymailing_content *[valign=3Dmiddle] .content_main_image=
{margin-left:auto!important;margin-right:auto!important}#acymwysid__templ=
ate .acymailing_content .content_main_image_caption{text-align:center}#acym=
wysidtemplate .acymailing_content .acydescription img{display:inline-bl=
ock}#acymwysidtemplate .acymailing_content .acymailing_readmore{margin-=
top:10px;display:block}#acymwysidtemplate .acymailing_content td.cflabe=
l,#acymwysidtemplate .acymailing_content td.cfvalue,#acym_wrapper td.cf=
label,#acym_wrapper td.cfvalue{padding:.2rem .625rem}.alignleft{float:left;=
margin:.5em 1em .5em 0}.aligncenter{display:block;margin-left:auto;margin-r=
ight:auto}.alignright{float:right;margin:.5em 0 .5em 1em}.revealonline{disp=
lay:none}#acymwysidtemplate .acymailing_content img{height:auto}</style=

<style>/*generic rules */

.emsa23block .description img {
margin-bottom: 2% !important;
width: 100% !important;=20
max-width: 100% !important;=20
height: auto !important;
}

.emsa23block .description p
{
font-size: 16px !important;
margin-bottom: 1% !important;
}

/* headline */

#headline .emsa23block .category
{
background: linear-gradient(to right, #3176B0 0%, #3176B0 90%, #FFFFFF 100%=
) !important;
padding: 1% 0 1% 1%;
}

#headline .emsa23block .category a
{
color: #FFFFFF !important;
font-size: 2vw !important;
}

#headline .emsa23block .title
{
padding: 1% 0 1% 0 !important;
}

#headline .emsa23block .title a
{
color: #3176B0 !important;
font-size: 3vw !important;
}

#headline .emsa23block .description p a
{
font-size: 16px !important;
color: #3176B0;
}

/* NEWS #1 */

#news1 .emsa23block .category
{
background: linear-gradient(to right, #AEC038 0%, #AEC038 90%, #FFFFFF 100%=
) !important;
padding: 1% 0 1% 1%;
}

#news1 .emsa23block .category a
{
color: #FFFFFF !important;
font-size: 2vw !important;
}

#news1 .emsa23block .title
{
padding: 1% 0 1% 0 !important;
}

#news1 .emsa23block .title a
{
color: #AEC038 !important;
font-size: 3vw !important;
}

#news1 .emsa23block .description p a
{
font-size: 16px !important;
color: #3176B0;
}

/* NEWS #2 */

#news2 .emsa23block .category
{
background: linear-gradient(to right, #5CA550 0%, #AEC038 90%, #FFFFFF 100%=
) !important;
padding: 1% 0 1% 1%;
}

#news2 .emsa23block .category a
{
color: #FFFFFF !important;
font-size: 2vw !important;
}

#news2 .emsa23block .title
{
padding: 1% 0 1% 0 !important;
}

#news2 .emsa23block .title a
{
color: #5CA550 !important;
font-size: 3vw !important;
}

#news2 .emsa23block .description p a
{
font-size: 16px !important;
color: #5CA550;
}

/* NEWS #3 */

#news3 .emsa23block .category
{
background: linear-gradient(to right, #DF5F5A 0%, #DF5F5A 90%, #FFFFFF 100%=
) !important;
padding: 1% 0 1% 1%;
}

#news3 .emsa23block .category a
{
color: #FFFFFF !important;
font-size: 2vw !important;
}

#news3 .emsa23block .title
{
padding: 1% 0 1% 0 !important;
}

#news3 .emsa23block .title a
{
color: #DF5F5A !important;
font-size: 3vw !important;
}

#news3 .emsa23block .description p a
{
font-size: 16px !important;
color: #DF5F5A;
}

/* NEWS #4 */

#news4 .emsa23block .category
{
background: linear-gradient(to right, #0E68B0 0%, #0E68B0 90%, #FFFFFF 100%=
) !important;
padding: 1% 0 1% 1%;
}

#news4 .emsa23block .category a
{
color: #FFFFFF !important;
font-size: 2vw !important;
}

#news4 .emsa23block .title
{
padding: 1% 0 1% 0 !important;
}

#news4 .emsa23block .title a
{
color: #0E68B0 !important;
font-size: 3vw !important;
}

#news4 .emsa23block .description p a
{
font-size: 16px !important;
color: #0E68B0;
}
</style><style>#acymwysidtemplate .acymwysidcolumnelementtd .ac=
ymwysidtinymce--text default:not(.acymwysidcontent-no-settings-styl=
e){font-family: Helvetica;}#acymwysidtemplate .acymwysidcolumnele=
menttd .acymailing_content default:not(.acymwysidcontent-no-settings-=
style){font-family: Helvetica;}#acymwysidtemplate .acymwysidcolumn_=
elementtd .acymwysidtinymce--text p:not(.acymwysidcontent-no-set=
tings-style){font-family: Helvetica;font-size: 12px;}#acymwysidtemplate=
.acymwysidcolumnelementtd .acymailing_content p:not(.acymwysid=
content-no-settings-style){font-family: Helvetica;font-size: 12px;}#acymw=
ysidtemplate .acymwysidcolumnelementtd .acymwysidtinymce--tex=
t a:not(.acymwysidcontent-no-settings-style){font-family: Helvetica;}#a=
cymwysidtemplate .acymwysidcolumnelementtd .acymailing_content =
a:not(.acymwysidcontent-no-settings-style){font-family: Helvetica;}#acy=
mwysidtemplate .acymwysidcolumnelementtd .acymwysidtinymce-=
-text span.acym_link:not(.acymwysidcontent-no-settings-style){font-fami=
ly: Helvetica;}#acymwysidtemplate .acymwysidcolumnelementtd .ac=
ymailing_content span.acym_link:not(.acymwysidcontent-no-settings-style=
){font-family: Helvetica;}#acymwysidtemplate .acymwysidcolumnelem=
enttd .acymwysidtinymce--text li:not(.acymwysidcontent-no-setting=
s-style){font-family: Helvetica;}#acymwysidtemplate .acymwysidcolum=
nelementtd .acymailing_content li:not(.acymwysidcontent-no-settings=
-style){font-family: Helvetica;}#acymwysidtemplate .acymwysid__column=
elementtd .acymwysidtinymce--text h1:not(.acymwysidcontent-no-s=
ettings-style){font-family: Helvetica;}#acymwysidtemplate .acymwysid=
columnelementtd .acymailing_content h1:not(.acymwysidcontent-no-se=
ttings-style){font-family: Helvetica;}#acymwysidtemplate .acymwysid=
columnelementtd .acymwysidtinymce--text h2:not(.acymwysidconten=
t-no-settings-style){font-family: Helvetica;}#acymwysidtemplate .acym=
wysidcolumnelementtd .acymailing_content h2:not(.acymwysidcontent=
-no-settings-style){font-family: Helvetica;}#acymwysidtemplate .acymw=
ysidcolumnelementtd .acymwysidtinymce--text h3:not(.acymwysid=
content-no-settings-style){font-family: Helvetica;}#acymwysidtemplate .=
acymwysidcolumnelementtd .acymailing_content h3:not(.acymwysidc=
ontent-no-settings-style){font-family: Helvetica;}#acymwysidtemplate .a=
cymwysidcolumnelementtd .acymwysidtinymce--text h4:not(.acymw=
ysidcontent-no-settings-style){font-family: Helvetica;}#acymwysidtemp=
late .acymwysidcolumnelementtd .acymailing_content h4:not(.acymwy=
sidcontent-no-settings-style){font-family: Helvetica;}#acymwysidtempl=
ate .acymwysidcolumnelementtd .acymwysidtinymce--text h5:not(.a=
cymwysidcontent-no-settings-style){font-family: Helvetica;}#acymwysid=
template .acymwysidcolumnelementtd .acymailing_content h5:not(.ac=
ymwysidcontent-no-settings-style){font-family: Helvetica;}#acymwysid=
template .acymwysidcolumnelementtd .acymwysidtinymce--text h6:=
not(.acymwysidcontent-no-settings-style){font-family: Helvetica;}#acym=
_wysidtemplate .acymwysidcolumnelementtd .acymailing_content h6:n=
ot(.acymwysid__content-no-settings-style){font-family: Helvetica;}</style=

<style>@media only screen{html{min-height: 100%; background: #f3f3f3;}}a:a=
ctive,a:hover{color: #147dc2;}a:visited{color: #2199e8;}@media only screen =
and (max-width:596px){table.body img{width: auto; height: auto;}table.body =
center{min-width: 0 !important;}table.body .columns{height: auto !important=
; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: =
border-box;}th.small-12{display: inline-block !important; width: 100% !impo=
rtant;}}@media screen and (max-width:596px){.acymwysidrowelementth{=
padding: 0 !important;}}</style></head><body yahoo=3D"fix" style=3D"min-wi=
dth: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; padd=
ing: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-si=
zing: border-box; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; =
font-weight: 400; margin: 0; text-align: left; font-size: 16px; line-height=
: 1.3; width: 100%;"><div id=3D"acymwysidtemplate" class=3D"cell" style=
=3D"-ms-text-size-adjust: 100%; border: none; padding: 0;">
=09<table class=3D"body" style=3D"-ms-text-size-adjust: 100%; border-spacin=
g: 0; border-collapse: collapse; vertical-align: top; margin-bottom: 0; bac=
kground: #f3f3f3; height: 100%; width: 100%; color: #0a0a0a; font-family: H=
elvetica,Arial,sans-serif; font-weight: 400; margin: 0; text-align: left; f=
ont-size: 16px; line-height: 1.3; mso-table-lspace: 0; mso-table-rspace: 0;=
">
=09=09<tbody style=3D"-ms-text-size-adjust: 100%; border: 0 solid transpare=
nt;">
=09=09=09<tr style=3D"-ms-text-size-adjust: 100%; vertical-align: top; text=
-align: left;">
=09=09=09=09<td align=3D"center" class=3D"center acymwysidtemplatecon=
tent" valign=3D"top" style=3D"-ms-text-size-adjust: 100%; word-wrap: break-=
word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-al=
ign: top; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-wei=
ght: 400; margin: 0; text-align: left; font-size: 16px; line-height: 1.3; b=
ackground-color: rgb(239, 239, 239); padding: 30px 0 120px 0; border-collap=
se: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
=09=09=09=09=09<center style=3D"-ms-text-size-adjust: 100%; width: 100%; mi=
n-width: 580px;">
=09=09=09=09=09=09<table align=3D"center" border=3D"0" cellpadding=3D"0" ce=
llspacing=3D"0" style=3D"-ms-text-size-adjust: 100%; border-spacing: 0; bor=
der-collapse: collapse; vertical-align: top; text-align: left; margin-botto=
m: 0; max-width: 580px; mso-table-lspace: 0; mso-table-rspace: 0;">
=09=09=09=09=09=09=09<tbody style=3D"-ms-text-size-adjust: 100%; border: 0 =
solid transparent;">
=09=09=09=09=09=09=09=09<tr style=3D"-ms-text-size-adjust: 100%; vertical-a=
lign: top; text-align: left;">
=09=09=09=09=09=09=09=09=09<td class=3D"acymwysidrow ui-droppable ui-so=
rtable" bgcolor=3D"#ffffff" style=3D"-ms-text-size-adjust: 100%; word-wrap:=
break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vert=
ical-align: top; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; f=
ont-weight: 400; margin: 0; text-align: left; font-size: 16px; line-height:=
1.3; background-color: transparent; min-height: 0px; display: table-cell; =
border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
=09=09=09=09=09=09=09=09=09=09<table class=3D"row acymwysidrowelement=
" bgcolor=3D"#ffffff" cellpadding=3D"0" cellspacing=3D"0" border=3D"0" styl=
e=3D"-ms-text-size-adjust: 100%; border-spacing: 0; vertical-align: top; te=
xt-align: left; margin-bottom: 0; width: 100%; position: relative; padding:=
10px; border-style: none; border-width: 0; background-color: rgb(255, 255,=
255); z-index: 100; mso-table-lspace: 0; mso-table-rspace: 0; border-colla=
pse: initial;"><tbody bgcolor=3D"" style=3D"-ms-text-size-adjust: 100%; bor=
der: 0 solid transparent; background-color: inherit;"><tr style=3D"-ms-text=
-size-adjust: 100%; vertical-align: top; text-align: left;"><th class=3D"sm=
all-12 medium-12 large-12 columns acymwysidrowelementth" valign=3D"=
top" style=3D"-ms-text-size-adjust: 100%; color: #0a0a0a; font-family: Helv=
etica,Arial,sans-serif; font-weight: 400; text-align: left; font-size: 16px=
; line-height: 1.3; margin: 0 auto; width: 580px;"><table class=3D"acymwy=
sidcolumn" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" style=3D"-ms-=
text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse; verti=
cal-align: top; text-align: left; margin-bottom: 0; width: 100%; min-height=
: 0px; display: table; mso-table-lspace: 0; mso-table-rspace: 0;"><tbody cl=
ass=3D"ui-sortable" style=3D"-ms-text-size-adjust: 100%; border: 0 solid tr=
ansparent; min-height: 0px; display: table-row-group;"><tr class=3D"acymw=
ysidcolumnelement ui-draggable" style=3D"-ms-text-size-adjust: 100%; ve=
rtical-align: top; text-align: left; position: relative; top: inherit; left=
: inherit; right: inherit; bottom: inherit; height: auto;"><td class=3D"lar=
ge-12 acymwysidcolumnelementtd" style=3D"-ms-text-size-adjust: 100%=
; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens=
: auto; vertical-align: top; color: #0a0a0a; font-family: Helvetica,Arial,s=
ans-serif; font-weight: 400; margin: 0; text-align: left; font-size: 16px; =
line-height: 1.3; width: 100%; outline-width: 0px; mso-table-lspace: 0; mso=
-table-rspace: 0; border-collapse: collapse;"><div class=3D"acymwysidti=
nymce--image mce-content-body" spellcheck=3D"false" id=3D"mce_0" contentedi=
table=3D"false" style=3D"-ms-text-size-adjust: 100%; height: 100%; position=
: relative; padding: 0;"><div style=3D"-ms-text-size-adjust: 100%; text-ali=
gn: center;"><img class=3D"acymwysidmediainserted" src=3D"https://dev=
.absolute.lv/emsa/intranet-0923/images/2020/staff-newsletter-banner.jpg" al=
t=3D"" title=3D"image" hspace=3D"0" height=3D"80" width=3D"560" style=3D"-m=
s-text-size-adjust: 100%; outline: 0; text-decoration: none; clear: both; -=
ms-interpolation-mode: bicubic; max-width: 100%; height: auto; box-sizing: =
border-box; display: block; margin-left: auto; margin-right: auto; width: 5=
60px; padding: 0;"></div></div></td></tr></tbody></table></th></tr></tbody>=
</table>=0A<table class=3D"row acymwysidrowelement" bgcolor=3D"#fffff=
f" cellpadding=3D"0" cellspacing=3D"0" border=3D"0" id=3D"headline" style=
=3D"-ms-text-size-adjust: 100%; border-spacing: 0; vertical-align: top; tex=
t-align: left; margin-bottom: 0; width: 100%; position: relative; padding: =
10px; border-style: none; border-width: 0; background-color: rgb(255, 255, =
255); z-index: 100; mso-table-lspace: 0; mso-table-rspace: 0; border-collap=
se: initial;"><tbody bgcolor=3D"" style=3D"-ms-text-size-adjust: 100%; bord=
er: 0 solid transparent; background-color: inherit;"><tr style=3D"-ms-text-=
size-adjust: 100%; vertical-align: top; text-align: left;">
<th class=3D"small-12 medium-12 large-12 columns acymwysidrowelemen=
tth" valign=3D"top" style=3D"-ms-text-size-adjust: 100%; color: #0a0a0a; =
font-family: Helvetica,Arial,sans-serif; font-weight: 400; text-align: left=
; font-size: 16px; line-height: 1.3; margin: 0 auto; width: 580px;">
<table class=3D"acymwysid__column" border=3D"0" cellpadding=3D"0" cel=
lspacing=3D"0" style=3D"-ms-text-size-adjust: 100%; border-spacing: 0; bord=
er-collapse: collapse; vertical-align: top; text-align: left; margin-bottom=
: 0; width: 100%; min-height: 0px; display: table; mso-table-lspace: 0; mso=`

mihha

To provide you with the best assistance possible, I kindly request that you submit a support ticket through our website at https://www.acymailing.com/support/. Our team will be able to efficiently and effectively provide you with the assistance you need.

Please note that our ticket support is exclusively available for our customers with an active Essential or Enterprise license. If your license has expired or you are using the Starter version, we kindly invite you to renew or upgrade your license prior to opening your support ticket.

mihha

I can only repeat what I already wrote

Pinkeltje

Totally agree with @Adrienne
I did create a support ticket in may and issue still isn't resolved ;-(

jvstratum

Pinkeltje

Hi,

Was it not resolved or was your ticket not answerred? I'm asking this since I can find only one ticket from you, which is about another subject. Unless you used a different account of course.

Pinkeltje

It was with a different account and it just wasn't resolved.

jvstratum

Pinkeltje

Hi,

We can't find a ticket that is related to your issue. In order to best assist you with your query, I kindly request that you submit a new support ticket through our website at https://www.acymailing.com/support/. This will enable our team to efficiently and effectively provide you with the assistance you need.