SquirrelMail - Webmail for Nuts!

When saving, enter the following:

   ###   #######    ###     _____          
    #         ##   ## ##   (_   _)         
    #        ##   ##   ##    | |   ######  
    #      ###    ##   ##    | |     ##    
    #     ##      ## ####    | |     ##    
    #    ##        #####     (_)     ##    
   ###   #######     ####            ##    
                                     ##

Visit Preferences to set your user name

== Developing style sheets ==

=== CSS control ===

In order to provide better control of CSS, CSS files are loaded through PHP.

=== Security ===

Use of CSS classes allows to separate styles used by HTML formated mails and interface style.

=== Class names ===

* {{smbutton}} - used for buttons ({{<input>}} and {{<button>}} HTML tags)
* {{smbox}} - used for text fields ({{<input type="text">}} tags)
* {{smselect}} - used for selection boxes ({{<select>}} tags)
* {{smoptions}} - used for option boxes ({{<option>}} tags)
* {{smtextarea}} - used for text boxes ({{<textarea>}} tags)

=== Example ===

<code>
input.smbutton,button.smbutton {
  font-family: ms comic sans,sans-serif;
}
input.smbox {
  font-family: verdana,sans-serif;
}
select.smselect {
  font-family: verdana,sans-serif;
}
options.smoptions {
  font-family: verdana,sans-serif;
}
textarea.smtextarea {
  font-family: monospace;
}
</code>

----

'''TODO: Separate discussion and information in the sections below.'''

----

For those who are interested in customizing !SquirrelMail with CSS, I have created a mod called !CangrejoMail.
If anyone is interested, please mail me at info@cangrejomail.com.ar
-- update september 8, 2007: Version 2.0 is ready! !CangrejoMail is at www.cangrejomail.com.ar. Have a look and tell me what do you think.
-- update 2014: The site !CangrejoMail has moved to http://sourceforge.net/projects/cangrejomail/
----

Not that it's entirely relevant, but users can insert their own stylesheets, albeit with a bit of hacking. Under Options->Displa y Preferences, use any tool you like (I just use the Web Developer Toolbar for Firefox, but many things are out there that do this) to convert the drop-down boxes to text inputs. Then, remove whatever is listed next to "Custom !StyleSheet" and replace it with the following:

Done. I haven't looked at !SquirrelMail's code yet, but I'm guessing what it does is something like this:

<code>
/******SquirrelMail inserting a Stylesheet*******/
echo '<link rel=StyleSheet href="' . $_POST['customstylesheet'] . '"/>';
</code>

Because the choices are present in an "uneditable"(To most users) select item, it assumes that it'll be valid and doesn't check the input against a set of options, such as a table in a database listing available style sheets. This way, you can link !SquirrelMail to your own style sheet. Granted, the problems still arise in that none of the items have "proper" labeling (with class names and ids) but it's something.

You can also use the above "hack" to insert your own !JavaScript. Could be useful...

If anyone finds this interesting, shoot me an e-mail - dgg2@geneseo.edu. Thanks!

----

I want to see more Style Sheet support in !SquirrelMail. The nav side body tag, the main body tag, the addressbook page, the links in the header all need to be assigned classes. Then, the Themes by Style Sheets would really do cool stuff. Check out csszengarden.com/ to see a site which changes looks from merely a switch of a .css file with unaltered HTML.
--- Rudy 
--- mail.monkeybrains.net runs !SquirrelMail.

----
This is a really important point. The hard coded <font color... etc. tags need to be removed. Every HTML element requires his class resp. id attribute. Some div`s and span`s and it`s done. ''Full CSS support'' is the best appearance customization available. --fxl

answer from Bipul

I think you can apply your custom CSS  as default CSS by using ./configure

Then choose 5 for themes and then 2 for CSS.

Now put the value, like ../themes/css/bipul.css whereis bipul.css is my custom CSS file.

Remember, you have to give the full path, like "../themes/css/XXXXXX.css"

----

Hasan Syed Jowhor
CGS Communications,
e-mail: hasan [at] cgscomm.net

Bipul,

Changing the default .css file won't change the "Custom Style Sheet" option, which is profile driven and determined at a users first login when their profile is built.  I think it defaults to the "serif-10.css" option no matter what you do.  One option I've come up with that works is to delete (or rename) the "serif-10.css" file (found in ../themes/css/) and replace it with your own custom stylesheet.  I know this works but it seems like a lame way to do it...  Here's one I made that works pretty well.  Just cut-n-paste the code to a file called "serif-10.css" and drop it into your css directory.  If you've got your "Custom Stylesheet" Option set to "Default" it should work for you.  It's got mouse-over effects which makes it pretty cool.  I still want to find out how to do this the right way though...

Scott

<code>
body, td, th, dd, dt, h1, h2, h3, h4, h5, h6, p, ol, ul, li {
  font-family: helvetica,arial,sans-serif;
}
body, small {
  font-size: 9pt;
}
td, th {
  font-size: 10pt;
}
textarea, pre {
  font-family: monospace;
  font-size: 9pt;
}

a:link       { color: #0000FF }

a:active     { color: #0000FF }

a:visited    { color: #0000FF }

a:hover      { color: #FF6600; text-decoration: underline }

body         { font-family: Verdana; background-color:#CCCCCC }
</code>

----

Christoph Bouvier
e-mail: c.bouvier@gmx.at

It's pretty easy to use custom style sheets: Just run the config tool, enter 5 for themes and 2 for css. Now enter the URL to the css you want to use, ie http://localhost/mystylesheet.css 
That's it!

----

Dwane Lumley
email: dwane@datazone.co.za

Many of us are not using the conf.pl file to change the config file so it can be quite confusing to set a default style sheet, especially since the documentation in the config file does not specify exactly what is required. The default config file does not even specify anything about custom styles. I ran the conf.pl app to set it up then had a look at the config.php file to see what was altered.

It is so simple:

If it is not there then add the following line in your config.php file, although it can be anywhere I would put it just above the themes array at around line 277 more or less above the lines below

<code>
//NB! you must use a fully qualified url to the style
$theme_css = 'http://yourdomain/stylesfolder/stylename.css';

global $theme;

$theme[0]['PATH'] = SM_PATH . 'themes/default_theme.php';
$theme[0]['NAME'] = 'Default';

$theme[1]['PATH'] = SM_PATH . 'themes/plain_blue_theme.php';
$theme[1]['NAME'] = 'Plain Blue';

$theme[1]['PATH'] etc...........
</code>

(NB! If you run the conf.pl app most of the comments are removed and the line number given will not be accurate. But if you are then you can just set your default style there anyway)

i.e.
$theme_css = 'http://www.example.com/squirrelmail/themes/css/default.css'//Obviously remember to upload the style sheet as well.

This style is applied to all themes available within the system. !SquirrelMail developers have not allowd multiple styles to be applied to multiple themes.

Just a short note: I would not recommend changing files other than the config file. The reason for this is that when you upgrade it can be a nightmare to remember what you did and where you changed it. You don't need to alter other files anyway, that is unless you build in functionality for multiple style sheets. If you get the urge then please share your code.

Hope this helps.
Dwane Lumley

----
rumi
rumi@tweenpath.com
www.tweenpath.com

To change the default theme, I guess you need to follow the steps (for example I used 'tweenpath' to create theme & cascade style sheet

1. Create your theme 'tweenpath.php'. Put it /themes directory
2. Create your CSS 'tweenpath.css' . Put it /themes/css directory
3. Open 'config.php' file from /config directory. Add your theme as below (36 is the chronological term, yours could vary naturally)-

<code>
$theme[36]['PATH'] = SM_PATH . 'themes/tweenpath.php';
$theme[36]['NAME'] = 'tweenpath';
</code>

Find these lines-

<code>
$theme_default = 0;
$theme_css = '';
</code>

& change them to-

<code>
$theme_default = 36;
$theme_css = '../themes/css/tweenpath.css';
</code>

The later line $theme_css = 'Absolute_Path_to_CSS.file' if you use number it won't work. Any suggestion or complains, do mail me.

doesnt work. I tried that but whenever I refreshes the page, the new css file ive chosen gets reverted
back to the "default", even trying to use the preconfigured other css files in the /css directory doesnt get saved once you refresh the page

----

I agree that class and id tags need to be added to the HTML output by !SquirrelMail.  Gallery has CSS-based theming and it makes it very easy to change the look of a page.  No longer is a separate "theme" file needed.  Changing themes is as simple as changing the CSS used to render a page.  With some appropriate design, this system should apply very well to !SquirrelMail.

Neil Martinsen-Burrell
nmb@unc.edu
----
Giving the full URL to the CSS file worked perfectly for me. make sure you use http://wwww.example.com/squirrelmail/themes/css/mycss.css

in your config.php

Also double check that URL by copying and pasting into the internet explorer!

Thanks to Dwane Lumley

Cheers.

Shoaib

----

I strongly agree with Rudy.

Strip all the design from the php files, and let ALL layouts be determined through the style sheets through proper ID's and classes. These days it is pretty problematic to make some bigger design changes for !SquirrelMail, you are pretty much forced to replace raw html code.

Thanks, 
Johan Dahlfors
Remove "nospam": dahlfors nospam <at> nospam multi.fi

----

CSS is a great thing to use, but when you want to truly customize and create an entirely new theme from scratch, the ability to edit all of the HTML involved is a pain.

As it is now, I'd have recode the entirety of !SquirrelMail to somewhat get it to the way I'd like it to look.  CSS is not enough alone to create a theme.

Templates for each of the screens is more preferable.  You can just edit and recreate your own own looks by adding in graphics on top of CSS.

This would make things much more simple, because then you are only editing templates instead of the coding of the PHP too.

Just a thought from someone who does graphics and web design.

Pat
colonel_angel2004 [at] yahoo [dot] com

Summary of change:
Add document to category:

Editing StyleSheets