Creating a Style/fr
Contents
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
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
