CangrejoMail Themes How To

This section explains how to make a theme for CangrejoMail.

  • Download lastest version of CangrejoMail

Download the lastest version of CangrejoMail from de Download page.

  • Files and Folders

Uncompress it in your prefered folder and inside it should be a folder named "Themes". Inside "Themes" there's a folder called "css". Inside this folder there's a php file named cangrejo.php (the php wich generates the css and handles the theme) and a folder named "Cangrejo". This is the default theme for CangrejoMail.
Inside Cangrejo folder, there's a few css files (wich are the entire theme) and pictures, they are named and separated by the function they make. i.e: inside "cangrejo_right_frame_compose.css" are the sytles for the compose screen. So, this way all the theme should be in the "css" folder inside "themes" folder.

  • Starting with the theme

Let's assume that our theme is going to be named "BlueCangrejo". To start with the new theme, you should copy the file "cangrejo.php" to "blueCangrejo.php". The same way you have to copy the folder "Cangrejo". I recommend the name of the files with no spaces and no strange characters.

The "blueCangrejo.php" file is the one that handle all the css files inside "blueCangrejo" folder. Let's see how the first part of this file looks with the default theme of CangrejoMail:

define('SM_PATH','../../');

require_once(SM_PATH . 'functions/global.php');
$themeFolderName="cangrejo";

echo "
@import url($themeFolderName/cangrejo_left_frame.css);
@import url($themeFolderName/cangrejo_right_frame.css);
@import url($themeFolderName/cangrejo_right_frame_message_list.css);
@import url($themeFolderName/cangrejo_right_frame_menubar.css);
@import url($themeFolderName/cangrejo_right_frame_mail_display.css);
@import url($themeFolderName/cangrejo_right_frame_compose.css);
@import url($themeFolderName/cangrejo_right_frame_addressbook.css);
@import url($themeFolderName/cangrejo_right_frame_folders.css);
@import url($themeFolderName/cangrejo_right_frame_options.css);
@import url($themeFolderName/cangrejo_right_frame_help.css);
";

...

The first thing that you have to change it's the value of $themeFolderName like this:

From this:

require_once(SM_PATH . 'functions/global.php');
$themeFolderName="cangrejo";

To this:

require_once(SM_PATH . 'functions/global.php');
$themeFolderName="blueCangrejo";

Then, we set some default values for the body and form

...
echo '
body, table{
font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-size:13px;
}

form{
padding:0px;
margin:0px;
}
';

Others default values for objects that don't have styles can be found in cangrejo_right_frame.css

  • Make it active in CangrejoMail

Go to Display Preferences in the Options menu and in the option "Custom Stylesheet" select your brand new theme. You are now ready to start changing the style of CangrejoMail. Begin changing the cangrejo_left_frame.css wich handles all the styles for the folder list and the refresh time.

  • Send it

Once you've made the theme at your own taste, send it to me at themes@… with the subject "CangrejoMail Theme" and i will upload it to the page.