Has anyone here "heavily" customized sqwebmail, only by changing html/css
files?I mean, customizing without changing the source or making only minor
changes?
I'd like to see a few examples of how "different" sqwebmail can get... If
you who customized your sqwebmail look could provide a few screenshots, i'd
be thankful..
thanks
Jw.
Well, in about 15-20 minutes (mostly searching for class names and reloading pages :) I produced these changes for your viewing pleasure -- just from CSS alterations. It produces a vertically oriented table row. ('Cause I'd always wanted an excuse [thankyouverymuch] to mess with changing the way tables render anyway. ;-)
The primary target of this change is the folder index (i.e. message list) -- where the current width of the content typically requires an 800 px or greater horizontal resolution. So this modification could _theoretically_ be useful in situations where you expect users to have *really* small screens of say... 640 x 480 and *below*. _Practically_ speaking though, I seriously doubt it could ever be useful at all.
(But after all, it was just created as an example, as I doubt anyone would ever even want to use these particular changes! ... 'Cause *ick* It looks like crap, IMO!)
Obviously there are several "glitches" introduced by doing this (such as the navigation list also being made vertical... which is quite undesirable!) -- because even though Sam has done an admirable job of making a lot of class names available, there aren't quite enough of them available for this "structural layout" type of change to work well, since you can't target things quite as specifically as you'd really want.
But here's a couple of screenshots of the message lists where every table cell has been rendered as a block instead... making them stack vertically over one another inside the "row" instead of horizontally as they would in the typical browser rendering. And I went ahead and included a few shots of other screens, since I was taking time for screenshots anyway. =)
http://mboro.org/~james/courier/sqwebmail/css-demo/
The calendar rows are made vertical as well... which is a bit hard to use visually, but could of course be helpful (in theory, remember) by avoiding horizontal scrolling on small monitors.
I explicitly excluded the navigation buttons on the folder index, and the "create message" and "message view" pages' main tables from the change. I also excluded the "bluebox"/"graybox" elements on all pages, so that the rounded corners effect wasn't completely destroyed. (Boy, did it look like crap before being excluded!!) ... But if you didn't exclude those type of things, then the screen width could be even smaller than is allowed by this.
Also... You might note that most of the "new look" in SqWebMail 3.6.1+ (I think that's when it appeared anyway) was done through a combination of simple CSS changes and replacements of the older images. The CSS was probably not "heavily" modified by most definitions. But in combination with the image changes, it did make a fairly significant difference in the default appearance nonetheless.
So quite a bit can be done via CSS changes, particularly if you're willing to replace images while you're at it. -- And most especially if you dig into the source to add even just a small number of additional CSS classes/id's to work with, you can do some really creative things I would suspect.
Okay, so... "Next, anyone?"
-jab
P.S. Here's the quick and dirty change I made to my CSS to accomplish this ugly hack of an example. -- It could obviously have been done in reverse (which would probably be much better!), by instead targeting specific classes with the change itself, rather than excluding a list of classes from an overall change. But like I said, this was just a quick hack as an example.
Just attach it to the end of your CSS file to see it in action -- that is, if you'd like to make your own users say "Ick!!" really loudly! 8)
P.P.S. I only tested it in Safari (i.e. a KHTML-based renderer), so I don't know which browsers handle this properly. Mozilla probably does, but I didn't check. And it's anyone's guess as to what Internet ExploDer will render if this change is applied! (*mutters "piece of crap!"*) But have fun if you feel like toying with it.
/*************************** reformat tables ***************************/
td, th { display: block; }
.folder-index-header td,
.folder-index-header th,
.folder-index-bg-1 td,
.folder-index-bg-1 th,
.folder-index-bg-2 td,
.folder-index-bg-2 th
{
text-align: left;
}.folderlist td,
.folderlist th,
.folderlist-header td,
.folderlist-header th,
.folder-nextprev-background td,
.folder-nextprev-background th,
.new-message-box td,
.new-message-box th,
.message-menu-background td,
.message-menu-background th,
.folder-move-background
.message-rfc822-header td,
.message-rfc822-header th,
tr.graybox td,
tr.graybox th,
tr.bluebox td,
tr.bluebox th,
td.graybox,
td.bluebox
{
display: table-cell;
}