Customize page header in EQdkp

From IT Wiki
Jump to navigation Jump to search

Guide: Page Headers - Simple alterations, Links,.., Adding links, moving menus, backgrounds

Currently this document is more of a basic information guide then a How-to guide. I hope this guide will give you enough information to go out there and customize you're own site's Page Headers. If you have questions or need more information about certain aspects of altering your Page Headers please feel free to Private Message me.

Disclaimers:

If you're using a operating system other than Microsoft Windows product then you're already beyond the scope of this document. This guide is a volunteered work and by no means the end all be all Customize guide, use at your own risk.

Please make sure you have read our Techno-dweeb install guide to EQdkp Part 1. It references tools that we will NEED for this guide. I would also recommend that if your not good with HTML to get a good WYSIWYG program, I use Frontpage 2002, but don't hold that against me. I believe Microsoft Word or even Open Office (Freeware) can handle the creation of tables and basically thats all you really need it for.

The easiest way to modify your EQdkp is by creating styles, the second easiest way is by changing your page_header.html In this topic we will be working on examples and different ways of altering your page header. There are two files we need to be aware of to modify the page_headers, first the page_header.html and second the page_tail.html They are located in your /eqdkp/templates/default directory. The page_header.html and page_tail.html actually work together so we need to take in consideration the page_tail.html file as well, but the majority of the alterations should only be done to the page_header.html template.

When the page_header and page_tail are put together they actually complete some tables which allow some extra flexibility to the page you attach them to. This gives us the ability to add Sidebars to EQdkp.

There are two sections to the page_header the and the The first will be seen when not in the admin section of EQdkp and the second will be seen in the admin section. I would recommend to not modify the section of the page_header. Doing so may cause your administration panel not to function and well, that is not good. That leaves us with the whole to modify to our hearts content.

The section looks like: 

<table width="100%" border="0" cellspacing="1" cellpadding="2" class="borderless">
  <tr>
    <td width="201" nowrap="nowrap"><img src="{TEMPLATE_PATH}/images/{LOGO_PATH}" alt="Logo" /><br /></td>
    <td width="100%">
      <center><span class="maintitle">{MAIN_TITLE}</span><br />
      <span class="subtitle">{SUB_TITLE}</span><br /><br />
      <span class="menu">
      {MAIN_MENU1}
      <br />
      {MAIN_MENU2}
      </span></center>
    </td>
  </tr>
</table>
<br />

Which for those who do not know anything about html looks like:

(IMG:http://www.five-rings.com/eqdkpimages/page_header_pic.jpg)

This picture is more of a virtual representation actually how it would look. I wanted to give you an idea on how EQdkp uses the language tags as much as show you how the page_header visually looked. The {MAIN_TITLE} is actually the Site Name: and the {SUB_TITLE} is Site Description: which can be altered using EQdkp Administration Panel Configuration. The {MAIN_MENU1} and {MAIN_MENU2} are the menu system language tags for EQdkp.

The {MAIN_MENU1} is the menu for the "News | Standings | Raids | Events | Item Values | Item History | Summary | Stats". Remember that this menu will only show the actual menu selections in which the person logged in has rights to view. The {MAIN_MENU2} is for the "Register | Administration Panel | Login" and again the menu shown are based on the rights of the person who is logged on.

Using your editor you can actually move and position each element of your page header to where you want it. You could remove the picture, add your own, add text, links, or what ever you want to do to the page header.

The following is a sample of the page header code used by Five Rings: 

<TABLE cellpadding=0 cellspacing=0 width='100%' style="border-collapse: collapse; border-top-style:"solid" border="0">
<tr>
  <td background="http://www.five-rings.net/images/5rmainlogobackground.jpg">
    <a target="_parent" href="http://www.five-rings.net">
    <img border="0" src="http://www.five-rings.net/images/5rmainlogo.jpg" width="800" height="100"></a></tr>
  <td background="http://www.five-rings.net/images/5rmainlogobackground.jpg" valign="top"> </tr>
  <td background="http://www.five-rings.net/images/5rmainlogobackground.jpg" valign="top" align="left"> <p>{MAIN_MENU2}</tr>
  <td background="http://www.five-rings.net/images/5rmainlogobackground.jpg" valign="top"> </tr>
</TABLE>

Which looks like: (IMG:http://www.five-rings.com/eqdkpimages/page_header_5r.jpg)

As you can see we totally removed the {MAIN_TITLE} and {SUB_TITLE} from the page header, we also removed the {MAIN_MENU1} which we moved into a sidebar.

Another change we made for the Five Rings site was to change the CSS settings for BODY { font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: #{T_FONTCOLOR1}; margin-left: 0px; margin-right: 0px; margin-top: 0px; background-color: #{T_BODY_BACKGROUND}; }

The Five Rings site is a major alteration and you might not want to go to those extremes, so below here we will just add minor how-to alterations for the common questions.

Adding a link

Because we are using an non-EQdkp page as an example, check out our Guide: Using EQdkp Security for a non-EQdkp page 

<a href="http://www.ptah.net/eqdkp5/joining.php">Joining</a><br />
CODE
<table width="100%" border="0" cellspacing="1" cellpadding="2" class="borderless" height="98">
  <tr>
    <td width="201" nowrap="nowrap" height="93"><img src="{TEMPLATE_PATH}/images/{LOGO_PATH}" alt="Logo" /><br /></td>
    <td width="100%" height="93">
      <center><span class="maintitle">{MAIN_TITLE}</span><br />
      <span class="subtitle">{SUB_TITLE}</span><br /><br />
      <span class="menu">
      {MAIN_MENU1}<br />
      {MAIN_MENU2} </center>
    </td>
  </tr>
  <tr>
    <td nowrap="nowrap"> </td>
    <td>
      <p align="center">
      <span class="menu">
      <a href="http://www.ptah.net/eqdkp5/joining.php">Joining</a>
    </td>
  </tr>
</table>
<br />

Or put it between the Menus: 

<table width="100%" border="0" cellspacing="1" cellpadding="2" class="borderless">
  <tr>
    <td width="201" nowrap="nowrap"><img src="{TEMPLATE_PATH}/images/{LOGO_PATH}" alt="Logo" /><br /></td>
    <td width="100%">
      <center><span class="maintitle">{MAIN_TITLE}</span><br />
      <span class="subtitle">{SUB_TITLE}</span><br /><br />
      <span class="menu">
      {MAIN_MENU1} | <a href="http://www.ptah.net/eqdkp5/joining.php">Joining</a><span class="menu">
      <br />
      {MAIN_MENU2}
      </span></center>
    </td>
  </tr>
</table>
<br />
Retrieved from "https://it.fanra.info/index.php?title=Customize_page_header_in_EQdkp&oldid=21"