Creating a Style
Info
- Template: .html-File that contains HTML. Normally provided by the base_template
- Style: provides the color information and layout that wraps around an template file
Create a new style
- Just copy an existing style like eqdkp_modern, and rename the folder (a-z, 0-9, _ and -) to a name you like, e.g. godmod_newstyle
- Also you have to rename the eqdkp_modern.css to fit with your new name, e.g. godmod_newstyle.css
- Edit the existing package.xml and Adjust name, author, licence, version, and most important: the folder-Tag. Set it to the folder you have created.
- Edit the existing settings.xml. Change the template_path to the folder you have created.
Now you should be able to install the files. All changes like color settings or editing the templates can be done by the built-in stylemanagement or manually, but see the Template-section below.
jQuery Theme
We are using the jQuery UI for many things like Tabs or Dialogs. You can create your own Theme for jQuery UI using the jQuery ThemeRoller.
- Go to jQuery ThemeRoller and create your own theme
- Download your created theme
- Extract the download archive and go to the folder css/custom-theme/
- Rename the file jquery-ui.css into jquery_tmpl.css
- Do the changes above if you want to
- Add the jquery_tmpl.css into the root folder of your style
- Add all files from folder "css/custom-theme" of the archive into the image folder of your template, e.g. templates/eqdkp_modern/images
Recommended Changes of jquery_tmpl.css
The colors can differ from your custom theme. remove this code / add this code
- Remove Backgrounds and set backgrounds to transparent
.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 background to Dialogs
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; background: #f5f5f5;}
- Remove Arrows from accordion
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; display:none;}
Edit a style or template
You have to ways to edit templates and CSS-Files of a template.
Template Editor
At the Extension Management, you can edit your template. At the following page, you will find a page with the Templates. There you can select the templates and CSS-Files. The changed files will be saved at data/..../templates/YOUR_TEMPLATE/
Modify files directly
You can edit the files direclty, e.g. using Notepad++. If you have edited the files with the built-in template-editor, your directly made changed will not be visible, because files from the data/..../templates/YOUR_TEMPLATE/ are prefered by the system. Therefore you have to delete the file from the data/..../templates/YOUR_TEMPLATE/ folder.
Make update-save changes to CSS/JS
Create a file called custom.css in your template-folder. There you can define own CSS-Rules that will be kept when a style is updated. It's the same with JavaScript, but the file has to be named custom.js.
Template files
All template files from EQdkp Core are located at the folder templates/base_template. If you want to modify one of these files, just copy the file you want to edit into your template-folder and edit it.
Plugin Templates
Plugins have their base_templates in their own template-Folder, like plugins/shoutbox/template/base_template. If you want to edit one or more of there templates, you do that by two ways:
- Create an folder at plugins/shoutbox/template/ named with your style, copy the templates you want to edit. All other templates will be taken from the base_template folder.
- Since 2.0, you can bring the plugin templates with your style. E.g. you want to create an own Version of chat.css (yes, it's the same with CSS and HTML files from base_template) from folder core\plugins\chat\templates\base_template\chat.css, create a new folder named "plugins/chat" in your style directory, copy the chat.css into that folder, and edit the file. As said, that works with .css and .html files from base_template dir of plugins.
Please remember, when copying templates, you have keep them up-to-date, because only the base_template files will be updated by the authors.
Template Engine
Our Template Engine is based on the phpBB Template Engine. For more information please see https://wiki.phpbb.com/Tutorial.Template_syntax
Template Vars
| Variable | Typ | Beschreibung |
|---|---|---|
| PAGE_TITLE | String | Page title |
| MAIN_TITLE | String | Guildname |
| SUB_TITLE | String | Subtitle |
| EQDKP_ROOT_PATH | String | Rootpath of EQdkp Plus |
| HEADER_LOGO | String | URL to the Logo |
| TEMPLATE_BACKGROUND | String | Background-Image |
| TEMPLATE_PATH | String | Path to the folder of the currently used template |
| TMPL_FOLDERNAME | String | Name of the template |
| S_NORMAL_HEADER | Boolean | Normal Header? |
| S_NORMAL_FOOTER | Boolean | Normal Footer? |
| S_NO_HEADER_FOOTER | Boolean | Dont show header or footer? |
| S_ADMIN | Boolean | User has admin permissions? |
| S_IN_ADMIN | Boolean | User is in admin area? |
| SID | String | Session-ID, should be append to URLs |
| S_LOGGED_IN | Boolean | User is logged in? |
| T_PORTAL_WIDTH | String | Portal-Width as set at style settings |
| T_COLUMN_LEFT_WIDTH | String | Width of left Column, if used by style |
| T_COLUMN_RIGHT_WIDTH | String | Width of right Column, if used by style |
| MAIN_MENU | String | Whole Output of Mainmenu |
| MAIN_MENU_MOBILE | String | UL-Mainmenu, e.g. for mobile display |
| BROWSER_CLASS | String | CSS Class for used Browser and OS |
| PAGE_CLASS | String | CSS Class for viewed page |
| ADMIN_MENU | String | Whole Output of Adminmenu |
| GAME | String | ID of used game |
| S_PLUGIN_xxx | Boolean | check if a plugin is installed, e.g. shoutbox |
| S_PORTAL_LEFT, S_PORTAL_RIGHT, S_PORTAL_BOTTOM, S_PORTAL_MIDDLE, S_PORTAL_XXXXXXX | Boolean | Check if current portalblock has content |
| PORTAL_LEFT, PORTAL_RIGHT, PORTAL_BOTTOM, PORTAL_MIDDLE, PORTAL_XXXXXXX | Boolean | Output of Portalblock |
| S_AUTH_GROUP_XX | Boolean | So you can check the Group memberships of the current user, XX is group number |
| SEO_EXTENSION | String | Extension for Controller-URLs /, .html or .php |
| GBL_CONTENT_BODY | String | The maincontent from the template Files |
| EQDKP_PLUS_COPYRIGHT | String | Our Copyright (you have to add it) |
| S_BRIDGE_INFO | Boolean | True if bridge is enabled |
| EQDKP_CONTROLLER_PATH | String | Path to controller (index.php) |
| EQDKP_IMAGE_PATH | String | Pfad zum EQdkp image-Ordner |
You will find more template variables at core/core.class.php, methods private function page_header() and public function addCommonTemplateVars()
LESS Vars (since 2.1)
@eqdkpURL
@eqdkpGame
@eqdkpServerPath
@eqdkpRootPath
@eqdkpImagePath
@eqdkpTemplateImagePath
@eqdkpTemplateBackground
@eqdkpBackgroundImage
@eqdkpBackgroundImagePosition
@eqdkpPortalWidth
@eqdkpColumnLeftWidth
@eqdkpColumnRightWidth
@eqdkpPortalWidthWithoutBothColumns
@eqdkpPortalWidthWithoutLeftColumn
@eqdkpPortalWidth
@eqdkpPortalColumnLeftWidth
@eqdkpPortalColumnRightWidth
@eqdkpBackgroundImage
@eqdkpBackgroundPosition
@eqdkpBackgroundImagePosition
@eqdkpColumnLeftWidth
@eqdkpColumnRightWidth
@eqdkpBodyBackgroundColor
@eqdkpBodyFontColor
@eqdkpBodyFontSize
@eqdkpBodyFontFamily
@eqdkpBodyLinkColor
@eqdkpBodyLinkColorHover
@eqdkpBodyLinkDecoration
@eqdkpContainerBackgroundColor
@eqdkpContainerBorderColor
@eqdkpContentBackgroundColor
@eqdkpContentFontColor
@eqdkpContentFontColorHeadings
@eqdkpContentLinkColor
@eqdkpContentLinkColorHover
@eqdkpContentBorderColor
@eqdkpContentAccentColor
@eqdkpContentContrastColor
@eqdkpContentContrastBackgroundColor
@eqdkpContentContrastBorderColor
@eqdkpContentHighlightColor
@eqdkpContentPositiveColor
@eqdkpContentNegativeColor
@eqdkpContentNeutralColor
@eqdkpUserareaBackgroundColor
@eqdkpUserareaFontColor
@eqdkpUserareaLinkColor
@eqdkpUserareaLinkColorHover
@eqdkpTableThBackgroundColor
@eqdkpTableThFontColor
@eqdkpTableTrFontColor
@eqdkpTableTrBackgroundColor1
@eqdkpTableTrBackgroundColor2
@eqdkpTableTrBackgroundColorHover
@eqdkpTableBorderColor
@eqdkpMenuBackgroundColor
@eqdkpMenuFontColor
@eqdkpMenuItemBackgroundColor
@eqdkpMenuItemBackgroundColorHover
@eqdkpMenuItemFontColorHover
@eqdkpSidebarBackgroundColor
@eqdkpSidebarFontColor
@eqdkpSidebarBorderColor
@eqdkpButtonBackgroundColor
@eqdkpButtonFontColor
@eqdkpButtonBorderColor
@eqdkpButtonBackgroundColorHover
@eqdkpButtonFontColorHover
@eqdkpButtonBorderColorHover
@eqdkpInputBackgroundColor
@eqdkpInputBorderColor
@eqdkpInputFontColor
@eqdkpInputBackgroundColorActive
@eqdkpInputBorderColorActive
@eqdkpInputFontColorActive
@eqdkpMiscColor1
@eqdkpMiscColor2
@eqdkpMiscColor3
@eqdkpMiscText1
@eqdkpMiscText2
@eqdkpMiscText3
