Menu icon Foundation

Designer

My Posts

  • 10
    Replies
  • Outlook help

    By Stephen Crowther

    OutlookNewbie

    Hi there, i'm trying to build a newsletter for my company. I'm finding that even with foundation (and claim to work in outlooks!), all outlook layouts still need further hacking on top of the foundation framework (using 2.1). I'm also using the CSS versi... (continued)

    Last Reply by Mira Edorra 9 months ago


  • 6
    Replies
  • hacking for outlook

    By Stephen Crowther

    Outlook

    Hi there, i'm trying to build a newsletter for my company. I'm finding that even with foundation (and claim to work in outlooks!), all outlook layouts still need further hacking on top of the foundation framework (using 2.1). I'm also using the CSS versi... (continued)

    Last Reply by Stephen Crowther over 2 years ago


My Comments

Stephen Crowther commented on Stephen Crowther's post over 2 years

When i started this build 2.1 was the current foundation for email version.
Let me be clear i'm working through this using the manual css method - i'm not using sass or any form of automation at this stage (namely because I don't know how to yet!)My workflow has been:

Code HTML assign foundation syntax, using the 2.1 css framework
Use the foundation v2 inliner on the website, to inline the code (which doesn't understand CM tags of course)
Test in litmus

At this point, the issue with outlook i wrote above rears its head - means I am currently editing the inlined version of the code to stop it from happening.
When i then upload the inlined code to CM, this means the cm specific tags are not being styled by the css, as the css is targeting <a> tags not <unsubscribe> tags (not valid html).
I'm confident if i upload the non-inlined html, and separate css to CM, it will all work fine, but the outlook issue above is preventing me from doing so, as i'm having to inline prior to cm upload, edit the inline, and upload the inline.
Does this make any more sense?
 
Bear in mind, I am learning here, and I fully understand that it is more likely I have done something wrong than the foundation framework having any issues.

Stephen Crowther commented on Stephen Crowther's post over 2 years

This is my litmus test - notice the <a> in the paragraph - difference in outlook 07/10/13 to everything else.
 

Stephen Crowther commented on Stephen Crowther's post over 2 years

I have added some additional css rules to the base foundation (i'm sure everybody has to do this) but nothing that should affect the margins on p and a tags. I tweaked one or two things in the foundation base css, like text sizes, hover states and colours (for clients that support) and i tweaked the mobile width from 95% to 97% to eek a bit more width out on mobile. That's it really??????
It really has me stumped.
Currently only way i can get it to work is by deleting the margin:0 entries AFTER i have inlined. This isn't ideal as my next task is to upload to campaign monitor and make it an editable template. Looking at the way this works, you do need to upload separate HTML and CSS files, otherwise the campaign monitor code snippets, e.g. <unsubscribe> won't parse the right code into the a tags to be styled how I want (or at least thats how i understand it!).
cheers
@media only screen and (max-width: 380px) {
.reduce-logo-320 {
max-width: 120px !important;
padding-top: 15px !important; }
.reduce-text-320 {
font-size: 11px !important; }
}

@media only screen and (max-width: 596px) {
p.indent {margin-left: 20px !important;
margin-right: 20px !important; }

}

.header {
background: #000000;
}

.header .columns {
padding-bottom: 0;
}

.header p {
color: #fff;
padding-top: 15px;
}

.header .wrapper-inner {
padding: 20px;
}

.header .container {
background: transparent;
}

.tab {display: inline-block;
background-color: #fed900;
color: #000000;
font-weight: bold;
padding: 5px 10px 2px 10px;
margin: 0px 0px 0px 0px !important;
Margin: 0px 0px 0px 0px !important;
}

a img {
opacity: 1.0;
}

a img:hover {
opacity: 0.8 !important;
}

Stephen Crowther commented on Stephen Crowther's post over 2 years

Ah - i've double posted - when i posted that other thread said it had gotten removed by a bot because it thought it was spam. So i posted this thread with a different title.
Could do with these merged really

Stephen Crowther commented on Stephen Crowther's post over 2 years

Hmmmm never used codepen before - i'll try and figure something out!
Thanks!

Stephen Crowther commented on Stephen Crowther's post over 2 years

Yeh I've read up on the margin/Margin thing. That is covered in foundation as it is written both ways each time.
Ive tried using important too, although strictly speaking this isn't a media query and shouldn't need it, I'm just trying to override a (non !important) inline style for outlook 07/10/13 only.

Stephen Crowther commented on Stephen Crowther's post over 2 years

PS. Just posted this once, and for some reason it was immediately removed?

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Stephen Crowther's post over 2 years

When i started this build 2.1 was the current foundation for email version.
Let me be clear i'm working through this using the manual css method - i'm not using sass or any form of automation at this stage (namely because I don't know how to yet!)My workflow has been:

Code HTML assign foundation syntax, using the 2.1 css framework
Use the foundation v2 inliner on the website, to inline the code (which doesn't understand CM tags of course)
Test in litmus

At this point, the issue with outlook i wrote above rears its head - means I am currently editing the inlined version of the code to stop it from happening.
When i then upload the inlined code to CM, this means the cm specific tags are not being styled by the css, as the css is targeting <a> tags not <unsubscribe> tags (not valid html).
I'm confident if i upload the non-inlined html, and separate css to CM, it will all work fine, but the outlook issue above is preventing me from doing so, as i'm having to inline prior to cm upload, edit the inline, and upload the inline.
Does this make any more sense?
 
Bear in mind, I am learning here, and I fully understand that it is more likely I have done something wrong than the foundation framework having any issues.

You commented on Stephen Crowther's post over 2 years

This is my litmus test - notice the <a> in the paragraph - difference in outlook 07/10/13 to everything else.
 

You commented on Stephen Crowther's post over 2 years

I have added some additional css rules to the base foundation (i'm sure everybody has to do this) but nothing that should affect the margins on p and a tags. I tweaked one or two things in the foundation base css, like text sizes, hover states and colours (for clients that support) and i tweaked the mobile width from 95% to 97% to eek a bit more width out on mobile. That's it really??????
It really has me stumped.
Currently only way i can get it to work is by deleting the margin:0 entries AFTER i have inlined. This isn't ideal as my next task is to upload to campaign monitor and make it an editable template. Looking at the way this works, you do need to upload separate HTML and CSS files, otherwise the campaign monitor code snippets, e.g. <unsubscribe> won't parse the right code into the a tags to be styled how I want (or at least thats how i understand it!).
cheers
@media only screen and (max-width: 380px) {
.reduce-logo-320 {
max-width: 120px !important;
padding-top: 15px !important; }
.reduce-text-320 {
font-size: 11px !important; }
}

@media only screen and (max-width: 596px) {
p.indent {margin-left: 20px !important;
margin-right: 20px !important; }

}

.header {
background: #000000;
}

.header .columns {
padding-bottom: 0;
}

.header p {
color: #fff;
padding-top: 15px;
}

.header .wrapper-inner {
padding: 20px;
}

.header .container {
background: transparent;
}

.tab {display: inline-block;
background-color: #fed900;
color: #000000;
font-weight: bold;
padding: 5px 10px 2px 10px;
margin: 0px 0px 0px 0px !important;
Margin: 0px 0px 0px 0px !important;
}

a img {
opacity: 1.0;
}

a img:hover {
opacity: 0.8 !important;
}

You commented on Stephen Crowther's post over 2 years

Ah - i've double posted - when i posted that other thread said it had gotten removed by a bot because it thought it was spam. So i posted this thread with a different title.
Could do with these merged really

You commented on Stephen Crowther's post over 2 years

Hmmmm never used codepen before - i'll try and figure something out!
Thanks!

You commented on Stephen Crowther's post over 2 years

Yeh I've read up on the margin/Margin thing. That is covered in foundation as it is written both ways each time.
Ive tried using important too, although strictly speaking this isn't a media query and shouldn't need it, I'm just trying to override a (non !important) inline style for outlook 07/10/13 only.

You commented on Stephen Crowther's post over 2 years

PS. Just posted this once, and for some reason it was immediately removed?

Posts Followed

No Content

Following

  • No Content

Followers