Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

CSS in HTML Email

  • 06-01-2004 09:24PM
    #1
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭


    I've written a newsletter application that is using one of those new fangled WYSIWYG editors.
    That's all working just fine. The template page is displayed perfectly in the editor including all the CSS style markups.

    When I send the newsletter it send it as HTML alright but it doesn't seem to send any of the CSS markup, when I view source in the browser it seems to have stripped everything but the bare bones of the markup.

    Is it a mail client setting?

    If so, how do I write a page so that the email uses the same look and feel as the website?

    Thanks


Comments

  • #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    Are you using the CSS style inside the html tag:

    htmlBody = htmlBody & "<font face=""verdana"" style = ""font-size:10px"">"

    I mean inside the email body

    or is just for the page as import CSS = <style type="text/css">
    <!--
    @import url("../CSS_BS2000.css");
    -->
    </style>

    or relative link = <link href="../CSS_BS2000.css" rel="stylesheet" type="text/css">


  • #3
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    I'm using the link tag, but I'm giving an absolute reference to the css file.


  • #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    What program are you using?


  • #5
    whiteshadow
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭whiteshadow


    You gotta embed the style sheet instead of linking it ( absolute or relative)

    <title>Newsletter</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>
    A.link:hover {
    COLOR: #003399; TEXT-DECORATION: underline; background: #fff215;
    }
    A.link {
    FONT-WEIGHT: bold; FONT-SIZE: 7pt; COLOR: #000099; FONT-FAMILY: Verdana; TEXT-DECORATION: none;
    }
    A.linkpink:hover {
    COLOR: #0000ff; TEXT-DECORATION: underline; FONT-WEIGHT: bold; background: #ffffff;
    }
    A.linkpink {
    FONT-SIZE: 10pt; COLOR: #47649F; FONT-FAMILY: Verdana; FONT-WEIGHT: bold
    }
    p { FONT-WEIGHT: none; FONT-SIZE: 10pt; COLOR: #003399; FONT-FAMILY: Verdana; TEXT-DECORATION: none; margin-top: -18px}

    p.small { FONT-WEIGHT: none; FONT-SIZE: 6pt; COLOR: #565785; FONT-FAMILY: Verdana; TEXT-DECORATION: none }

    h1{
    font-family: Verdana;
    font-size: 10pt;
    background: #fff215;
    font-weight: bold;
    color: #003399;
    border-bottom: ;
    white-space: nowrap;
    }
    </style>

    <body> etc...

    it'll work then.


  • #6
    tricky D
    Closed Accounts Posts: 9,698 ✭✭✭tricky D


    careful, even embedding it has problems like some mail clients dumping the style stuff out of the head and into the body (esp NS mailer). At times I've actually had to revert to tables and fonts for some newsletters as the box model stuff was refusing to work with reliability. Not good for accessibility.

    As ever, keep it simple and test ad nauseam.


  • Advertisement
  • #7
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    Thanks, ended up just using vanilla HTML. Works just fine for what I want.
    Might try embedding the stylesheet though.


Advertisement