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....
Nice! This is a cool little mod! I think your right it need to be a div ;)
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.
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.
I think absolute positioning means just that. But if you can get it to work, I would love to be wrong on this one.
You wanted your proof, check out my beta2 setup:
Beta 2 (http://roundcube.bpatterson.net/beta2/)
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. ;)
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 and
) 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.
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:
<div id="container">
and the following line before the declaration:
Then I edited the common.css file and added the following CSS:
#container
{
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