Creating a Style/fr

From EQdkp Plus
Jump to: navigation, search


Info

  • Template: Fichier .html contenant le code HTML. Il provient généralement du modèle (template) de base
  • Style: fournit les informations de couleur et de mise en page à appliquer sur un fichier modèle (template)

Créer un nouveau style

  • Copiez simplement un style existant comme eqdkp_modern, et renommez son dossier (a-z, 0-9, _ and -) au nom que vous souhaitez, ex: godmod_nouveaustyle
  • Vous devrez ensuite renommer eqdkp_modern.css pour qu'il corresponde à votre nouveau nom, ex: godmod_nouveaustyle.css
  • Modifiez le contenu du fichier package.xml existant pour y mettre à jour le nom, l'auteur, la licence, la version, et le plus important: le dossier. Indiquez-y le nom du dossier que vous avez créé.
  • Modifiez le contenu du fichier settings.xml. Changez-y le chemin du template pour qu'il corresponde au dossier que vous avez créé.

Vous devriez maintenant pouvoir installer ces fichiers. Tous changements comme les modifications de couleurs ou les modifications du template peuvent être réalisées en utilisant la Gestion des styles intégrée ou manuellement, mais consultez la section Template avant de vous lancer.

Thème jQuery

jQuery ThemeRoller

Nous utilisons les interfaces utilisateurs JQuery pour de nombreuses choses comme les onglets ou les dialogues. Vous pouvez créer votre propre thème pour les interfaces utilisateurs JQuery en utilisant jQuery ThemeRoller.

  • Allez sur jQuery ThemeRoller et créez votre propre thème
  • Téléchargez le thème que vous avez créé
  • Décompressez l'archive téléchargée et allez dans le dossier css/custom-theme/
  • Renommez le fichier jquery-ui.css en jquery_tmpl.css
  • Faites les modifications précédentes si vous les voulez.
  • Ajoutez le fichier jquery_tmpl.css dans le dossier racine de votre style
  • Ajoutez tous les fichiers du dossier "css/custom-theme" extraits de l'archive dans le dossier d'images de votre template, ex: templates/eqdkp_modern/images

Modifications de jquery_tmpl.css recommandées

Les couleurs peuvent différer de votre thème personnalisé. retirez ce code / ajoutez ce code

  • Retirer les fonds et utiliser des fonds transparents

.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; }

  • Ajouter un fond aux contrôles

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

  • Retirer les flèches d'accordéon

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

Modifier un style ou un modèle

Il y a deux moyens de modifier les fichiers de modèles et leur CSS.

Éditeur de style

Dans l'onglet Style de la Gestion des extension, vous pouvez cliquer sur l'onglet Modifier les modèles. Ceci vous amènera sur une page dotée d'une liste de fichiers dans laquelle vous pourrez choisir les fichiers de votre style à modifier. Les fichiers ainsi modifiés sont enregistrés dans data/..../templates/VOTRE_MODELE/

Modifier directement les fichiers

Vous pouvez modifier les fichiers directement en utilisant par exemple Notepad++. Si vous aviez édité ces même fichiers avec l'éditeur de modèles intégré, vos modification ne seront pas immédiatement visibles les car le système privilégie l'utilisation des fichiers se trouvant dans data/..../templates/VOTRE_MODELE/. Il vous faudra donc supprimer ces fichiers du dossier data/..../templates/VOTRE_MODELE/.

Faire une sauvegarde contre les changements de CSS/JS

Créez un fichier nommé custom.css dans le dossier de votre modèle et définissez-y les règles CSS qui devront être conservées lorsque le style est mis à jour. Procédez de la même façon pour le JavaScript en créant un fichier nommé custom.js.

Fichiers des Modèles

Tous les fichiers des modèles du noyau d'EQdkp sont situés dans le dossier templates/base_template. Si vous souhaitez modifier l'un de ces fichiers, il vous suffit de copier les fichier concernés dans le dossier de votre modèle et de les éditer.

Modèles des modules d'extension

Les modules d'extensions ont leur base_templates dans leur propre dossier de modèles, comme plugins/shoutbox/template/base_template. Si vous souhaitez modifier un ou plusieurs de ces modèles, vous pouvez procéder de deux façons différentes:

  • Créez un dossier du même nom que votre style dans plugins/shoutbox/template/ et y copier les modèles à modifier. Tous les autres modèles utilisés seront ceux du dossier base_template.
  • Depuis la version 2.0, vous pouvez transporter les modèles des modules d'extension dans votre style. Ex: Vous souhaitez créer une version personnelle de chat.css (oui, c'est pareil avec les fichiers CSS et HTML de base_template) du dossier core\plugins\chat\templates\base_template\chat.css, créez un nouveau dossier nommé "plugins/chat" dans le dossier de votre style, Copiez chat.css dans ce dossier, et modifiez le fichier. Comme il a été dit plus haut, cela fonctionne avec les fichiers .css et .html du dossier base_template dir de plugins.

N'oubliez pas que lorsque vous copiez des modèles, vous devrez les maintenir à jour car seul les fichiers de base_template seront actualisés par leurs auteurs.

Moteur de modèles

Notre moteur de modèles est basé sur celui de phpBB. Pour de plus amples détails veuillez consulter https://wiki.phpbb.com/Tutorial.Template_syntax

Variables de modèles

Variable Typ Description
PAGE_TITLE String Titre de la page
MAIN_TITLE String Nom de Guilde
SUB_TITLE String Sous-titre
EQDKP_ROOT_PATH String Chemin de la racine d'EQdkp Plus
HEADER_LOGO String URL du Logo
TEMPLATE_BACKGROUND String Image de fond
TEMPLATE_PATH String Chemin du dossier du modèle en cours d'utilisation
TMPL_FOLDERNAME String Nom du modèle
S_NORMAL_HEADER Boolean Entête Normale ?
S_NORMAL_FOOTER Boolean Pieds de page Normal ?
S_NO_HEADER_FOOTER Boolean Masquer l'entête ou le pied de page?
S_ADMIN Boolean Permision administrateur ?
S_IN_ADMIN Boolean L'utilisateur est dans la zone d'administration ?
SID String L'ID de session doit être ajouté aux URLs
S_LOGGED_IN Boolean L'utilisateur est connecté ?
T_PORTAL_WIDTH String Largeur de portail définie dans les réglages du style
T_COLUMN_LEFT_WIDTH String Largeur de la colonne de gauche, si elle est utilisée par le style
T_COLUMN_RIGHT_WIDTH String Largeur de la colonne de droite, si elle est utilisée par le style
MAIN_MENU String Sortie complète du menu principal
MAIN_MENU_MOBILE String UL-Menu, ex: pour un affichage sur mobile
BROWSER_CLASS String Classe CSS pour le navigateur et l'OS utilisés
PAGE_CLASS String Classe CSS pour la page consultée
ADMIN_MENU String Sortie complète du menu d'administration
GAME String ID du jeu utilisé
S_PLUGIN_xxx Boolean Test si un module d'extension est installé, ex: shoutbox
S_PORTAL_LEFT, S_PORTAL_RIGHT, S_PORTAL_BOTTOM, S_PORTAL_MIDDLE, S_PORTAL_XXXXXXX Boolean Test si le module de portail courant a un contenu
PORTAL_LEFT, PORTAL_RIGHT, PORTAL_BOTTOM, PORTAL_MIDDLE, PORTAL_XXXXXXX Boolean Sortie de module de Portail
S_AUTH_GROUP_XX Boolean Pour tester l'appartenance à un groupe de l'utilisateur actuel, XX est le numéro de groupe
SEO_EXTENSION String Extension des Controlleurs d'URLs /, .html ou .php
GBL_CONTENT_BODY String Le contenu du fichier de modèle
EQDKP_PLUS_COPYRIGHT String Notre Copyright (vous devez l'ajouter)
S_BRIDGE_INFO Boolean Vrai si un pont est actif
EQDKP_CONTROLLER_PATH String Chemin vers le contrôleur (index.php)
EQDKP_IMAGE_PATH String Chemin vers le dossier d'image d'EQdkp

Vous trouverez de nombreuses autres variables de modèles dans les méthodes private function page_header() et public function addCommonTemplateVars() de core/core.class.php

Variables abandonnées (à partir de la version 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