Author Topic: Formatting issues - Not themes !!!  (Read 5111 times)

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« on: April 30, 2008, 03:42:31 AM »
Hi there,
I'm trying to figure out how to get some sizing issues resolved. Everyone whom I know is using a 19 inch or larger display. Due to the fact that firefox and IE7 both have tabbed browsing, many people now use their browser in full screen mode by default - especially windows users. Well, on my 20 inch display, it's quite annoying to see how the roundcube menu stretches itself clear from one side of the display to the other .... that's not only really excessive but it also makes things look unformatted. So, here the question:

Which files/folders specifically do I need to access in order to make the roundcube screens narrower globally? I want for each and every screen, no matter what's being used in roundcube, to be no wider than 800 px. max. Can all of that be regulated from only within the css, or do I need to access several files to get this done? I want to accomplish a look, similar to this:

http://www.einfachclicken.de/123kostenlosdabei/123comphilfe/index.html

.... with a dark or black background color on the outside of the 800 max width. Any answers would be sincerely appreciated, but please do not answer with any comments as to why that shouldn't be done. It's not a matter of prefferance ... it must be done that way. Thanks.
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Formatting issues - Not themes !!!
« Reply #1 on: May 04, 2008, 12:16:04 PM »
Hi EinfachClicken.  I didn't even see this post until you went off in your other thred :(

Unfortunately the way RoundCube is set up, the CSS takes the width of the screen and just subtracts the left-column from it to get the max width for the message list and preview pane.  Everything else is like 100% width.

There is a "hackish" work around.  But it works:
[tutorial=Wrapping RoundCube]
[step=1]Open the following list of files:
  • addidentity.html
  • addressbook.html
  • compose.html
  • editidentity.html
  • error.html
  • identities.html
  • login.html
  • mail.html
  • managefolders.html
  • message.html
  • settings.html
  • preintmessage.html optional
[/step]

[step=2]In each of those files, just above these lines:


add:
[/step]

[step=3]At the bottom of those files, just before the "" tag, add the closing "
" tag for the wrapper.[/step]

[step=4]Open common.css[/step]

[step=5]Add the following CSS to common.css:
Code: [Select]
#wrapper {
  width:800px;
  position:absolute;
  top:0px;
  bottom:0;
  left:50%;
  margin-left:-400px;
}
[/step]

[step=6]Save all files, upload them to your server.  Hard-refresh the browser.[/step]
[/tutorial]

That will give you a wrapper that is 800px wide all the time (no more, no less).  You can see this in action here.

As for a dark theme, just edit the CSS to the way you please.  I haven't created a theme for RC yet, so I'm not sure exactly what you need to edit in order to get it the way you want.
 
  

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« Reply #2 on: May 05, 2008, 08:48:36 AM »
Quote from: bpat1434;11821
Hi EinfachClicken.

That will give you a wrapper that is 800px wide all the time (no more, no less).  You can see this in action here.



Thanks a lot for that help, but that still didn't do it. Yes, my login screen now looks just like the one in the demo. But as soon as I enter the webmail with one of the user accounts, it looks like everything is being shoved to the right by 400 pixels .... as everything on the right side now vanishes off the screen, having to scroll to the right to see everything.  :(

I double and triplechecked the files - not all of them had the "place the div here" files that you'd mentioned, but I noticed that all of the ones that you mentioned were located right under the body .... so I went ahead and placed the div tag there as well, in the mentioned files. Yes, I closed the div tag at the bottom of each file too, right before the body ended.

Isn't there some way to just center the entire wrapper on the screen, once the width of 800 px has been established? Although .... since I now have to scroll off to the right, I'm not even sure that the wrapper was able to set everything to a width of 800 px in the first place since that should have caused for everything to fit on the screen without any scrolling at all, right?
Perhaps the problem only appears with IE7 and WindowsVista?
I'll be checking Firefox next, but still with WinVista though.

Okay, I just tested with FireFox too, version 2.0 or 2.1 don't remember which.

It's better there because everything does appear indeed centered, yet subsequent screens after the login screen tended to run into each other. This is really "bad" because it makes it seem as though our needs can't be met and that's truly disappointing. Seriously bummer!  :mad:
Isn't there one single css or global file that can have a single centered 800 px wide div or table so that anything else on any other pages that appears within this one table .... is automatically forced to constrain itself to that width, not just from one or the other left/right margin, but from both margins at the same time by being forced to center everything?

It seems to me that that's where IE7 or WinVista with IE7 has the problem. Our problem of course is the fact that we view WindowsVista as the next 6+ year replacement for WindowsXP, and that of course means that our eventual clientbase will largely be using that particular browser since 99% of our potential clients are internet newbies, first time PC buyers, or people who've been happy with IE all along as they never required any techie specialties from their browser.

Any other suggestions would be sincerely appreciated.
Can it be done?    :eek:

.
.
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Formatting issues - Not themes !!!
« Reply #3 on: May 05, 2008, 09:18:41 AM »
Quote
Isn't there some way to just center the entire wrapper on the screen, once the width of 800 px has been established?
Yes, that's what the "left:50%; margin-left:-400px;" is for.  It first moves the div to teh center of the screen, then back 1/2 the width of the div, so it's centered ;)

The problem with IE7 (and my fault for not double checking this) is the "hack" in #messagelist-container" that dynamically evaluates the width of the #messagelist-container div.

No there is no global.css file (except common.css) which can do this for you.  And if you take a close enough look, each template deals with a section.  So each section in RoundCube requires a UI refresh since many buttons and things change.  So with each section, you have to get a new template.  Unfortunately there isn't one "global" template (although I could possibly create a hack to include this) that you can just set a wrapper up in.  Right now, the way I showed you is the easiest way there is.

I agree IE will be a large force in website browsing, but with more money behind it, they should at least follow standards ;)  Unfortunately this is why everything looks "off" in IE but not in Opera or Safari or Firefox.

To fix the IE issue, you'd have to open up mail.css and find almost anywhere it says:
Code: [Select]
/* css hack for IE */Then look to see if it has a "width" set.  If it does, I think 600px will work fine (it does for the main message list).  So just peruse that for those fixes.

So to keep it so that IE is the only thing that uses it, use something like:
Code: [Select]
width: expression(600+'px');
You may also need to add a width: expression() to the #messagetoolbar.  Otherwise your compose would look hideous.  Also settings.css and addresses.css need to be edited as well.

You'll have to play a little bit with the addressbook (I still haven't figured out the CSS).  I'll see if i can't finish it when I get home and post the steps.

I wish there was an easier way; however, there really isn't.
« Last Edit: May 05, 2008, 09:34:43 AM by bpat1434 »
 
  

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« Reply #4 on: May 05, 2008, 10:49:39 AM »
Thanks again.
There were several areas with the css hack for IE ....
Problem is that I can't be certain whether or not I'm going to mess something up if I just arbitrarily add a width command to those sections. They don't appear as "cut 'n' dry" as I thought they might. For example ....

  width: expression((parseInt(document.documentElement.clientWidth)-230)+'px');
  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');

Or this one:
  width: expression((parseInt(document.documentElement.clientWidth)-230)+'px');
  height: expression((parseInt(document.documentElement.clientHeight)-135-document.getElementById('mailcontframe').offsetHeight)+'px');

Another one (all in same file):
height: expression(parseInt(document.getElementById('messagepartcontainer').offsetHeight)+'px');

More variety:
  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');

Last but not least ....
  /* css hack for IE */
  /* margin-bottom: 10px; */
  width: expression((parseInt(document.documentElement.clientWidth)-230)+'px');
  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');

There's more than that in the mail.css file, but I wanted to show how the "width" was already included in most of them, but not in what appears to be a manner where I could just nonchalantly add this ... width: expression(600+'px'); ... to it, without potentially causing something to go "kablooey" in Roundcube. My main concern is with the fact that "width" is already included in some of these, so should I simply change those existing numbers to read 600, or should I be adding a whole new line, like the one that you included in your instructions? :confused:

Danke schön!
(sorry to be such a pain)

.
.
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Formatting issues - Not themes !!!
« Reply #5 on: May 05, 2008, 11:20:39 AM »
Code: [Select]

<html>
<head>
<title>webmail</title>
<script type=&quot;text/javascript&quot;>
<!--
function doResize(){

        var myheight = document.body.offsetHeight;
document.getElementById('wrapper').height=myheight-5;
}
//-->
</script>
</head>
<body bgcolor=&quot;#000000&quot; topmargin=0 onload=&quot;javascript:doResize()&quot;>
<center>
<iframe id=wrapper border=0 frameborder=0 src=&quot;http://localhost/webmail/work&quot; width=850 height=800></iframe>
</center>
</body>
</html>


As mentioned in another thread my suggestion is to load it in an iframe. The code above will do the job, except:

#1 - The JS stuff has to be made cross browser compatible (I do not have the necessary resources here to do it right now)
#2 - Compose page is not shown correct. There is an adjustment of the css stuff necessary.

Let me know, if you will follow this approach or if you go on to implement the css wrapper class.

-Roland
« Last Edit: May 05, 2008, 11:32:54 AM by rosali »
Regards,
Rosali
__________________
MyRoundcube Project (commercial)

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« Reply #6 on: May 05, 2008, 11:35:09 AM »
Quote from: rosali;11830
[code]

#1 - The JS stuff has to made cross browser compatible (I do not have the necessary resources here to do it right now)
#2 - Compose page gets is not shown correct. There is an adjustment of the css stuff necessary.

Let me know, if you will follow this approach or if you go on to implement the css wrapper class.

-Roland


Hi there.
Well, it actually makes no difference to me which solution ends up doing the trick so to speak, but since I've already changed several files for the css wrapper, waiting for a more detailed response, I'll probably want to finish with that route, to see if we can get that finished since I'm a little in limbo right now. From an enduser point of view, I just want it to be able to work. Method is irrelevant unless there are some load speed considerations to consider ... ???
I do appreciate the efforts.     :)

.
.
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Formatting issues - Not themes !!!
« Reply #7 on: May 05, 2008, 11:43:07 AM »
... see the screen dump

-Roland
Regards,
Rosali
__________________
MyRoundcube Project (commercial)

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« Reply #8 on: May 05, 2008, 12:42:55 PM »
Quote from: rosali;11832
... see the screen dump

-Roland


Yeah, that would actually be perfect ... providing that it works with IE7 (couldn't tell on the dump) and that it works in the composer section too, as that's part of where I've been seeing problems with things running together.
The other part of the problem of course is ... can it be explained/shown simple enough for me to understand? Like I explained in the other thread, this type coding is not exactly my strong suit, meaning I always have to be 100% certain of what the heck I'm about to do, before doing it.  I've gotten extremely good at keeping file duplicates, triplicates & quads though ...    ;D

What about the additional default folder names? Also mentioned earlier, I had no problem getting the additional default folders setup for every user, but I can't for the life of me figure out where the translations for those folders should be? I tried translating the additional folders directly from within the labels.inc and that appeared to make no difference at all? That's where all of the other folder translations were at though. Those extra folders are certainly being generated - they can be used too - so they're obviously working. But the translations for the new folder names are not ... how can this be?  :(
Thanks yet again.

.
.
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline rtcoop

  • Newbie
  • *
  • Posts: 1
Formatting issues - Not themes !!!
« Reply #9 on: May 05, 2008, 04:00:16 PM »
I am trying to get just the roundcube login page to look like the rest of my site. I am not as concerned about the interface once people are logged in. Which file is the actual login page? When you open index.php the source code doesn't look the same as the source code for the login page, so I am not sure if that is it or not.

BTW, here is another way to center your "wrapper" div element and set a fixed width:

#wrapper {
    width: 800px;
    margin: 0 auto;
}

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Formatting issues - Not themes !!!
« Reply #10 on: May 05, 2008, 05:13:24 PM »
@rtcoop:

The login HTML can be found in /skins/default/templates/login.html ;)  From there, you can theme it how you like.

As for the centering of the wrapper, that will only work if the body element has text-align center.  6 one way, 1/2 dozen the other ;)
 
  

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Formatting issues - Not themes !!!
« Reply #11 on: May 05, 2008, 05:38:45 PM »
@EinfachClicken

I have implement the wrapper in my stuff now. Wrapping width and background color is customizable in main.inc.php.

To adjust the message composition portion was not easy. I had to hack Tiny MCE source code (easy but hard to find the culprit: remove nowrap from editor_template.js) and the default template stuff aswell.

Sorry, I have implemented it into my stuff. I plan to release it next weekend (cross browser testings).

http://www.roundcubeforum.net/showthread.php?t=2469

For the case you prefer a customized 0.1.1 release, we have to talk about it.

-Roland
« Last Edit: May 05, 2008, 05:42:00 PM by rosali »
Regards,
Rosali
__________________
MyRoundcube Project (commercial)

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Formatting issues - Not themes !!!
« Reply #12 on: May 11, 2008, 04:36:52 AM »
Regards,
Rosali
__________________
MyRoundcube Project (commercial)

Offline EinfachClicken

  • Jr. Member
  • **
  • Posts: 51
    • http://www.steinfein.org
Formatting issues - Not themes !!!
« Reply #13 on: May 12, 2008, 04:17:06 AM »
Quote from: rosali;11837
@EinfachClicken
I have implement the wrapper in my stuff now. Wrapping width and background color is customizable in main.inc.php. Sorry, I have implemented it into my stuff. I plan to release it next weekend (cross browser testings).

http://www.roundcubeforum.net/showthread.php?t=2469

For the case you prefer a customized 0.1.1 release, we have to talk about it.
-Roland


.

Good morning.
Well, our technician has tried to get this working, but it's not happening. here some of the correspondence excerpts, to show what's been going on. Oh, and our mail server uses Postfix (SMTP) for receiving and also Courier (POP3 and IMAP), pretty standard stuff.

Quote
Technician: Just did the install and all of the sql adjustments, please proceed to test and let me know if everything is working up to par?


Quote
My response: Nope, we tried using a couple of different accounts and every time we attempt to login we receive this "Can't connect MySQL" error.


Quote
Technician: That's exactly what I receive too. The configuration is pretty standard stuff though and I can't find any errors anywhere. Set up a duplicate roundcube with the old mail settings, and all of that works up to par with the identical configuration. Beats me, perhaps the developer can shed some light on this?


Quote
Technician again: I just had some additional time on my hands and spent the last couple of hours going bit by bit through the source code. Seems to me that this modification has been designed primarily or perhaps even strictly with the "hMailserver" in mind?


Quote
My response: The only additional information that I can provide you with is the link to the forum thread with issue and items of interest about these issues that had been dicussed in the past, located here:
http://www.roundcubeforum.net/showthread.php?t=2469


Quote
Technician - Final: Well, I ended up restoring all of your original settings again because it doesn't look as though this will be a quick fix and as you already know, I'm off on vacation. Sorry, no more time.


Quote
My Response - Final: Okay, that's just as well because the sample that got me real excited about this was the one with the centering and the black background. The last thing that we want to do to our customers, is to bombard them with advertisements which is bound to annoy a lot of people. When I saw your installation, that was an immediate eye-irritant to me, and it also goes exactly against what we promote to our clients .... an advertising free zone where people can enjoy the internet without such annoyances, so that even Seniors and Kids can feel good about what we do. Sorry, but when I gave you the link to the zip file, I actually thought that it was the same "version" as in this screenshot.
http://www.roundcubeforum.net/attachment.php?attachmentid=578&d=1210002167
We'll see what I can come up with while you're gone. In the meantime, enjoy your vacation and thanks for your help!


Well, there you have it ...
We spent a lot of time with this, and can't get it to work for us. Bummer!
Our technician is by the way very proficient, the best that I've used in quite some time. The service is "allround" as far as apache, linux, php, security, and various other issues are concerned, and this company works pretty quickly which of course saves us money when you're paying in 15 min. increments. Our last server facility worked at a fraction of the speed of this one. Sometimes we'd have to wait 4 to 5 working days for even minor things to get done. But alas, as stated, our tech couldn't get it to work ....    :(
« Last Edit: May 12, 2008, 04:19:18 AM by EinfachClicken »
.
.
.
Ever try Ubuntu? It\'s incredible!
After 18 years with Windows, I finally made the switch for free at www.ubuntu.com
Stable, Safe & Reliable - Hundreds of Free Apps - Hundreds of Games[

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Formatting issues - Not themes !!!
« Reply #14 on: May 12, 2008, 05:20:31 AM »
This is just a minor bug ... For a quick fix goto program/include/after_logged_in.inc and replace the content by:

Code: [Select]

<?php

if(isset($user_input)){
$_SESSION['user_input'] = $user_input;
}

require_once(
'program/include/cluster_users.inc');

?>



Also query skins folder for ...

Code: [Select]




 ... and replace by ...

Code: [Select]




I sent you a PM and offered to give me FTP access to fix it for you remotely. In addition I have offered you to add me to MSN. So do not complain!

-Roland
« Last Edit: May 12, 2008, 05:24:00 AM by rosali »
Regards,
Rosali
__________________
MyRoundcube Project (commercial)