RE: RE: CSS Style Change - Dev

14 Oct 2005 · *24*


      Yes it's possible just remember you need to modify both common.css and
mail.css.  common.css handles the background where we can choose a picture
instead of a bg color.  Wish I had time or I would write it now.
They don't actually have to be separate files.  I'll send a sample.
-----Original Message-----
From: Blob [mailto:blob@xdashcentral.us] 
Sent: Friday, October 14, 2005 4:21 PM
To: macross
Subject: Re: RE: CSS Style Change
MMM so it would not be possible to make a Maxtrix theme??? Just a solid
color?? Since it's all controlled by  .css right??  I guess I'll go with
Olive Green only and no Matrix theme :(  Unless there is a already set # for
the Matrix Background you know what I'm saying :)
Cheers!
Jason
On Fri, 14 Oct 2005 16:07:35 -0400, "macross" macross@msyte.com wrote:
...
Backgrounds and background color are held within the common.css
%s/mail.css/common.css/ if you are looking to modify the background and
tables etc...
This will change text and list box behaviours.  I can write in modifying
both I suppose with a single css.
-----Original Message-----
From: Blob [mailto:blob@xdashcentral.us]
Sent: Friday, October 14, 2005 4:01 PM
To: macross
Subject: Re: CSS Style Change
Cool This is gonna help me out alot :-)  I'm gonna be working on a Matrix
Theme for this webmail package. Might use Yellow or Orange Font on the
text
for the GUI with Matrix. which are either #FF5500   or #FFFF00 Now are all
of these #s in this .CSS related to Text only?? or are there a few for the
backgrounds etc.. which i plan on changing via http code if possible like
with the templates and images etc...
Cheers!
Jason
On Fri, 14 Oct 2005 15:54:03 -0400, "macross" macross@msyte.com wrote:
...
Anyone interested in updating their css styles on the fly.  I've put
this
...
together.  It could/should be put in the preferences page I suppose.
But
...
I
am just mucking around here.  Send me change if any are made.
Enter this into roundcubemail/skins/default/mail.css
#stylechange
{
  position: absolute;
  top: 535px;
  left: 20px;
  width: 160px;
  border: 1px solid #CCCCCC;
  color: #333333;
  font-size: 11px;
  font-weight: bold;
}
Enter this into roundcubemail/program/js/common.js
var expDays = 9999;
var standardStyle = '2';
var nameOfCookie = 'switchstyle';
var urlToCSSDirectory = 'roundcubemail/skins/default/';
var ScreenCSS_1 = 'mail.css';
var ScreenCSS_2 = 'mail_2.css';
var ScreenCSS_3 = 'mail_3.css';
var ScreenCSS_4 = 'mail_4.css';
var ScreenCSS_5 = 'mail_5.css';
//Let's you change print option CSS //
var PrintCSS_1 = 'mail_1.css';
var PrintCSS_2 = 'mail_2.css';
var PrintCSS_3 = 'mail_3.css';
var PrintCSS_4 = 'mail_4.css';
var PrintCSS_5 = 'mail_5.css';
function switchStyleOfUser(){
   var fontSize = GetCookie(nameOfCookie);
   if (fontSize == null) {
   	fontSize = standardStyle;
   }
if (fontSize == "1") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '"
media="screen">'); }
   if (fontSize == "2") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '"
media="screen">'); }
   if (fontSize == "3") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '"
media="screen">'); }
   if (fontSize == "4") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '"
media="screen">'); }
   if (fontSize == "5") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '"
media="screen">'); }
if (fontSize == "1") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '"
media="print">'); }
   if (fontSize == "2") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '"
media="print">'); }
   if (fontSize == "3") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '"
media="print">'); }
   if (fontSize == "4") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '"
media="print">'); }
   if (fontSize == "5") { document.write('<link rel="stylesheet"
type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '"
media="print">'); }
var fontSize = "";
   return fontSize;
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function getCookieVal (offset) {
   var endstr = document.cookie.indexOf (";", offset);
   if (endstr == -1)
   endstr = document.cookie.length;
   return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0;
   while (i < clen) {
   	var j = i + alen;
   	if (document.cookie.substring(i, j) == arg)
   	return getCookieVal (j);
   	i = document.cookie.indexOf(" ", i) + 1;
   	if (i == 0) break;
   }
   return null;
}
function SetCookie (name, value) {
   var argv = SetCookie.arguments;
   var argc = SetCookie.arguments.length;
   var expires = (argc > 2) ? argv[2] : null;
   var path = (argc > 3) ? argv[3] : null;
   var domain = (argc > 4) ? argv[4] : null;
   var secure = (argc > 5) ? argv[5] : false;
   document.cookie = name + "=" + escape (value) +
   ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
   ((path == null) ? "" : ("; path=" + path)) +
   ((domain == null) ? "" : ("; domain=" + domain)) +
   ((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
   var exp = new Date();
   exp.setTime (exp.getTime() - 1);
   var cval = GetCookie (name);
   document.cookie = name + "=" + cval + "; expires=" +
exp.toGMTString();
}
function doRefresh(){
   location.reload();
}
document.write(switchStyleOfUser());
Enter this into roundcubemail/skins/default/templates/mail.html
At the bottom just before it includes the taskbar.html
<div id="stylechange">
<input type="radio" name="rcstyl" value="1"
onclick="SetCookie(nameOfCookie,
this.value, exp); doRefresh();"> style 1<br>
<input type="radio" name="rcstyl" value="2"
onclick="SetCookie(nameOfCookie,
this.value, exp); doRefresh();"> style 2<br>
<input type="radio" name="rcstyl" value="3"
onclick="SetCookie(nameOfCookie,
this.value, exp); doRefresh();"> style 3<br>
<input type="radio" name="rcstyl" value="4"
onclick="SetCookie(nameOfCookie,
this.value, exp); doRefresh();"> style 4<br>
<input type="radio" name="rcstyl" value="5"
onclick="SetCookie(nameOfCookie,
this.value, exp); doRefresh();"> style 5<br>
</div>
Copy the mail.css file and modify it to your own liking naming
mail_2.css
...
mail_3.css etc etc
Done!