Changing the header ...

[hooplah]

Hello, I'm going to make this as simple as I can: I want to change the global header for all the pages that WHMCS displays. I want to put my own banner and navigation into WHMCS so that both the main site and the script are integrated with each other. I'd really appreciate any help.

 

Cheers,

Max

[m00]

You can do that in the header.tpl. See also: http://wiki.whmcs.com/Client_Area_Template_Files

[hooplah]

I'm having some issues inserting images into the header. Simply using "<img src="x.extension"> doesn't have any effect on the layout whatsoever. What am I doing wrong?

[m00]

Try removing the files from the template_c directory (the cache files).

[hooplah]

Nope, no change.

[m00]

What's the URL of your WHMCS installation, and which file are you currently editing?

[hooplah]

I'm currently editing the header, the URL of my installation is http://www.apocahost.com/whmcs

[m00]

    <td class="logo" width="50%"><img src="/images/logo.png" /></td>

That image doesn't exist (http://www.apocahost.com/images/logo.png)

[hooplah]

Thanks for pointing that out ... My placement of files was all off and as a result nothing was showing up. It's all good.

[hooplah]

I'm having another issue related to CSS. If you go to the WHMCS @ http://www.apocahost.com/whmcs you'll see that the navigation banner is acting up weirdly. I want it to underline a link when hovered over, among other things defined with the following css code:

 

td.mynav a:hover {

text-decoration: underline;

color: #000;

}

 

td.mynav a:visited {

text-decoration: none;

color: #000;

 

}

 

td.mynav a:active {

text-decoration: none;

 

}

 

However, it's not even half working. Some of the links remain permanently underlined for some reason and I've been trying to figure out how to fix this for at least two hours now, no luck whatsoever.

[m00]

Also add:

td.mynav a {
text-decoration: none;
}

[hooplah]

It only half fixed the problem. Now some of the links work correctly, others don't.

[m00]

Remove the:

td.mynav a:visited {
text-decoration: none; 
color: #000;

}

td.mynav a:active {
text-decoration: none;

}

[hooplah]

Thank you so much m00. It worked and you're a life saver.

[hooplah]

Oh, there's also one small issue with the footer. I want the text to be the same on both sides yet on the left the text is the wrong font, size and color. The footer css is the following...

 

.footer3 {

 

 

margin-top: 50px;

color: #FFF;

text-indent: 25px;

font-size: 15px;

vertical-align: middle;

font-family: Verdana, Geneva, sans-serif

 

 

}

 

 

.footer2 {

 

 

color: #FFF;

text-indent: 25px;

font-size: 15px;

verticla-align: middle;

font-family: Verdana, Geneva, sans-serif;

text-align: right;

padding-right: 25px;

 

}

[m00]

Change the table code in your footer to:

<table align="center" border="0" cellpadding="0" cellspacing="0" height="55px" width="100%">
 <tr>
   <td class="footer3">Copyright © 2009-2010, Apocahost.com</td>
   <td class="footer2" bgcolor="080808">Design by Apocahost.com</td>
 </tr>
</table>

[hooplah]

Okay, thanks. As for the header: there's still one issue. The color isn't the way it should be. It's still the light-ish grey that you see in the rest of the page. How do I fix this?

[hooplah]

Also, that didn't do it. It's worse now ... take a look.

[m00]

The hyperlink style from WHMCS is leading, that's why he takes over the gray text. Just add the font color to your td.mynav a:

td.mynav a {
   text-decoration: none;
   color: #000;
}

[hooplah]

Alright, that worked. Got a solution for the footer?

[m00]

What about the footer? It looks the same to me on both sides. I don't know how you want to style it of course.

[hooplah]

There's two problems that are shown in the image below ...

1) The footer doesn't reach the bottom of the page

2) Half the footer doesn't have a background and even the copyright symbol is not showing up properly.

 

The image is at: http://www.apocahost.com/whmcsformat.PNG

[m00]

As solution you can change 83 of your stylesheet to:

body{background-color:#080808;background-image:url(images/bg_background.gif);background-repeat:repeat-x;margin:0;padding:0;}

 

And create a div around the <div id="content_container">[...]</div> container for the right background:

<div style="background-color: #369;">
<div id="content_container">
[...]
</div>
</div>

 

For the background issue in the footer, just add the background in the footer2 and footer3 part of your stylesheet:

background-color:#080808;

 

For the copyright symbol, use:

 169; (remove the space)

 

Well, that's a complete WHMCS integration what I'm explaining. I should charge you.

Edited February 28, 2010 by m00