Solved

Changing Background color in html email sent through php

Posted on 2008-09-30
26
2,181 Views
Last Modified: 2010-04-21
I am creating a "Tell a Friend" page that sends a postcard to the desired recipient.
The php script I have sends the email to the recipient.

The code all works but I am trying to get the email to look better when it is received.
Right now it is plain text, a white background, and the image.

I would like to change the background color and add a border to the image (at the very least).

Nothing I seem to be doing is working. The only variable I've been able to change is the text color.

URGENT! PLEASE HELP!
<?php

if (!$FriendEmail) {

?>

<?php

}

else {

if ($FriendEmail) {

 

$subject = "Message from $SenderName from www.campushousing.com";

//format the message as html and add the image here.  something like:

$message = "<html>";

$message .= "<head>";

$message .= "<title>www.campushousing.com</title>";

$message .= "</head>";

$message .= "<body bgcolor=\"green\">";

$message .= "<font face=\"arial\" color=\"black\">";

$message .= "<div>$FriendName,</div><div>".$emailtext ."</div><div><img src='http://www.campushousing.com/postcards/CLVNoWorriesApartmentHunting.jpg' alt='' /></div><div>$SenderName</div>";

$message .= "</font>";

$message .= "</body>";

$message .= "</html>";

$headers = "From: $SenderEmail\r\n" .

    "Reply-To: $SenderEmail\r\n" .

    'MIME-Version: 1.0' . "\r\n" .

    'Content-type: text/html; charset=iso-8859-1' . "\r\n" .

    'X-Mailer: PHP/' . phpversion();

 

mail($FriendEmail, $subject, $message, $headers);

 

                    

  }

 

 

echo "<center><br><br><font face=Arial size=3 color=black>Thank you <font color=green>$SenderName</font>. The email has been sent to <font color=green>$FriendName</font>. <br><br></font><p>";

}

?>

Open in new window

0
Comment
Question by:natsully
  • 16
  • 7
  • 2
  • +1
26 Comments
 
LVL 9

Expert Comment

by:khaledf
ID: 22605966
try this code,

I have put your content inside a div and made css style to specify the background color
<?php

if (!$FriendEmail) {

?>

<?php

}

else {

if ($FriendEmail) {
 

$subject = "Message from $SenderName from www.campushousing.com";

//format the message as html and add the image here.  something like:

$message = "<html>";

$message .= "<head>";

$message .= "<title>www.campushousing.com</title>";

$message .= "<style type="text/css" media="screen">";

$message .= "#bgdiv{background: #ddd;}";

$message .= "</style>";

$message .= "</head>";

$message .= "<body>";

$message .= "<div id="bgdiv">";

$message .= "<font face=\"arial\" color=\"black\">";

$message .= "<div>$FriendName,</div><div>".$emailtext ."</div><div><img src='http://www.campushousing.com/postcards/CLVNoWorriesApartmentHunting.jpg' alt='' /></div><div>$SenderName</div>";

$message .= "</font>";

$message .= "</div>";

$message .= "</body>";

$message .= "</html>";

$headers = "From: $SenderEmail\r\n" .

    "Reply-To: $SenderEmail\r\n" .

    'MIME-Version: 1.0' . "\r\n" .

    'Content-type: text/html; charset=iso-8859-1' . "\r\n" .

    'X-Mailer: PHP/' . phpversion();
 

mail($FriendEmail, $subject, $message, $headers);
 
 

  }
 
 

echo "<center><br><br><font face=Arial size=3 color=black>Thank you <font color=green>$SenderName</font>. The email has been sent to <font color=green>$FriendName</font>. <br><br></font><p>";

}

?>

Open in new window

0
 
LVL 35

Expert Comment

by:torimar
ID: 22606023
Hi,

try specifying a content-type as shown in this example:
http://www.webcheatsheet.com/PHP/send_email_text_html_attachment.php#html


Even easier is the example below (although I find it hard to believe that it works):
http://www.webhostingtalk.com/showthread.php?t=416467
0
 

Author Comment

by:natsully
ID: 22606048
When I inserted the code and tested it out, when I click "Submit" from the page before it gives me and error, "Parse error: parse error in /usr/local/plesk/apache/vhosts/campushousing.com/httpdocs/acu/html/thanks_test.php on line 160" (which in your example is line 14).
0
 

Author Comment

by:natsully
ID: 22606053
that last message was to khaledf
0
 
LVL 4

Assisted Solution

by:lokeshv
lokeshv earned 100 total points
ID: 22606288
you need to escape your quotes

mean

$message .= "<div id="bgdiv">";

to

$message .= "<div id=\"bgdiv\">";


btw its better to text in single quotes so php dont need to parse it.

Thanks
0
 

Author Comment

by:natsully
ID: 22606447
the escape quotes didn't help.
It's still giving me the "Parse error: parse error in /usr/local/plesk/apache/vhosts/campushousing.com/httpdocs/acu/html/thanks_test.php on line 160"  which is the:
"$message .= "<style type="text/css" media="screen">";" line

What do you mean by "text in single quotes so php dont need to parse it"?

I'm really new at this and I'm not sure what "parse" even means.
Needing a solution quickly.
0
 

Author Comment

by:natsully
ID: 22606507
ok I see what you're saying now. I missed the escape quotes on the "text/css" and media="screen"

Can you still explain the "text in single quotes so php don't need to parse it"?
0
 
LVL 4

Expert Comment

by:lokeshv
ID: 22606689
actually php engine parse the double quotes text looking for php code, and treat single quote text as string (static text no php code).

so it saves some time in parsing your code.


Thanks
0
 

Author Comment

by:natsully
ID: 22607610
ok things are working great... when the email is sent to webmail.
Yahoo looks great, Gmail is ok.
but Outlook 2007 just shows jibberish and html code.

Is there
a) a work around for Outlook 2007
or
b) a way to just send a plain text and image to Mail Clients that won't display the html email(Outlook 2007)?

Attached is my new code.

Example can be found at http://www.campushousing.com/acu/html/tellafriend_test.php
<?php

if (!$FriendEmail) {

?>

<?php

}

else {

if ($FriendEmail) {

 

$subject = "Message from $SenderName from www.campushousing.com";

//format the message as html and add the image here.  something like:

$message .= "<html>";

$message .= "<head>";

$message .= "<style type=\"text/css\" media=\"screen\">";

$message .= "a:link, a:visited {color:#A0C804; text-decoration:none;}";

$message .= "a:hover {color:#339933; text-decoration:none;}";

$message .= "body {background-color:#FFFFFF;";

$message .= "font-family:Arial, Helvetica, sans-serif;";

$message .= "color:#514f50;";

$message .= "font-size:10px;}";

$message .= "p {font-size: 11px;";

$message .= "line-height: 16px;";

$message .= "font-weight: normal;";

$message .= "padding-right:20px;";

$message .= "padding-left:17px;";

$message .= "margin-bottom:-5pt;}";

$message .= "h1 {font-size: 14px;";

$message .= "line-height: normal;";

$message .= "font-weight:bold;";

$message .= "margin-bottom:-5pt;}";

$message .= ".page {background-color:#ecebeb;";

$message .= "padding:0px;";

$message .= "width:570px;}";

$message .= ".content {width:570px;";

$message .= "height:auto;";

$message .= "background-color:#FFFFFF;";

$message .= "padding:0px;";

$message .= "border:#ECEBEB;}";

$message .= ".unsubscribe {width:570px;";

$message .= "padding-left:0px;";

$message .= "padding-right:0px;}";

$message .= ".unsubscribe p{font-size:10px;}";

$message .= ".smallprint p{font-size: 9px;";

$message .= "line-height: 16px;";

$message .= "font-weight: normal;";

$message .= "padding-right:20px;";

$message .= "padding-left:17px;";

$message .= "margin-bottom:-5pt;}";

$message .= ".style2 {font-size: 30px}";

$message .= ".style5 {color: #A0C804;";

$message .= "font-size: 30px;";

$message .= "font-weight: bold;}";

$message .= "</style>";

$message .= "<body>";

$message .= "<div class=\"page\">";

$message .= "<div class=\"content\">";

$message .= "<table width=\"570\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#ECEBEB\">";

$message .= "<tr>";

$message .= "<td><img src=\"http://www.campushousing.com/postcards/CLVNoWorriesApartmentHunting05.jpg\" alt=\"no worries!\" width=\"570\" height=\"847\" /></td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td><table width=\"570\" cellpadding=\"0\" cellspacing=\"0\">";

$message .= "<tr>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td width=\"17\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "<td width=\"536\" cellpadding=\"20\" align=\"left\"><br>";

$message .= "<p>$FriendName,</p><br>";

$message .= "<p>".$emailtext."</p><br>";

$message .= "<p>-$SenderName<br><br></p>  ";            

$message .= "</td>";

$message .= "<td width=\"17\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\">&nbsp;</td>";

$message .= "</tr>";

$message .= "</table></td>";

$message .= "</tr>";

$message .= "</table>"; 

$message .= "</div>";

$message .= "</div>";

$message .= "</body>";

$message .= "</html>";

$headers = "From: $SenderEmail\r\n" .

    "Reply-To: $SenderEmail\r\n" .

    'MIME-Version: 1.0' . "\r\n" .

    'Content-type: text/html; charset=iso-8859-1' . "\r\n" .

    'X-Mailer: PHP/' . phpversion();

 

mail($FriendEmail, $subject, $message, $headers);

 

                    

  }

 

 

echo "<center><br><br><font face=Arial size=3 color=black>Thank you <font color=green>$SenderName</font>. The email has been sent to <font color=green>$FriendName</font>. <br><br></font><p>";

}

?>

Open in new window

0
 

Author Comment

by:natsully
ID: 22607630
torimar,
The first link you sent has an example of this I think but I'm unsure on how to incorporate that with my code?
0
 
LVL 9

Expert Comment

by:khaledf
ID: 22607862
natsully, sorry for the mistake i made, I forgot to escape the double quotes. anyhow glad it is working for you.

for outlook, I hate microsoft and how thy screw up when it comes to formatting.

try sending a well formated email from outlook and see how it will mess up in google.
the code that I have given is nothing spectial and should have worked with outlook but what can we do.

did you try to add doctype above <html>?
for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
 
LVL 9

Expert Comment

by:khaledf
ID: 22607881
check this link, it confirms your problem.
http://blogs.zdnet.com/microsoft/?p=200
0
 

Author Comment

by:natsully
ID: 22608661
Still showing the code and jibberish?
Any ideas or am I just screwed when it comes to Outlook?

I would settle for Outlook to just get a plain text "Here's the postcard" and the image.

Thoughts?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:natsully
ID: 22608667
here's exactly what Outlook shows.
Content-type: text/html; charset=iso-8859-1
 

X-Mailer: PHP/4.3.2

Return-Path: anonymous@ns3.actwd.net

X-OriginalArrivalTime: 30 Sep 2008 18:20:23.0387 (UTC)

FILETIME=[343DDAB0:01C92329]
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><s

tyle type="text/css" media="screen">a:link, a:visited {color:#A0C804;

text-decoration:none;}a:hover {color:#339933; text-decoration:none;}body

{background-color:#FFFFFF;font-family:Arial, Helvetica,

sans-serif;color:#514f50;font-size:10px;}p {font-size: 11px;line-height:

16px;font-weight:

normal;padding-right:20px;padding-left:17px;margin-bottom:-5pt;}h1

{font-size: 14px;line-height:

normal;font-weight:bold;margin-bottom:-5pt;}.page

{background-color:#ecebeb;padding:0px;width:570px;}.content

{width:570px;height:auto;background-color:#FFFFFF;padding:0px;border:#EC

EBEB;}.unsubscribe

{width:570px;padding-left:0px;padding-right:0px;}.unsubscribe

p{font-size:10px;}.smallprint p{font-size: 9px;line-height:

16px;font-weight:

normal;padding-right:20px;padding-left:17px;margin-bottom:-5pt;}.style2

{font-size: 30px}.style5 {color: #A0C804;font-size: 30px;font-weight:

bold;}</style><body><div class="page"><div class="content"><table

width="570" cellpadding="0" cellspacing="0"

bordercolor="#ECEBEB"><tr><td><img

src="http://www.campushousing.com/postcards/CLVNoWorriesApartmentHunting

05.jpg" alt="no worries!" width="570" height="847"

/></td></tr><tr><td><table width="570" cellpadding="0"

cellspacing="0"><tr><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td></tr><tr><td width="17" align="left"

bgcolor="#ECEBEB">&nbsp;</td><td width="536" cellpadding="20"

align="left"><br><p>Kevin Gregory,</p><br><p>Hey, I found this website

and I thought you would like it.
 
 
 

Check it out.  
 

It is www.campushousing.com.</p><br><p>-Natalie Sullivan<br><br></p>

</td><td width="17" align="left"

bgcolor="#ECEBEB">&nbsp;</td></tr><tr><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td><td height="0" align="left"

bgcolor="#ECEBEB">&nbsp;</td></tr></table></td></tr></table></div></div>

</body></html>

Open in new window

0
 

Author Comment

by:natsully
ID: 22608708
add Entourage to the Mail client that is showing the code too.
0
 
LVL 9

Expert Comment

by:khaledf
ID: 22609037
actually outlook7 has imposed many limitations because it is not using IE rendering engine anymore, it is using the same limited HTML rendering engine used by MS Word.
it has no support for

--background images
--forms,Flash, Animated GIFs
--CSS floats, positioning

0
 

Author Comment

by:natsully
ID: 22609040
on the http://www.webcheatsheet.com/PHP/send_email_text_html_attachment.php#html
i don't understand the "$random_hash = md5(date('r', time())); " function and the "ob_start(); " function.
0
 

Author Comment

by:natsully
ID: 22609053
Thats what I'm reading.
What I'm trying to figure out now is if there is something I can add to the code that instead of displaying the html section in Outlook, it will display a plain text version?
0
 

Author Comment

by:natsully
ID: 22609610
I've sent the exact same design just straight as a html file (without going through the php) and the email looked fine, which leads me to believe it is an issue somewhere in the coding or the way Outlook is reading the code passed from the php?
0
 
LVL 9

Accepted Solution

by:
khaledf earned 400 total points
ID: 22610088
try this code, i have moved the MIME-Version: 1.0 to the end of headers

<?php

if (!$FriendEmail) {

?>

<?php

}

else {

if ($FriendEmail) {

 

$subject = "Message from $SenderName from www.campushousing.com";

//format the message as html and add the image here.  something like:

$message .= "<html>";

$message .= "<head>";

$message .= "<style type=\"text/css\" media=\"screen\">";

$message .= "a:link, a:visited {color:#A0C804; text-decoration:none;}";

$message .= "a:hover {color:#339933; text-decoration:none;}";

$message .= "body {background-color:#FFFFFF;";

$message .= "font-family:Arial, Helvetica, sans-serif;";

$message .= "color:#514f50;";

$message .= "font-size:10px;}";

$message .= "p {font-size: 11px;";

$message .= "line-height: 16px;";

$message .= "font-weight: normal;";

$message .= "padding-right:20px;";

$message .= "padding-left:17px;";

$message .= "margin-bottom:-5pt;}";

$message .= "h1 {font-size: 14px;";

$message .= "line-height: normal;";

$message .= "font-weight:bold;";

$message .= "margin-bottom:-5pt;}";

$message .= ".page {background-color:#ecebeb;";

$message .= "padding:0px;";

$message .= "width:570px;}";

$message .= ".content {width:570px;";

$message .= "height:auto;";

$message .= "background-color:#FFFFFF;";

$message .= "padding:0px;";

$message .= "border:#ECEBEB;}";

$message .= ".unsubscribe {width:570px;";

$message .= "padding-left:0px;";

$message .= "padding-right:0px;}";

$message .= ".unsubscribe p{font-size:10px;}";

$message .= ".smallprint p{font-size: 9px;";

$message .= "line-height: 16px;";

$message .= "font-weight: normal;";

$message .= "padding-right:20px;";

$message .= "padding-left:17px;";

$message .= "margin-bottom:-5pt;}";

$message .= ".style2 {font-size: 30px}";

$message .= ".style5 {color: #A0C804;";

$message .= "font-size: 30px;";

$message .= "font-weight: bold;}";

$message .= "</style>";

$message .= "<body>";

$message .= "<div class=\"page\">";

$message .= "<div class=\"content\">";

$message .= "<table width=\"570\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#ECEBEB\">";

$message .= "<tr>";

$message .= "<td><img src=\"http://www.campushousing.com/postcards/CLVNoWorriesApartmentHunting05.jpg\" alt=\"no worries!\" width=\"570\" height=\"847\" /></td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td><table width=\"570\" cellpadding=\"0\" cellspacing=\"0\">";

$message .= "<tr>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td width=\"17\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "<td width=\"536\" cellpadding=\"20\" align=\"left\"><br>";

$message .= "<p>$FriendName,</p><br>";

$message .= "<p>".$emailtext."</p><br>";

$message .= "<p>-$SenderName<br><br></p>  ";            

$message .= "</td>";

$message .= "<td width=\"17\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "</tr>";

$message .= "<tr>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "<td height=\"0\" align=\"left\" bgcolor=\"#ECEBEB\"> </td>";

$message .= "</tr>";

$message .= "</table></td>";

$message .= "</tr>";

$message .= "</table>"; 

$message .= "</div>";

$message .= "</div>";

$message .= "</body>";

$message .= "</html>";

$headers = "From: $SenderEmail\r\n" .

    "Reply-To: $SenderEmail\r\n" .

    'Content-type: text/html; charset=iso-8859-1' . "\r\n" .

    'X-Mailer: PHP/' . phpversion() . "\r\n";

    'MIME-Version: 1.0' . "\r\n" .
 

 

mail($FriendEmail, $subject, $message, $headers);

 

                    

  }

 

 

echo "<center><br><br><font face=Arial size=3 color=black>Thank you <font color=green>$SenderName</font>. The email has been sent to <font color=green>$FriendName</font>. <br><br></font><p>";

}

?>

Open in new window

0
 

Author Comment

by:natsully
ID: 22614200
We're getting close.

Most of the html is coming through as it's supposed to... not with the jibberish.
There is one line that shows above where the actual html content shows up that says:

"X-Mailer: PHP/4.3.2 Return-Path: anonymous@ns3.actwd.net X-OriginalArrivalTime: 01 Oct 2008 13:49:12.0425 (UTC) FILETIME=[7C67D590:01C923CC]"

SO CLOSE! lol
any ideas on how to remove this?
0
 

Author Comment

by:natsully
ID: 22615037
If I take out the
"   'X-Mailer: PHP/' . phpversion() . "\r\n";
    'MIME-Version: 1.0' . "\r\n" . "

Then it shows"Return-Path: anonymous@ns3.actwd.net X-OriginalArrivalTime: 01 Oct 2008 14:50:51.0449 (UTC) FILETIME=[19321A90:01C923D5]"
0
 
LVL 9

Expert Comment

by:khaledf
ID: 22619346
I'm using outlook 2003 and the headers show fine after making the modification in my last post. let me see why outlook 2007 is not understanding the headers properly.
0
 

Author Comment

by:natsully
ID: 22619395
Yeah, the last post was def. a great improvement!
It will show the image and the message but it throws in the extra line of code in Office 2007 and in Entourage.

I'm developing a great hate for Office 2007 through this all! lol!
0
 
LVL 9

Assisted Solution

by:khaledf
khaledf earned 400 total points
ID: 22619767
are you running the site on linux?

change all "\r\n" to "\n"
0
 

Author Closing Comment

by:natsully
ID: 31501563
THANK YOU SOO MUCH!!
You really helped me out!!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now