Forum

Bonjour à tous,
j’entreprends de faire une mise à jour de mon site de la 5.1.4 à la 5.2.5, tout son passe pour le mieux mais j'ai néanmoins un petit souci de Css avec le thème gaming blue.

Voici ce que j'avais avant de faire la mise à jour :


Ça me convient totalement, mais depuis la mise à jour, le thème fait des siennes, les ronds ne sont plus ronds et dans l'header les boutons ne sont pas au même niveau que les sous-menus.

Voici le problème en image :


Et voici les liens des sites :
Site en 5.1.4
Site en 5.2.5.

Si quelqu'un peux m'indiquer quel fichier modifier et comment ?

Merci.


P.s : je précise que les modifications dans /admin/menus/menus.php ne fonctionne pas, ça déplace bien le connect mini, mais jamais ou je le souhaite.

EDIT : Voici ce à quoi j'aimerais que ça ressemble, j'ai essayé de bidouiller le css mais je vraiment une quiche la dessus...

Édité par Izutox Le 02/05/2020 à 14h28

Plop

De ce que je vois, tel qu'est fait le thème (que je ne maitrise pas), il faudra toujours déclarer au moins un menu dans l'emplacement entête sous peine de ne pas voir le logo/titre du site s'afficher

Sinon pour le problème, il faut modifier les css, en effet, mais pas que
Dans un premier temps
- fichier design.css du thème ligne:60

à remplacer par

- reprendre le design du mini-connect de la version précédente pour n'avoir que les boutons
- replacer le menu recherche à la fin

ça devrait donner un truc comme ça : <a href="http://prntscr.com/s9ridt">http://prntscr.com/s9ridt</a>

Merci pour la réponse babsolune.
J'ai suivie ce que tu à écris voici le résultat :


Ça se rapproche de ce que j'avais avant, mais j'aimerais retirer les champs pseudo et mdp pour les mettre sur une page dédié.

Ensuite, une fois connecté les cercles qui entourent les boutons du connect mini ne sont pas rond et j'aimerais que les menus et le connect mini soit au centre.



Au final ça devrait ressembler à ça quand l'utilisateur n'est pas connecté :


Et au final à ça quand l'utilisateur est connecté :


Merci à vous

P.s J'ai pas compris la deuxième manip que m'avez demandé de faire (- reprendre le design du mini-connect de la version précédente pour n'avoir que les boutons) , j'ai essayé de copier le code de l'ancien vers le nouveau, mais ça fonctionne pas du tout...

Édité par Izutox Le 03/05/2020 à 08h48

Je suis entrain d'essayer de mettre à jour le thème en suivant ce guide.
Malheureusement ça ne fonctionne toujours pas.
Voici ce que ça donne en convertissant le site en 5.2.X :

EDIT :

Alors je ne sais pas avec quelle sorcellerie, mais ça fonctionne à peu près.

Il reste cependant à régler le fait que les icônes du connect-mini ne soient pas rond, que la barre de recherche ne ce trouve pas à droite.
J'ai essayé de le mettre en dernière position dans le menu mais rien n'y fait, il ne change pas d'endroit.

Il reste également l'incompatibilité avec avec font awesome qui me fait des symboles étrange :


Voila ce que ça donne en ce moment quand l'utilisateur est déconnecté :


Lorsque l'utilisateur est connecté :
.

Pour résumer, je cherche un moyen de faire en sorte que :

- Les boutons soient vraiment rond.
- Pouvoir mettre le champ recherche complétement à droite.
- Corriger le problème de font awesome

Édité par Izutox Le 03/05/2020 à 15h19

les boutons ronds: chaque icône doit porter la classe fa-fw, ce qui force les icônes à toutes avoir la même largeur, puis ajuster le padding pour que le border-radius s'applique de manière adéquate


le <span style="text-decoration: underline;">recherche</span> à droite: il faut vérifier qu'il n'y ait pas de float dans le css d'un des modules, qui pourrait interférer avec le display: flex

problème de font-awesome: si l'icône ne s'affiche pas mais affiche son code à la place, c'est que son nom ou son code n'existe plus, il faut le remplacer par le nouveau ou un qui existe <a href="https://fontawesome.com/icons?d=gallery">https://fontawesome.com/icons?d=gallery</a>
il faut aussi vérifier que le font-family soit bien 'Font Awesome 5 Free' et qu'il ait un poids, font-weight: 900 ou 400

Merci beaucoup pour votre réponse !

J'ai réussi à régler le problème pour les éléments type recherche, titre, menu etc... quand l'utilisateur est hors ligne.
Par contre j'ai toujours le même problème quand l'utilisateur se connecte, les éléments du header se trouve tous vers la gauche au lieu d'être centrée.




J'ai bien respecter la partie ou il demande de remplacer les appels à font par :

Code CSS :

font-family: 'Font Awesome 5 Free';
font-weight: 900;

Ça c'est corrigé.

Il reste donc uniquement la mise en place du menu, de la recherche et du connect-mini. si je pouvais avec un petit peu d'aide sur ce sujet.

Bien à vous

EDIT :

J'arrive à déplacer le search-mini sur la droite via l'inspecteur de mon navigateur, mais je ne sais pas sur quel fichier
il faut que j'effectue la modification pour l'appliquer, ce n'est pas indiqué...

Édité par Izutox Le 06/05/2020 à 16h50

en théorie un margin: auto devrait suffire
ça permet d'équilibrer les margin de chaque coté et donc de centrer le contenu lorsqu'il est moins large que la fenêtre

Édité par babsolune Le 06/05/2020 à 18h45

Effectivement, le margin:auto fonctionne bien, mais le problème c'est que la partie que je dois modifier (fichier default.css) gère également la disposition du menu de gauche. Résultat, ce dernier se retrouve en fin de page...

Voici quelques captures d'écran :




J'ai pensé à créer un double de default.css en modifiant le nom afin de pouvoir séparer le connect-mini du menu gauche.
Malheureusement je sais pas comment faire le lien entre le connect-mini et le nouveau fichier css que j'ai dupliqué...

default.css ?????
heu... il n'y en a pas dans ce thème, default.css fait parti du pack default, il faut en général éviter de le modifier et de toute façon, pas directement. Je ne vois pas bien ce qu'il vient faire là.

<div class="formatter-container formatter-blockquote"><span class="formatter-title">Citation :</span><div class="formatter-content">gère également la disposition du menu de gauche</div></div>
pas du tout, c'est dans <a href="https://github.com/PHPBoost/Themes/blob/5.2/gaming-blue/theme/design.css#L182">design.css</a>
<div class="formatter-container formatter-blockquote"><span class="formatter-title">Citation :</span><div class="formatter-content">Résultat, ce dernier se retrouve en fin de page...</div></div>
c'est qu'il y eu une erreur de faite, une propriété de placement mal modifiée ou supprimée

<div class="formatter-container formatter-blockquote"><span class="formatter-title">Citation :</span><div class="formatter-content">J'ai pensé à créer un double de default.css en modifiant le nom afin de pouvoir séparer le connect-mini du menu gauche</div></div>
le connect-mini a son propre css dans le thème /gaming-blue/modules/connect, mais ce n'est pas en css qu'il faut faire ça, et il n'est pas dans le menu de gauche mais dans l’entête.
Je ne suis pas sur de comprendre la demande mais dans phpboost on ne peut modifier l'emplacement des mini que via l'administration des menus =>administration=>contenu=>menus/gestion

aide pour la modification d'un thème <a href="/wiki/personnaliser-un-theme">https://www.phpboost.com/wiki/personnaliser-un-theme</a> <img src="/images/smileys/wink.png" alt=";)" title=";)" class="smiley" />

Ah, pourtant quand je regarde dans l'inspecteur de firefox, c'est bien le fichier default.css du dossier .../template/default/theme/default.css (voir capture d'écran ci-dessous) qui contrôle le connect-mini.

Du coups je suis complétement perdu car c'est le seul avec lequel j'ai réussi à effectuer
des changements sur le connect-mini :/

Édité par Izutox Le 07/05/2020 à 13h36

<img src="/images/smileys/happy.png" alt="^^" title="^^" class="smiley" /> ce n'est pas le bon sélecteur
enfin si mais celui-ci s'applique à tout élément du site (*) donc forcement à l'ul et de fait s'il est modifié, la modification s'applique à tout les éléments ce qui explique la "descente" du menu gauche
le bon sélecteur est celui du haut <a href="http://prntscr.com/sckjj1">http://prntscr.com/sckjj1</a> et se modifie dans le connect-mini.css du thème (/gaming-blue/modules/connect/connect-mini.css) <a href="http://prntscr.com/sckni9">http://prntscr.com/sckni9</a>

Merci pour vos précisions, mais j'arrive pas à trouver l'endroit à modifier, je suppose que c'est à partir de la ligne 131 Mais je ne sais guerre ou, si vous pouviez me confirmer et m'indiquer la partie à modifier ?

Aaaah, ce fameux connect, une belle histoire d'<a href="https://i.servimg.com/u/f68/19/32/17/97/tm/gaston10.jpg">Apapou</a> <img src="/images/smileys/grin.png" alt=":D" title=":D" class="smiley" />

Connected semble en effet être destiné à l'affichage du mini module lorsque l'utilisateur est connecté mais attention aux "horizontal" ou pas, sous-entendu, si ce n'est pas horizontal, c'est vertical mais pas forcement, ça peut aussi être pour les deux. que dire d'une classe ou un sélecteur dont le nom n'est pas explicite... bref un papa à poux pas papa en perspective

Je ne peux que conseiller la plus efficace des méthodes: le test
Essayer, se planter, se relever, se replanter, s'énerver jusqu'à enfin trouver puis affiner et enfin vaincre <img src="/images/smileys/smile.png" alt=":)" title=":)" class="smiley" />

babsolune :

Aaaah, ce fameux connect, une belle histoire d'Apapou

Connected semble en effet être destiné à l'affichage du mini module lorsque l'utilisateur est connecté mais attention aux "horizontal" ou pas, sous-entendu, si ce n'est pas horizontal, c'est vertical mais pas forcement, ça peut aussi être pour les deux. que dire d'une classe ou un sélecteur dont le nom n'est pas explicite... bref un papa à poux pas papa en perspective

Je ne peux que conseiller la plus efficace des méthodes: le test
Essayer, se planter, se relever, se replanter, s'énerver jusqu'à enfin trouver puis affiner et enfin vaincre

Alors j'ai bien regarder plusieurs fois et j'ai tout essayer de modifier
mais il y a rien pour centrer dans tout le code connect-mini.css

Je vous avoue que je suis complétement perdu à ce niveau la. :'(

EDIT :

J'ai réglé ce problème d'une manière très sale.
Maintenant j'ai encore une dernière question, tout les champs de texte s'appuient sur le form.css pour la couleur de fond.
J'aimerais modifier séparément la couleur de fond du BBcode et de champs recherche dans le search-mini, comment puis-je faire ?

Édité par Izutox Le 07/05/2020 à 21h37

Si un sélecteur manque rien n’empêche de le créer, on ajoute une classe dans le html à l'endroit voulu, puis on défini ses propriétés dans le fichier css correspondant. mais on peut aussi définir un sélecteur en css sans pour autant ajouter quoi que ce soit en html

s'il n'y a que le sélecteur

input[type=text] { color: black;}

défini dans le css, je peux tout à fait ajouter un sélecteur

#news input[type=text] { color: red;}

qui n'agira donc que sur les champs texte contenus dans l'emplacement ayant pour identifiant la valeur "news"

Édité par babsolune Le 08/05/2020 à 09h12