[Réglé] Modification du style Prosilver avec une extension

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.1

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Modification du style Prosilver avec une extension

Messagepar Manard » 28 Mar 2015 à 11:06

Bonjour,

Je m'adresse particulièrement à Cabot qui m'a suggéré cette solution dans ce post : styles-modifications-recherche-phpbb31/sujet204142.html#p1595264 , après l'avoir passé à l'état "Régler" et où je n'ai pas reposté, ne sachant si on peut réactiver un post "Régler"?

Comme tu as pu le constater, je ne suis pas un développeur, mais j'aime "bidouiller" :roll:

J'ai aperçu ce post sur phpBB.com : https://www.phpbb.com/community/viewtop ... #p13716031
qui aborde plusieurs solutions avec les "pour" et "contre".

J'ai créé un nouveau style par copie du style Prosilver, dans lequel j'ai principalement apporté des modification dans le Thème dont les fichiers css :colour, common et imageset, de nouveaux icônes dans le dossier images , puis dans le Template dans le fichier overall_header.html.

Si j'ai bien compris le document en anglais, l'héritage fonctionne pour les fichiers du Template mais pas pour ceux du Thème.

J'aimerai bien pas ne pas avoir à suivre ligne pas ligne les fichiers css lors d'une modification pour y rechercher celles à intégrer. Comment pourrais-je procéder avec une extension?

Je te remercie de ton aide et te souhaite une bonne journée

Bernard
Modifié en dernier par Manard le 31 Mar 2015 à 17:50, modifié 1 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 897
Enregistré le: 31 Mar 2012 à 08:24

Re: Modification du style Prosilver avec une extension

Messagepar Manard » 30 Mar 2015 à 20:49

Bonjour,


Ce week-end j'ai examiné des styles validés par phpBB.com, phpBB-fr.com, j'en ai vu, créés avec différentes méthodes en me basant sur celles détaillées dans ce post en anglais : https://www.phpbb.com/styles/create/#a- ... nheritance, dont les méthodes 1 et 4.

Un des points importants signalé dans le document ci-dessus, est le fonctionnement de l'héritage qui est opérationnel pour les fichiers du template mais pas pour ceux du thème.

Pour la personnalisation à partir du style Prosilver, j'ai utilisé la méthode 1 . J'ai vu que le style Aero est personnalisé de cette manière : https://www.phpbb.com/community/viewtop ... &t=2269886

Le style SE Square : https://www.phpbb.com/community/viewtop ... &t=2288586 , comporte tous les fichiers du thème avec les sous dossiers, par contre dans le dossier Template ne sont présents que les deux fichiers modifiés.

J'ai examiné des styles validés s'apparentant à la méthode 4 dont PBTech : https://www.phpbb.com/community/viewtop ... &t=2288601

Dans le fichier overall_header.html du dossier Template on trouve les chemins de différents css vers Prosilver tels : common.css, links.css, content.css, buttons.cs, cp.css, forms.css, pour responsive.css il y a le lien de Prosilver et celui du thème PBTech, pourquoi ? custom.css, pbnow.css, stylesheet.css vers ce thème personnalisé.

Un fichier nommé extensions.css est appelé au niveau de la variable {$STYLESHEETS} , prévue pour charger des extensions de fichiers complémentaires css : https://www.phpbb.com/styles/create/#a-mandatory

<link href="{T_THEME_PATH}/extensions.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

Pourquoi avoir mis ce lien ici, plutôt qu'avec les autres?

En éditant les fichiers css : extensions.css et stylesheet.css ils semblent contenir les css des fichiers colour.css et common.css. Pourquoi avoir des instructions css dans ces deux fichiers et ne pas les avoir regroupé ? Celui de pbnow.css comporte des instructions propres à ce style.

Je m'interroge sur la facilité de maintien d'une telle architecture lors d'une mise à jour. Rarement les fichiers css doivent être affectés, mais ça doit bien arriver de temps à autres. En partant des fichiers originaux dans lesquels sont inclus les modifications, je pense qu'il est plus facile de comparer ces fichiers avec ceux de Prosilver (avec Notepad++ et le plugin Compare entre autres).

A l'examen de ces différentes méthodes je serai tenté de faire évoluer mon style personnalisé avec la méthode de SE Square ou avec la méthode 4, mais en conservant la structure des fichiers de Prosilver.

Qu'en pensent nos spécialistes?

Bonne soirée à vous tous

Bernard
Modifié en dernier par Manard le 01 Avr 2015 à 11:20, modifié 1 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 897
Enregistré le: 31 Mar 2012 à 08:24

Re: Modification du style Prosilver avec une extension

Messagepar cabot » 31 Mar 2015 à 13:50

Hello,

Je déplace le sujet vers le forum de support des modifs de styles. :wink:

Votre sujet a été déplacé par un membre de l'équipe.
Origine : aide au développement d'extensions

J'ai examiné des styles validés s'apparentant à la méthode 4 dont PBTech

PBTech n'est pas une bonne référence pour appréhender la façon dont sont déclarées les CSS d'un style car il y a pas mal d'erreurs qui trainent dans les fichiers (règles dupliquées, images déclarées mais inexistantes, etc.).

Dans le fichier overall.header.html du dossier Template on trouve les chemins de différents css vers Prosilver tels : common.css, links.css, content.css, buttons.cs, cp.css, forms.css, pour responsive.css il y a le lien de Prosilver et celui du thème PBTech, pourquoi ? custom.css, pbnow.css, stylesheet.css vers ce thème personnalisé.

Le style charge certains fichiers CSS de prosilver pour profiter des mises à jour automatiques et d'autres intégrés au style pour la personnalisation.

Dans le fond l'idée est bonne et c'est celle à retenir. Mais dans la forme c'est une vraie usine à gaz pour la maintenance car les CSS ne sont pas du tout optimisées, et la multiplication des fichiers de personnalisation propres au style est source d'erreurs et de redondance dans les déclarations.

Un fichier nommé extensions.css est appelé au niveau de la variable {$STYLESHEETS} , prévue pour charger des extensions de fichiers complémentaires css

Le fichier extensions.css, chargé après la variable de template $STYLESHEETS contient des déclarations pour ajuster les CSS de certaines extensions, encore faut-il qu'elles soient installées pour qu'il ait une réelle utilité.

Là je ne comprends pas la logique, ou alors il faudrait que l'auteur mette régulièrement ce fichier à jour pour toutes les extensions validées. Ou mieux, plutôt que d'alourdir inutilement les CSS "au cas où", il eut été préférable de créer des sujets de FAQ afin d'indiquer les modifications à faire pour chaque extension.

Pourquoi avoir mis ce lien ici, plutôt qu'avec les autres?

Parce que la variable $STYLESHEETS charge les feuilles de style des extensions et que le fichier ajouté après contient des déclarations pour adapter les CSS de ces extensions au style.

En éditant les fichiers css : extensions.css et stylesheet.css ils semblent contenir les css des fichiers colour.css et common.css. Pourquoi avoir des instructions css dans ces deux fichiers et ne pas les avoir regroupé ? Celui de pbnow.css comporte des instructions propres à ce style.

Je t'avouerai que je suis incapable de comprendre la logique des CSS de ce style, si tant est qu'il y en ait une.
J'aime beaucoup le travail sur le design mais ce qui est sûr, c'est que le code n'est absolument pas optimisé et que ça ressemble plus à un brouillon (très brouillon) de développement qu'à autre chose. J'ai peut-être le ton un peu dur mais quand je vois que certaines révisions sont rejetées à cause d'un espace en trop sur une déclaration, je ne comprends pas que ce style soit passé aussi facilement à la validation.

Je m'interroge sur la facilité de maintien d'une telle architecture lors d'une mise à jour. Rarement les fichiers css doivent être affectés, mais ça doit bien arriver de temps à autres.

Ne t’interroge plus, comme dit plus haut, c'est une usine à gaz. Mais avec le système d'extension, ce n'est pas un réel problème pour les utilisateurs dès lors que l'auteur assure le suivi des mises à jour du style.
Par contre détrompe-toi, des modifications sont apportées aux CSS à chaque nouvelle version.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Modification du style Prosilver avec une extension

Messagepar Manard » 31 Mar 2015 à 14:55

Bonjour Cabot,

Effectivement le sujet est mieux dans cet espace :wink: . Je te remercie de t'être penché sur mes réflexions en m'apportant des réponses qui vont m'orienter vers une organisation plus simple du style que je suis en train de personnaliser, tout en essayant de me rapprocher de cette méthode 4 qui semble la plus recommandée lors de mises à jour.


Bonne fin de journée

Bernard
Modifié en dernier par Manard le 31 Mar 2015 à 17:43, modifié 1 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 897
Enregistré le: 31 Mar 2012 à 08:24

Re: Modification du style Prosilver avec une extension

Messagepar cabot » 31 Mar 2015 à 15:15

Si tu ne fais que très peu de modifs, tu peux charger toutes les CSS de prosilver et ajouter ta feuille de style pour déclarer tes quelques règles.

Sinon tu peux faire comme tu as dit (méthode 4), utiliser directement les feuilles de style de prosilver dans lesquelles tu n'apportes aucune modif, et charger dans ton style celles que tu dois modifier.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Modification du style Prosilver avec une extension

Messagepar Manard » 31 Mar 2015 à 17:01

Bonjour Cabot,

J'ai encore une interrogation, si tu connais la réponse car je ne l'ai pas aperçue dans le document de phpBB.com qui traite des styles dont j'ai donné le lien dans mon premier message.

Dans le fichier stylesheet.css de Prosilver : style/prosilver/theme/stylesheet.css on trouve le chemin de huit css : common, links, content, buttons, cp, forms, colours et imageset sous la forme :
@import url("common.css");

- Faut-il respecter l'ordre de ces fichiers css dans ce fichier stylesheet.css, ou bien peu importe l'ordre ?

De même, avec la méthode 4 on ne fait figurer dans ce fichier stylesheet.css que ceux que l'on personnalise dans notre style, les autres chemins étant indiqués dans le fichier overall_header.html du Template sous la forme :
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

Pareil, doit-on les lister dans un certain ordre ou peu importe ?

Pour les autres css du dossier thème de Prosilver (bidi, pupload, responsive, print, tweaks) les liens sont également indiqués dans ce fichier overall_header.html sous cette forme :
link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />

Peut-on dans le cas d'un style personnalisé à partir de Prosilver, indiquer les chemins vers Prosilver ou bien doit-on les avoir dans le dossier thème du style personnalisé avec les chemins inchangés dans le fichier overall_header.html ?

Edition :

Je viens de faire un test en appliquant cette méthode 4 avec simplement les liens des fichiers css modifiés dans stylesheet.css et les chemins des autres dans overall_header.html. Mon forum d'essai migré avec mon style personnalisé s'est bien ouvert, sans défaut d'affichage pour le moment avec peu de tests réalisés.

J'ai ensuite retiré du dossier thème les autres fichiers css que je n'ai pas modifiés (bidi, pupload, responsive, print, tweaks) et ai édité les chemins de ceux-ci dans overall_header.html pour indiquer ceux de Prosilver. J'ai effacé le cache, relancer mon forum, pas de problème d'affichage non plus. Toutes les configurations liées à ces css doivent être nombreuses pour toutes les valider ?

Qu'en penses-tu ?

Je te remercie de ta réponse et te souhaite une bonne soirée

Bernard
Modifié en dernier par Manard le 01 Avr 2015 à 11:19, modifié 2 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 897
Enregistré le: 31 Mar 2012 à 08:24

Re: Modification du style Prosilver avec une extension

Messagepar cabot » 31 Mar 2015 à 17:19

Charge common.css en premier car il contient les règles de reset css et des déclarations généralistes sur certaines balises HTML.

Charge colours.css et imageset.css en dernier car ils contiennent les déclarations de couleurs et d'images pour le premier, et les images Fr pour le deuxième.

Tu peux charger les autres (ceux qui sont à l'origine importés dans stylesheet) à la volée entre common.css et colours.css, que ce soit en héritage ou dans ton style.

Enfin pour les derniers, tu peux utiliser ceux de prosilver. Ex :
Code: Tout sélectionner
<link href="{ROOT_PATH}styles/prosilver/theme/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Modification du style Prosilver avec une extension

Messagepar Manard » 31 Mar 2015 à 17:50

Bonsoir Cabot,

Le temps que j'éditais mon message pour te dire que je venais de faire des essais, tu as répondu à mes diverses questions.

Donc je laisse en l'état en respectant l'ordre des fichiers common.css en premier et colour.css et imageset.css en dernier dans le fichier stylesheet.css car ils ont tous été modifiés dans mon style personnalisé avec content.css en plus.

Edition du 01 Avril

Hier soir en faisant des essais de validation, je me suis aperçu que la taille des caractères des fenêtres de connexion et de rédaction d'un message avaient des caractères plus petits

Avant modification des liens
Image
Après modification des liens
Image

Avant modification des liens
Image
Après modification des liens
Image

Comme indiqué par Cabot, l'ordre des css joue dans la prise en compte de l'affichage, maintenant que les liens sont dans deux fichiers : stylesheet.css et overall_header.html , l'ordre n'est peut-être plus respecté.

Je viens de tous les regrouper dans overall_header.html en mettant pour les css personnalisés, les liens dans le dossier thème, exemple :
<link href="{T_THEME_PATH}/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

et pour ceux non modifiés les liens vers Prosilver, exemple :
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

J'ai conservé dans les liens d'overall.header.html, l'ordre des fichiers css trouvé dans le fichier stylesheet.css de Prosilver : common.css, links.css, content.css, buttons.cs, cp.css, forms.css, colours et imageset.css.

J'ai bien sûr effacé les quatre liens des css personalisés du fichier sylesheet.css : common.css, content.css, colours.css et imageset.css

Après essai, la taille des caractères est redevenue normale.

Je passe mon message à l'état "Réglé" et te remercie pour toutes les informations que tu apportes et le temps que tu consacres à nous aider

Bonne soirée

Bernard
Manard
Roi des posts
Roi des posts
 
Messages: 897
Enregistré le: 31 Mar 2012 à 08:24


Retourner vers [3.1.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités