Logged Out
Create an Account

Forgot your password?
Intro to the Advanced Layout Options

View Version History

The Advanced Layout Options are easily the most complicated part of a DKPSystem.com site, but they are also the part that makes hosting a site here very customizable.

This is the mechanism by which guilds can customize their site and layout completely. Using HTML, CSS, and even Javascript (if desired), your site can be made completely unique.

Using Advanced Layout Options

The Advanced Layout Options consists of two core and ncessary parts: The Layout File, and the Menu File.

Briefly, the Layout File defines the HTML powering your overall site. The Menu File defines how the Menus will display in your Layout File. Both of these files contain a series of DKPSystem.com-specific commands embedded in the HTML which are required to integrate the DKPSystem.com engine with your layout.

The details are explained further on the Layout File and Menu File pages.

Another thing to note is that editing the code for these files is recommended to be performed in a text editor (like Notepad), rather than a WYSIWYG editor like Frontpage or Dreamweaver. You CAN get it to work with Dreamweaver, but eventually you WILL need to edit some code in HTML (text) mode, to embed the commands. Avoid using a program like Microsoft Word for editing your Layout and Menu Files.

There are a whole host of Text editors which work well for doing this kind of coding. We won't discuss them here, because it's big enough for its own massive discussion and debate.

Head to the Admin menu

Click on Advanced Layout Options

Which will bring you to a page containing the following

The primary sections you care about are the "Current Layout File" and the "Current Menu File"

To get your current Layout File, right click the "Current Layout File" link, and click "Save Link As...".

In Internet Explorer, the label is "Save Target As..."

Save these files to a location on your hard drive where they have easy access. These files will be named "layout.html" and "menupage.html".

If this is your first time working with the Advanced Layout Options, and you aren't using a Drop-In Template, you can click "Generate Default Layout and Menu File" to have the files generated to your current version of your layout. This process makes life very easy for you to get started, as the basic files are very minimal and easy to wrap your mind around how the commands work. After clicking that link, go back to downloading the files again.

From there, you'll want to edit the files accordingly.

When your files are edited the way you like, upload them to that same page by clicking "Browse" next to each respective link, then clicking "Upload Files"

The page will refresh, and your files will be uploaded. The next step is to Test. Please note, that you should disable popup blockers here for your site. If you don't you can do it on the next page in most modern browsers. The test page opens in a seperate window.

After popup blockers are disabled, and you've clicked "Test It", you should see a window (or tab, depending on your browser configuration) open containing the HTML rendering of your pages combined. Look this over and make sure it looks right. If it does not, then close the window, and go back to editing, then reuploading, and re-testing. When you're finally happy with your layout, click "Go Live" and your site will deploy for everyone.

Uploading other files (images, CSS, Javascript)

You can upload your own CSS files, images, Javascript files, and more to the Administrative File Uploader from the admin menu.

All of these files will be located at the address:


For example, if your address is fireballninjas.dkpsystem.com, then your subdomain is "fireballninjas" and your uploaded a file called "flaming-ninja-star.jpg" would be located at:


You can use this to upload anything you need for your layout.

Important Things To Know!
  1. You MUST "Test It" before clicking "Go Live." This is a security measure. You can render your site completely unusable by uploading a bad Layout or Menu File, from which the only recovery is to contact us to have us fix it for you. Forcing users to "Test It" will require them to actually see their changes in place, just to make sure things look right.
  2. If you've done something wrong with your layout, and need it disabled so that your users don't have troubles using the site, click "Revert to Original" to disable the Advanced Layout Options.

Incoming Guide Links
  • Drop-In Templates
  • Layout Guide
  • Outgoing Guide Links
  • CSS
  • HTML
  • Javascript
  • Layout File
  • Menu File
  • Text editors

  • Last Modified: 1/24/2008 3:45am
    Contributors: Chops
    Easy Link
    BBCode Link: [guide=AdvancedLayoutOptions]Intro to the Advanced Layout Options[/guide]
    URL: http://www.dkpsystem.com/guide/AdvancedLayoutOptions