Creating a Style

From EQdkp Plus
Jump to: navigation, search


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

jQuery ThemeRoller

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