Newsletter CSS

By Toledoh - October 18, 2012

Hi Guys,

Is there any way to include styles in the newsletters? I know that we are meant to use inline styles, and in the template I'm tying font sizes, colours etc into the <td>'s but is there any way to control elements that my client changes?

ie. They will be inserting links into the body of an email. I don't wan these links to show up blue as default... I want them white.

Any ideas?
Cheers,

Tim (toledoh.com.au)

Re: [Toledoh] Newsletter CSS

Hi,

There is a way to include a custom style sheet for the wysiwyg editor. If you go to the directory cmsAdmin/lib and create a file called wysiwyg_custom.css, then add what styles you want to appear in the editor. This will automatically replace the default wysiwyg.css when your carrying out editing.

These changes will only appear in the wysiswg editor, and will not appear on the live site or in any newsletters you send.

Do you want these changes to only appear within your newsletter wysiwyg editor? This is possible, but isn't so straight forward and will required editing of the CMS Builder code.

Thanks
Greg Thomas







PHP Programmer - interactivetools.com

Re: [greg] Newsletter CSS

By Toledoh - October 19, 2012

Hi Greg,

Because the email is going out to peoples email accounts, I cannot use an external stylesheet - all the font colors, sizes, background colors etc need to be inline css - which I've done via the template.

However, there's some styles things that I can't set up in the template, such as <a>... I need some form of global style.

I was wondering if I could set up something like this in the email - even though there's no <head></head>;

<style>
a{color:red; text-decoration:none;}
a:hover{color:yellow;}
</style>

Cheers,

Tim (toledoh.com.au)

Re: [Toledoh] Newsletter CSS

By Dave - October 21, 2012

Hi Tim,

In order for the styles to work everywhere you need to have the <style> tag in the the <body>. Even though that isn't strictly valid XHTML it's the only way to make it work across all the different email clients and it's what is done in practice in the industry.

To support that you need to edit /lib/wysiwyg.php, search for "Spellchecker settings", then add the code in red, save, and reload the page with the wysiwyg.

// allow style in body (invalid XHTML but required to style html emails since
// ... many email clients won't display remote styles or styles from head)
// Reference: http://www.tinymce.com/wiki.php/Configuration:valid_children
valid_children : "+body[style]",


// Spellchecker settings - ...


You should then be able to click the HTML button and paste in your <style> block and have it affect the display on the content in the wysiwyg and be saved with the HTML when you save the page.

Hope that helps, let me know any questions (we'll release this update to the wysiwyg settings in the next release of CMSB).
Dave Edis - Senior Developer
interactivetools.com

Re: [Toledoh] Newsletter CSS

By Dave - October 21, 2012

>Would it be possible to have a textbox in the settings that allows us to add styles?

We're working on adding templates to newsletter builder, so we could break that out as a separate field, but the nice part about having it in the wysiwyg content is the wysiwyg content instantly reflects whatever the CSS specifies.
Dave Edis - Senior Developer
interactivetools.com