Create a template

From EQdkp Plus Wiki

Preamble

For creating a new template it is the easiest way to edit an existing template. This example is based on the luna_wotlk from the eqdkp-plus 0.6.4.0 (earlier versions have other structures!!).

Basic knowledge of HTML and CSS is required!

First of all

Duplicate the folder 'luna_wotlk' and rename it to the new template name.

Then create a new Style in the Administration Panel (Style -> Create), enter a name for your template and choose from the "Template" dropdown your duplicated folder.

In the fields below you can write the color-, font- and bordersettings as you want.

In the section 'Style Configuration' it's recommenced to leave the date-settings as they are default. Just edit them if you know what you're doing. In the other fields you can enter the URL of your logo-graphic (based on the template-folder) and your background-image. The css field is not needed, because we edit the base file itself.

If your default game is WoW, here are the farbcodes for the classes:

Druid #FF7C0A
Warlock #9382C9
Hunter #AAD372
Warrior #C69B6D
Mage #68CCEF
Paladin #F48CBA
Priest #FFFFFF
Shaman #1A3CAA
Rogue #FFF468
Deathknight #C41F3B

Next, change your personal style to the new one (User Menu -> Settings -> Account Settings). Make sure that the option 'Overwrite user style settings (every user use the default-style):' (Admin Panel -> General Settings -> Config) is set to 'No' as long as you don't finish your work.

Editing The Files

page_header.html

in the page header, you can edit the look of the top of your page, the left portal column and the middle portal column.

First, change the paths to the new directory. Just search for e.g. 'luna_wotlk' (if you've copied the files from the luna style) and change the paths.

for example:

<link rel="stylesheet" href="{EQDKP_ROOT_PATH}templates/luna_wotlk/style.php" type="text/css" />

gets

<link rel="stylesheet" href="{EQDKP_ROOT_PATH}templates/luna_new/style.php" type="text/css" />

Also, it can be neccessary to change the paths of images, like

background:#14293b url({EQDKP_ROOT_PATH}templates/luna_wotlk/images/table.jpg) repeat-x top;

don't change anything else in the head, if you don't know exactly what you are doing!!

you can start to edit the template after the <body> - tag: is the query, if the template is shown full (the normal look) or with the simple header (for popups - without menu and logo).

as you see, the page_header.html has 2 tables:

the first is for the header
the second is for the content

i don't explain every line seperately, you should know, how do edit html.

the most important phrases are:

```
  --
```

This is the query, if the full page is shown, or just the background (for popups)

```
{PORTAL_LEFT1}
```

the portalmodules over the menu

```
{MAIN_MENU4}
```

the extra-tabs

```
{MAIN_MENU1_V}
```

main menu 1 - when you delete the _V at the end, the menu is horizontally

```

```

the query if the user is in the admin panel

```

```

make the headlines for the admin panel

```

```

make the menu items for the admin panel

```
{PORTAL_MIDDLE}
```

the middle portal modules (eg. latest forum posts)

it's correct, that neither the table nor the body is closed, because the page_header.html and the page_tail.html are send as one file to the browser

CSS

you can include your own CSS file either in the classical way (<head><link rel="stylesheet" etc.></head>) or, if you want to use the settings from the style menu like this:

<head>
  <style type="text/css">
    <!-- INCLUDE style.css -->
  </style>

if you do it like that, you can access the settings with variables like {T_FONTCOLOR1}.

page_tail.html

the page_tail.html is similar to the page_header.

here is the right column and the footer.

```

```

is the sql-output for the debug

```

```

is the output for the other debug stuff

```
 and {PORTAL_RIGHT}
```

is the right portal column

the rest is the same as in the page_header.html

don't delete the copyright ;)

Plugins

When you create a new template, you've also got to create new template-folders for the plugins. It's pretty easy (but it's a lot to do). Best way is to copy an existing template folder from the respective plugin. Rename this folder and open every .html file there and change the path from the page_header and page_tail to your template.

<!-- INCLUDE ../../../../templates/luna_wotlk/page_header.html -->
<!-- INCLUDE ../po_ad_createoptions.html -->
<!-- INCLUDE ../../../../templates/luna_wotlk/page_tail.html -->

gets

<!-- INCLUDE ../../../../templates/luna_new/page_header.html -->
<!-- INCLUDE ../po_ad_createoptions.html -->
<!-- INCLUDE ../../../../templates/luna_new/page_tail.html -->

(when you include the css-file in your page_header, that you've got the variables ({T_FONTCOLOR1}, etc.) you also need to include this css file here)

[OPTIONAL] jquery_tmpl.css

Create the jquery.ui theme

The jQuery ThemeRoller

Rename the css & upload it & the image folder

With this file, you can style all UI Elements of EQDKP-PLUS. We use the jQueryUI, and you can simply use the ThemeRoller to Build your own UI Style matching your EQDKP-PLUS Style. By default a black standard one is used. If your're lazy, you don't need to create this file - and the default style is used. If you add this file, your custom style is used.

There are a few simple steps to your own UI Style:

Visit the jQuery ThemeRoller and build your custom style
When finished, click on the download theme Button. You're redirected to a new page, simply scroll down and hit the Download Button again.
Extract the zip File. Browse to the css/custom-theme/ folder.
Rename the jquery-ui-XXXX.custom.css to jquery_tmpl.css (XXXX is the Version number, p.e. jquery-ui-1.8.custom.css)
Perform the file changes (see in Addition
Upload the jquery_tmpl.css to the template root dir, p.e. templates/YOURTEMPLATE/jquery_tmpl.css
Upload the whole image folder of your generated jqueryUI template (the one in the css/custom-theme folder) to the template root dir, p.e. templates/YOURTEMPLATE/images

Thats all. You're done!

Edit the theme to fit eqdkpPlus

To fit the requirements & styles of eqdkpPlus, additional changes in the css generated by theme roller are required. This is sample css code from the luna_wotlk template, the color codes might not fit to your template.
Color codes:
remove this code / add this code

Remove Background images & set background-color to transparent if wished

.ui-widget-content { border: 1px solid #555555; background: #000000 url(images/ui-bg_flat_25_000000_40x100.png) 50% 50% repeat-x; background-color: transparent; color: #ffffff; }

Add a background to ui-dialog if wanted

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; background: #f5f5f5;}

Remove arrows in accordion

.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; display:none;}

Create a template - EQdkp Plus Wiki