Roundcube Community Forum

Miscellaneous => Roundcube Discussion => Topic started by: flash on August 07, 2006, 02:23:45 PM

Title: Standard header
Post by: flash on August 07, 2006, 02:23:45 PM
I would like to put a standard header on every page. But I cannot find in the skins where that is. The obvious (like header.html) does not seem to exist. Would someone who knows the skins give me a hint?
Title: Re: Standard header
Post by: flash on August 07, 2006, 02:44:19 PM
Never mind. Found it in the includes folder :stupid:
Title: Re: Standard header
Post by: flash on August 07, 2006, 03:03:15 PM
OK, it is not that easy. If you put a header in that file then there are formatting issues on every page.

So back to my original question . . . anyone know how to do this? Anyone done this? Looking to put a full width
across the top.
Title: Re: Standard header
Post by: flash on August 07, 2006, 09:53:59 PM
Getting closer to understanding this. The css for #taskbar has absolute positioning (which is what starts the problem) as does just about everything else (which compounds the problem).

So doing this really involves redefining the layout and redoing the css. Problably not worth it. :-\
Title: Re: Standard header
Post by: Scubes13 on August 07, 2006, 10:55:51 PM
How about creating a frameset in the root directory, put your custom header in the top frame and load the index.php RC file in your bottom frame.

| Your Header  |
| Round Cube  |

I know frames may not be ideal, but at first thought, I would think it would work....

Kevin L.
Title: Re: Standard header
Post by: bpat1434 on August 08, 2006, 06:29:04 PM
It is possible, and it takes all of 15-20 minutes to sort out ;)

You can check it out over at: My Demo Area (

Basically, just follow these steps:

[tutorial=Global Header for Roundcube!!]
[step=1]Create a new folder in "skins/" and name it your skin name. I'll use: New_Skin_Name

Copy everything from "skins/default/" over to your new skin directory.[/step]

[step=2]Create a new file called "globalheader.html"

In that file put the following contents:
Code: [Select]
<div id=&quot;globalheader&quot;>
<p id=&quot;gh_title&quot;><img src=&quot;skins/headered/images/brett_avatar_50x50.gif&quot; id=&quot;ghImage&quot; /> Roundcube Webmail @</p>

Save the file to "skins/New_Skin_Name/includes/globalheader.html"[/step]

[step=3]Open "skins/New_Skin_Name/common.css"

Add the following CSS code:
Code: [Select]
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 54px;
z-index: 110;

border-bottom: 2px groove rgb(50,92,116);
background-color: rgb(141,182,205);
text-align: center;

height: 50px;
max-height: 50px;
overflow: hidden;

margin: 2px 0;

color: rgb(43,79,129);
font-weight: bold;
font-size: 30px;

width: 50px;
height: 50px;
border: 0px;

vertical-align: middle;

[step=4]Now we'll fix the look of everything. In common.css you need to go through and edit the "top:" attribute value of each of the following selectors:

You will need to ADD the number of pixels already declared for the "top" value, with the height of your global header. So in our instance, topValue+54 = NewTopValue[/step]

[step=5]Now open "skins/New_Skin_Name/mail.css"

You need to edit the "top:" attribute for each of the following selectors: (same idea as above)

[step=6]Now open "skins/New_Skin_Name/settings.css"

Do the same modification to the "top" attribute of the following selectors:

[step=7]Okay, so we're 90% of the way there. Now all we need to do is open each of the following templates, insert the following code line:
Code: [Select]
after the declaration and before this line:
Code: [Select]

NOTE: This will NOT print your header on printed messages. To do that you need to edit "print.css" as well as the printmessage.html file accordingly (just like the above steps).[/step]

[step=8]From here, we need to decide whether to show the header on the login page. I have chosen to, so if you don't want to do this, skip this step and go to step 9 ;)

Open up "skins/New_Skin_Name/templates/login.html" and add our header line (just like before, after the tag). Next, replace this:
Code: [Select]
"RoundCubewith this:
Code: [Select]
NOTE: Remember that if you change the height of your header, to also change the margin-top setting for this [/step]

[step=9]Save all the files, upload your new skin, change your file to point to skins/New_Skin_Name/ and you're on your way!![/step]

I've also attached my header skin to this ;)
Title: Re: Standard header
Post by: flash on August 09, 2006, 11:47:23 AM
I will definately give this a try. Thank you. :)
Title: Re: Standard header
Post by: richardt on August 09, 2006, 05:46:57 PM
Brett - that's a very well written tutorial, thank you! I'm also going to have a crack at that soon. The only drama will be redoing the changes, as I always grab the latest SVN revisions as soon as they're up. Cheers!
Title: Re: Standard header
Post by: xoqez on August 09, 2006, 07:48:46 PM
roundcube does not seam to work in frames I tested this follow bretts tutorial
Title: Re: Standard header
Post by: bpat1434 on August 10, 2006, 10:13:24 AM
Honestly what would have made this easier was to add a bounding
around roundcube. That way all the roundcube stuff is contained in one div. Then "shifting" things down for a header would be one minor change in the CSS plus your personal header additions. It would have made this much quicker...

Perhaps I'll make it a mod today....
Title: Re: Standard header
Post by: SKaero on August 13, 2006, 04:24:20 PM
Nice! This is a cool little mod! I think your right it need to be a div ;)
Title: Re: Standard header
Post by: flash on August 13, 2006, 04:31:50 PM
I am not sure putting a
around everything is going to help. The complexity is that everything in the skin is specified with an absolute location.
Title: Re: Standard header
Post by: bpat1434 on August 13, 2006, 04:48:50 PM
If you put a
around the entire RC section (headers and all) then the absolute position technically becomes relative to the surrounding
so the coordinates 0,0 are now the top left corner of the encasing

I'll look at doing a quick skin to prove this later on.
Title: Re: Standard header
Post by: flash on August 14, 2006, 12:00:04 PM
I think absolute positioning means just that. But if you can get it to work, I would love to be wrong on this one.
Title: Re: Standard header
Post by: bpat1434 on August 14, 2006, 11:52:10 PM
You wanted your proof, check out my beta2 setup:
Beta 2 (

Check out the HTML for it. I just added a "container" div and moved teh container down 100 pixels. Then added my global header above the "container" div. So it's possible, and no, I didn't fiddle with any of the other
's positions. I just added a "container" to them and it all works as expected. ;)
Title: Re: Standard header
Post by: flash on August 15, 2006, 12:11:19 PM
I cannot login so I cannot see it or check the html. The login page is different from the skin. But it would also be hard by looking at the html to see what you did to make this work.

You added two lines of code (for the
) if I understand what you are saying. Exactly what and where? And where did you put the header code. Sounds too easy . . .

I was sure that absoloute positioning could not be overridden . . . glad to be wrong.
Title: Re: Standard header
Post by: bpat1434 on August 15, 2006, 01:42:17 PM
Heh... Basically every .html page where the tag didn't have the word "iframe" or "extwin" as an attribute was modified. I think this left me every file but 3 ;) My first step was just to add the following line after the declaration:
Code: [Select]
<div id=&quot;container&quot;>and the following line before the declaration:
Code: [Select]

Then I edited the common.css file and added the following CSS:
Code: [Select]
position: absolute;
top: 102px;
left: 0;
right: 0;
bottom: 0;

width: 100%;

The next thing to do was add my header code, which was the
junk from before and just set that to a position of top: 0; left: 0; and all is well!!

I know I read somewhere absolute positioning is absolute relative to the containing elements of HTML.... I know I read it somewhere....

Basically, when you absolutely position an element, it's taken out of the flow and positioned absolutely in relation to it's containing element. Since RC didn't have a container (except the tag) it was relative to the browser window. Now with a container, it's realtive to the containing div, and not the browser window.

HERE ( is a good article to read about it.
Title: Re: Standard header
Post by: flash on August 15, 2006, 03:06:04 PM
Interesting article. I have learned some css today. Thank you for the education. :) I suppose I had never "positioned" the container before. I have used absolute positioning in containers, but never positioned containers. That could be very handy in a lot of situations.

So you still had to modify a lot of files. IMHO, the skin should be done so that the header is really the header (through the body tag) and including a header. In looking now, I see that is not the case (I did look at that these files before but did not remember). So I see why you had to mod so many files.
Title: Re: Standard header
Post by: FatJonny on November 24, 2006, 06:16:38 PM
Just to revive this thread... I'm trying to do this on my site. I managed to simply add an extra
containing my header image into the file header.html and this seems to work fine, almost. It adds the image file into roundcube pages everywhere except the login page. So where is the html file that contains the login page code?

Look here to see what I mean:
login: test
password: test

I'm still playing with the CSS, so there's a few minor things that still need tweaking.
Title: Re: Standard header
Post by: bpat1434 on November 25, 2006, 08:06:16 AM
Well, the .html templates are in the skins/skin_name/ folder. You just have to open each one as needed to edit it. Like I said, you'll need to open all but like 3.