Author Topic: Standard header  (Read 8572 times)

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Standard header
« 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?

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #1 on: August 07, 2006, 02:44:19 PM »
Never mind. Found it in the includes folder :stupid:

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #2 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.

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #3 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. :-\

Offline Scubes13

  • Jr. Member
  • **
  • Posts: 48
Re: Standard header
« Reply #4 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.

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Re: Standard header
« Reply #5 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 @ bPatterson.net</p>
</div>

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]
#globalheader
{
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;
}

#gh_title
{
height: 50px;
max-height: 50px;
overflow: hidden;

margin: 2px 0;
padding:0;

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

#ghImage
{
width: 50px;
height: 50px;
border: 0px;

vertical-align: middle;
}
[/step]

[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:

  • #header
  • #taskbar
  • #message
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)
  • #messagetoolbar
  • #mailcontframe
  • #mailboxlist-header
  • #mailboxlist-container
  • #quicksearchbar
  • #quicksearchbox (both of these entries, look for a one-liner)
  • #rcversion
  • #messageframe
  • #composecontainer
  • #compose-attachments
  • #attachment-form
[/step]

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

Do the same modification to the "top" attribute of the following selectors:
  • #tabsbar
  • userprefs-box
  • #identities-list, #folder-manager
[/step]

[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]


  • addidentity.html
  • addressbook.html
  • compose.html
  • editidentity.html
  • error.html
  • identity.html
  • mail.html
  • managefolders.html
  • message.html
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]
"RoundCube
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 main.inc.php file to point to skins/New_Skin_Name/ and you're on your way!![/step]
[/tutorial]

I've also attached my header skin to this ;)
 
  

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #6 on: August 09, 2006, 11:47:23 AM »
I will definately give this a try. Thank you. :)

Offline richardt

  • Jr. Member
  • **
  • Posts: 22
Re: Standard header
« Reply #7 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!

Offline xoqez

  • Jr. Member
  • **
  • Posts: 84
Re: Standard header
« Reply #8 on: August 09, 2006, 07:48:46 PM »
roundcube does not seam to work in frames I tested this follow bretts tutorial
--
Venond; using roundcube since June 2006
www.venond.com

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Re: Standard header
« Reply #9 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....
 
  

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,566
    • http://SKaero.com/
Re: Standard header
« Reply #10 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 ;)

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #11 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.

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Re: Standard header
« Reply #12 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.
 
  

Offline flash

  • Jr. Member
  • **
  • Posts: 49
Re: Standard header
« Reply #13 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.

Offline bpat1434

  • Administrator
  • Hero Member
  • *****
  • Posts: 673
Re: Standard header
« Reply #14 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. ;)