It is possible, and it takes all of 15-20 minutes to sort out
You can check it out over at:
My Demo AreaBasically, 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_NameCopy 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:
<div id="globalheader">
<p id="gh_title"><img src="skins/headered/images/brett_avatar_50x50.gif" id="ghImage" /> 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:
#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:
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:
after the declaration and before this line:
- 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:
with this:
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