• All times are UTC
  • It is currently 7:56am, Sat 21 Nov, 2009

Where do I put a style sheet?

Solutions for other phplisters - Questions go in the questions and problems forum

Moderators: Dragonrider, J_S, Hernol, vancoovur, H2B2, bevan, Heritage

Post a reply

Where do I put a style sheet?

Postby David Darrow » 9:24pm, Fri 13 Apr, 2007

Does anyone know how to affect HTML formatted templates? Since it appears am only allowed to include everything , which on a "page" would be found between the <body> tags, where do I insert CSS designations to affect a certain HTML template? When I insert a Styles section (<styles>...) it gets blown out in the editor. Disappears.

I'd like for a template to have a whole styles section, like
Code: Select all
<style>
.floatleft { float: left; margin-right: 15px; margin-bottom: 2px; }
.floatleft1 { border: 1px solid #000; float: left; margin-right: 15px; margin-bottom: 2px; }
.floatright { float: right; margin-left: 15px; margin-bottom: 2px; }
.floatright1 { border: 1px solid #000; float: right; margin-left: 15px; margin-bottom: 2px; }
</style>
But I don't know where to put it.

--David
David Darrow
phplister
 
Posts: 14
Joined: 12:28am, Thu 01 Mar, 2007
Top

Postby H2B2 » 10:02pm, Fri 13 Apr, 2007

This might be caused by FCKeditor. You could try to disable FCKeditor in config.php and see if that improves things. Just paste your html and css code in the editing window.

BTW, using inline styles is recommended to avoid trouble with webmail clients that change or strip style declarations.
Ref: http://docs.phplist.com/TemplatesInfo
H2B2
phpList Guru
 
Posts: 5890
Joined: 1:51am, Wed 15 Mar, 2006
Top

Postby David Darrow » 10:09pm, Fri 13 Apr, 2007

Thanks for that...

Most inline I know how to write, but I don't know the CSS for affecting links...

What's the inline CSS for a color choice and also a hover effect on a link? I want it to be a different color than the other text, with no underline, then display an underline when hovering ober it, in the e-mail.
David Darrow
phplister
 
Posts: 14
Joined: 12:28am, Thu 01 Mar, 2007
Top

Postby SwissBliss » 4:11pm, Mon 21 May, 2007

I needed to have different links in the body text to that in a right margin colum. I created the links in the BODY tag for document default, and the .SIDE style for the links in the column. Of course, you could create more styles with different link characteristics as you wish.

Hope this helps!


Code: Select all
<head>
<style type="text/css">
<!--
.side {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.side A:link{text-decoration: none;color: #00ffff;}
.side A:visited {text-decoration: none;color: #00ffff;}
.side A:active {text-decoration: none;color: #00ffff; }
.side A:hover {text-decoration: none;color: #00ffff;}
-->
</style>
</head>
<body vlink="#FF6600" alink="#FF6600">
SwissBliss
phplist newbie
 
Posts: 4
Joined: 7:32am, Thu 26 Apr, 2007
Location: Zürich
Top

Postby David Darrow » 4:16pm, Mon 21 May, 2007

But where is this "default"? When I place such things in my HTML document, it gets stripped out by the built in editor.
David Darrow
phplister
 
Posts: 14
Joined: 12:28am, Thu 01 Mar, 2007
Top

Postby SwissBliss » 2:53pm, Tue 22 May, 2007

Quit PHPList, open the file:

admin/fckeditor/fckconfig.js

...and find the line

Code: Select all
FCKConfig.FullPage = false;

If it is set to false, change it to true.

...re-start PHPList and try to create a new message from scratch (or paste in some html you already created).

This should leave the html tags in your source without stripping, but do some tests with as many different mail clients as possible before you go-live.

Also see if there are any updates to FCKEdit.

If none of that works try flipping over to Tiny MCE (check the docs here for help).
SwissBliss
phplist newbie
 
Posts: 4
Joined: 7:32am, Thu 26 Apr, 2007
Location: Zürich
Top

Postby chrisirmo » 5:42pm, Thu 04 Oct, 2007

SwissBliss wrote:Quit PHPList, open the file:

admin/fckeditor/fckconfig.js

...and find the line

Code: Select all
FCKConfig.FullPage = false;

If it is set to false, change it to true.

...re-start PHPList and try to create a new message from scratch (or paste in some html you already created).

This should leave the html tags in your source without stripping, but do some tests with as many different mail clients as possible before you go-live.

Also see if there are any updates to FCKEdit.

If none of that works try flipping over to Tiny MCE (check the docs here for help).


Changing FCKConfig.FullPage to true doesn't work. My CSS is still getting stripped out. Never had this problem under 2.10.2.

Any ideas that don't involve killing FCKEdit?
chrisirmo
phplist newbie
 
Posts: 4
Joined: 3:46pm, Tue 01 Aug, 2006
Location: Cincinnati, Ohio, USA
Top

Postby H2B2 » 9:56pm, Thu 11 Oct, 2007

This is an interesting article on CSS and webmail:
tjmb wrote:For details about what Gmail, Yahoo, et. al. do when rendering HTML email, see http://www.xavierfrenette.com/articles/ ... n-webmail/
Ref: http://forums.phplist.com/viewtopic.php?p=37795#37795
H2B2
phpList Guru
 
Posts: 5890
Joined: 1:51am, Wed 15 Mar, 2006
Top

Postby H2B2 » 6:32am, Fri 29 Feb, 2008

In this post, fremois indicates that FCKeditor by default does not allow editing the contents of the head tags: http://forums.phplist.com/viewtopic.php?p=44116#44116

His findings suggest FCKeditor will allow editing the full HTML content (including the head tag contents) if you make sure the FCKConfig.FullPage configuration option is set to true, both in fckconfig.js and in fckphplist.php :

In the admin/FCKeditor/fckconfig.js file:
Code: Select all
FCKConfig.FullPage = true

In admin/fckphplist.php on line 381 and on line 576 (phplist 2.10.5):
Code: Select all
FCKConfig.FullPage = true
H2B2
phpList Guru
 
Posts: 5890
Joined: 1:51am, Wed 15 Mar, 2006
Top

Re: Where do I put a style sheet?

Postby sol001 » 2:49am, Thu 18 Jun, 2009

Do the following:

in dreamweaver (or whatever HTML editor you use):

1) open lists / admin / fckphplist.php
Make a backup of this file before you change it.

2) search for

Code: Select all
FCKConfig.FullPage = false;

change all instances you find to :
Code: Select all
FCKConfig.FullPage = true;


3) do the same in fckconfig.js (Make a backup of this file before you change it.)

4) Save both files and upload to your website.

5) Reload the FCKeditor page.

6) Click the "source tab" and past your HTML code in - you should be able to see and add to or edit the head and body tags e.g :


Here is the template that I created - feel free to copy it / use it / hack it up and redesign it in dreamweaver! I'm sure you can improve it if you spend some time on it - especially the inline CSS which is messy cuz I'm being lazy :-)

Code: Select all
<html dir="ltr">
    <head>
        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><style type="text/css">
<!--
a:link {
   color: #FFFFFF;
}
a:visited {
   color: #FF0000;
}
a:hover {
   color: #FFFF00;
}
-->
</style>
    </head>
    <body alink="#990000" style="background-color: rgb(0, 0, 0);">
        <table height="30" cellspacing="0" cellpadding="0" border="0" align="center" width="570" summary="">
            <tbody>
                <tr>
                    <td align="center" width="570">
                    <p><font face="Arial" color="#ffffff" size="1">Welcome to the purpledogdesign.com newsletter. If you can't read this or see the images, <a href="http://www.purpledogdesign.com"><font color="#ffffff">visit us online</font></a></font><br />
                    <font face="Arial" color="#ffffff" size="1">To ensure that our emails get to your inbox, please add listmaster@purpledogdesign.com to your address book</font></p>
                    </td>
                </tr>
            </tbody>
        </table>
        <p><font face="Arial" color="#ffffff" size="1"> </font></p>
        <div align="center">
        <div align="center">&nbsp;</div>
        <table height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#000000" align="center" width="570" summary="">
            <tbody>
                <tr style="height: 69.75pt;">
                    <td bgcolor="#660066" width="10" rowspan="7">&nbsp;</td>
                    <td height="107" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="padding: 0.75pt; height: 69.75pt;" colspan="7">
                    <div align="center">
                    <p><a href="http://www.purpledogdesign.com"><img height="90" border="0" width="186" src="http://www.purpledogdesign.com/images/logos/logo.jpg" alt="PDD Logo" /></a></p>
                    </div>
                    </td>
                    <td bgcolor="#660066" width="10" rowspan="7">
                    <p align="left">&nbsp;</p>
                    </td>
                </tr>
                <tr style="height: 15.75pt;">
                    <td bgcolor="#660066" width="30" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <p align="left" class="style1"><font color="#000000"><span style="font-family: Arial;">&nbsp;</span></font></p>
                    </td>
                    <td bgcolor="#660066" width="98" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <div align="center">&nbsp;</div>
                    <p align="center" style="text-align: center;" class="style1"><font face="Arial" size="1"><a type="about us" title="about us" name="about us" id="new" href="http://www.purpledogdesign.com/about.php"><font color="#ffffff">ABOUT US</font></a></font></p>
                    <font face="Arial" size="1">                    </font>
                    <div align="center"><font face="Arial" size="1">&nbsp;</font></div>
                    <font face="Arial" size="1">                    </font></td>
                    <td bgcolor="#660066" width="98" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <div align="center">&nbsp;</div>
                    <p align="center" style="text-align: center;" class="style1"><font face="Arial" color="#000000" size="1"><font><font face="Arial" size="1"><font><font face="Arial" size="1"><font size="1"><a type="services" title="services" name="services" id="services" href="http://www.purpledogdesign.com/services.php"><font color="#ffffff">SERVICES</font></a></font></font></font></font></font></font></p>
                    <div align="center">&nbsp;</div>
                    </td>
                    <td bgcolor="#660066" width="98" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <div align="center">&nbsp;</div>
                    <p align="center" style="text-align: center;" class="style1"><font face="Arial" color="#000000" size="1"><font><font face="Arial" size="1"><font><font face="Arial" size="1"><font size="1"><a title="portfolio" name="portfolio" id="portfolio" href="http://www.purpledogdesign.com/portfolio.php"><font color="#ffffff">PORTFOLIO</font></a></font></font></font></font></font></font></p>
                    <div align="center">&nbsp;</div>
                    </td>
                    <td bgcolor="#660066" width="98" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <div align="center">&nbsp;</div>
                    <p align="center" style="text-align: center;" class="style1"><font face="Arial" color="#000000" size="1"><font><font face="Arial" size="1"><font><font face="Arial" size="1"><font size="1"><a title="clients" name="clients" id="clients" href="http://www.purpledogdesign.com/clients.php"><font color="#ffffff">CLIENTS</font></a></font></font></font></font></font></font></p>
                    <div align="center">&nbsp;</div>
                    </td>
                    <td bgcolor="#660066" width="98" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <div align="center">&nbsp;</div>
                    <p align="center" style="text-align: center;" class="style1"><font face="Arial" size="1"><a title="contact us" name="contact us" id="contact us" href="http://www.purpledogdesign.com/contact.php"><font color="#ffffff">CONTACT</font></a></font></p>
                    <div align="center">&nbsp;</div>
                    </td>
                    <td bgcolor="#660066" width="30" style="padding: 0.75pt; height: 15.75pt; background-color: rgb(0, 0, 0);" cellpadding="0" cellspacing="0">
                    <p align="left" style="text-align: center;">&nbsp;</p>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#660066" width="30" cellpadding="0" cellspacing="0" style="padding: 0.75pt; height: 15.75pt;" left="" class="style1"><font color="#000000"><span style="font-family: Arial;">&nbsp;</span></font>
                    <p>&nbsp;</p>
                    </td>
                    <td bgcolor="#660066" border="0" cellpadding="0" cellspacing="0" colspan="5" style="padding: 0.75pt; height: 15.75pt;">
                    <div align="left">
                    <div align="left">
                    <table height="24" cellspacing="0" cellpadding="0" bordercolor="#cccccc" border="1" bgcolor="#ffffff" align="center" width="100%" summary="">
                        <tbody>
                            <tr>
                                <th height="20" bgcolor="#990000" width="50%" scope="col" border="0" cellpadding="0" cellspacing="0">
                                <div align="center"><font face="Arial" color="#ffffff" size="1"> TO UPDATE YOUR DETAILS [PREFERENCES]</font></div>
                                </th>
                                <th height="20" bgcolor="#990000" width="50%" scope="col" border="0" cellpadding="0" cellspacing="0">
                                <div align="center"><font face="Arial" color="#ffffff" size="1"> TO FORWARD TO A FRIEND [FORWARD]</font></div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                    </div>
                    </td>
                    <td bgcolor="#660066" width="30" cellpadding="0" cellspacing="0" style="padding: 0.75pt; height: 15.75pt;">
                    <p align="left" style="text-align: center;">&nbsp;</p>
                    </td>
                </tr>
                <tr>
                    <td height="93" bgcolor="#000000" width="570" style="padding: 0.75pt;" colspan="7">
                    <p align="left"><font color="#000000"><span style="font-family: Arial;">[CONTENT]</span></font></p>
                    </td>
                </tr>
                <tr>
                    <td height="427" colspan="7" style="padding: 0.75pt; height: 145.9pt;"><blockquote>
                    <p align="left" class="style1"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;">You are receiving this message because you requested to be kept informed of our news &amp; latest offers.                     </span></font></p>
                    <p align="left"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;">To change your email or contact details, [PREFERENCES]</span></font></p>
                    <p align="left"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;">Want to tell your friends? Just [FORWARD]</span></font></p>
                    <p align="left" class="style1"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;">If you have received this from a friend and you would like to join our mailing list, [SUBSCRIBE]</span></font></p>
                    <p align="left" class="style1"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;">To ensure that you receive these e-mails safely, please add <u><font color="#ffffff">listaster@purpledogdesign.com</font></u> to your e-mail Address Book or Safe List.</span></font></p>
                    <p align="left" class="style1"><font color="#ffffff"><span style="font-size: 7.5pt; font-family: Arial;"> If you no longer wish to receive our emails, [UNSUBSCRIBE]</span></font></p>
                    <p align="left" class="style1"><font face="Arial" size="1">[USERTRACK]</font></p>
                    </blockquote></td>
                </tr>
                <tr>
                    <td height="10" bgcolor="#660066" colspan="7">&nbsp;</td>
                </tr>
            </tbody>
        </table>
        </div>
    </body>
</html>
sol001
PL Nut
 
Posts: 16
Joined: 9:20am, Fri 22 Feb, 2008
Top
Post a reply

Return to Answers, Howtos, Tips & Tricks

Who is online

Users browsing this forum: No registered users and 0 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group