Comment modifier l'ensemble des catégories

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment modifier l'ensemble des catégories

Message par Féline1984 Jeu 4 Aoû 2022 - 7:22

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours, sur plusieurs thèmes
Lien du forum : C'est pour plusieurs de mes forums, mais surtout celui-ci : https://solidaritepub.forumactif.com/

Description du problème

Bonjour

J'aimerai modifier l'ensemble des catégories de mes forums, à savoir :

1) Rétrécir ou diminuer les contours : les cotés et le bas ( voir image ci-dessous : vert)
2) Rétrécir ou diminuer la hauteur du fond des catégories (voir image ci-dessous : orange)
3) Mettre des lignes en continue à l'intérieur (voir image ci-dessous  : rose)
4) Changer la taille des textes des catégories et la police d'écriture.

Comment modifier l'ensemble des catégories Foruma12

Merci d'avance pour votre aide
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par Féline1984 Lun 8 Aoû 2022 - 6:32

Le sujet est toujours d'actualité, je n'ai pas trouvé de solution.
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par MlleAlys Lun 8 Aoû 2022 - 21:05

Bonjour,

Pour affiner les lignes, je cache les éléments "corners-top" et "corners-bottom" qui a priori ne vous servent pas (qui servent normalement à l'effet arrondi des coins), et je passe à zéro une marge intérieure :

- Dans Affichage > Couleurs & CSS > onglet "feuille de style css", passez quelques lignes si vous avez déjà des codes installés, puis copiez/collez les codes suivant :
Code:
/*affiner les lignes extérieures des catégories*/
span.corners-top, span.corners-bottom {
  display: none;
}
.forabg, .forumbg {
  padding: 0;
}

Pour allonger les lignes, c'est un poil plus complexe, vous souhaitez en fait un comportement de tableau comme on peut le trouver en version phpbb2. Plutôt que de refaire toute la structure dans les templates, ou un javascript (parce que je ne maitrise pas bien), je vous propose d'essayer ce code css qui affiche les blocs structurant les catégories "comme si c'était un tableau" ("li" sera le cadre du tableau, "dl" sera une ligne de tableau, et "dd" sera une cellule de tableau) :

- toujours dans la feuille de style CSS, passez quelques lignes après les codes précédents, et copiez/collez les codes suivants :
Code:
/*allonger les lignes verticales des catégories : affichage en tableau*/
li.row, li.header {
  display: table !important;
  width: 100%;
}
dl.icon {
  display: table-row;
}
dl.icon dt, dd.dterm, dd.topics, dd.posts, dd.lastpost, dd.views {
  display: table-cell !important;
  float: none !important;
  vertical-align: middle;
}

- Enregistrez le css,
- Actualisez votre forum, et vérifiez l'affichage sur différentes pages (catégories, liste des sujets, etc)
- Pensez à modifier votre profil sur le forum des forums : CSS personnalisé : OUI.
MlleAlys

MlleAlys
Membre actif

Messages : 5325
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par Féline1984 Sam 13 Aoû 2022 - 22:03

Bonsoir

Merci pour votre réponse.

Le code suivant a marché :
Code:
/*allonger les lignes verticales des catégories : affichage en tableau*/
li.row, li.header {
  display: table !important;
  width: 100%;
}
dl.icon {
  display: table-row;
}
dl.icon dt, dd.dterm, dd.topics, dd.posts, dd.lastpost, dd.views {
  display: table-cell !important;
  float: none !important;
  vertical-align: middle;
}

Ce code suivant a diminué la hauteur des sous-forums, ce qui "ronge" les icones sur l'accueil :
Comment modifier l'ensemble des catégories Lu-ok210
Code:
/*affiner les lignes extérieures des catégories*/
span.corners-top, span.corners-bottom {
  display: none;
}
.forabg, .forumbg {
  padding: 0;
}
Comment y remédier ?

Sinon, j'avais posé deux autres questions :
2) Rétrécir ou diminuer la hauteur du fond des catégories (voir image ci-dessous : orange)
4) Changer la taille des textes des catégories et la police d'écriture.
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par MlleAlys Sam 13 Aoû 2022 - 23:27

Féline1984 a écrit:Ce code suivant a diminué la hauteur des sous-forums, ce qui "ronge" les icones sur l'accueil :
Comment modifier l'ensemble des catégories Lu-ok210
Code:
/*affiner les lignes extérieures des catégories*/
span.corners-top, span.corners-bottom {
  display: none;
}
.forabg, .forumbg {
  padding: 0;
}

Ah effectivement, il ne "ronge" pas vraiment, mais en diminuant la marge, on laisse plus d'espace au texte, qui prend moins de lignes, et donc la hauteur est moins importante et l'icone se trouve trop grande par rapport à celle-ci.
Vous pouvez forcer une hauteur minimale en ajoutant le code suivant :
Code:
.topiclist li.row {
  min-height: 140px !important;
}
(Comme votre image fait 130px de haut, j'ai mis une hauteur minimale de 140, mais vous pouvez l'adapter à votre souhait).


2) La taille de l'entête du "tableau" dépend de la taille de l'écriture à l'intérieur. Pour diminuer celle-ci, vous pouvez passer par Affichage > couleurs et régler les tailles ;
3) Très imprécis, vous souhaitez changer la taille de quel texte exactement ? tout mettre à la même ? Augmenter, diminuer certaines ? Avez-vous testé différentes valeurs dans Affichage > couleurs ?

Si vous trouvez que les options du panneau ne sont pas assez ciblées et que vous souhaitez modifier la taille uniquement des en-têtes (pour votre question 2) vous pouvez utiliser ce code css :
Code:
.header dd {
  font-size: 12px !important;
  padding: 0 !important;
  line-height: normal !important;
}
Remplacez "12px" par la taille du texte que vous souhaitez. (12px est déjà une valeur plus petite que l'actuelle).

Si vous souhaitez modifier la taille du texte de la liste des forums sans modifier ailleurs sur le site, vous pouvez utiliser ce code css :
Code:
.forabg .topiclist.forums {
  font-size: 11px;
}
Remplacez 11px par la valeur voulue.

Pour changer la police vous pouvez également passer par la gestion des couleurs du panneau d'administration ; si les options proposées ne sont pas assez ciblées à votre goût, il est également possible de passer par du css.
Si vous souhaitez changer la police de la liste des forums sans la modifier ailleurs sur le site, vous pouvez compléter le code précédent ainsi :
Code:
.forabg .topiclist.forums {
  font-size: 11px;
  font-family: comic sans ms;
}
Remplacez "comic sans ms" par la police souhaitée.

Si ce n'est pas ce que vous souhaitez faire, merci de donner un peu plus de détails.
MlleAlys

MlleAlys
Membre actif

Messages : 5325
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par Féline1984 Dim 14 Aoû 2022 - 5:00

Bonjour

Merci pour votre réponse.

Ce code a fonctionné  Smile  :
Code:
.topiclist li.row {
  min-height: 140px !important;
}

Pour la question "2) Rétrécir ou diminuer la hauteur du fond des catégories (voir image ci-dessous : orange)"
Oui, j'ai essayé avec PA> Couleurs
Je ne souhaite pas modifier les textes des forums, seulement les textes des catégories.
Je souhaite modifier la taille et la police d'écriture du texte des catégories sans modifier les textes à droite : SUJETS /MESSAGES / DERNIERS MESSAGES
Je souhaite que les textes des catégories soient font size 24 police "Dancing Script" avec le texte qui soit avec un contour "ton sur ton" avec 5 px de contour et de cette couleur : #9279C4
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par MlleAlys Dim 14 Aoû 2022 - 12:09

Pour la taille et la police du titre des catégories :
Code:
.table-title, .table-title h2 {
  font-size: 24px;
  font-family: 'Dancing Script', cursive;
}
Par contre je n'ai pas compris l'histoire de la bordure ^^"

EDIT : ou alprs tu souhaites que la couleur de fond ne soit qu'une bordure, et dans ce cas mettre dans l'entête la même couleur de fond qu'en dessous dans les lignes forum ? scratch
Si c'est ce que vous souhaitez, utilisez le code css suivant :
Code:
li.header {
  background: #e4d5f2;
}


Dernière édition par MlleAlys le Lun 15 Aoû 2022 - 11:49, édité 2 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5325
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par _Tonton_ Lun 15 Aoû 2022 - 8:40

Salut,

Essaie ce code

Code a écrit:
li.header dl.icon{
 height : 20px;
}

Wink
avatar

_Tonton_
*****

Messages : 662
Inscrit(e) le : 19/02/2011

Voir le profil de l'utilisateur https://aero-pompiers.forumactif.com
_Tonton_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par Féline1984 Lun 15 Aoû 2022 - 19:28

Bonjour

Merci encore pour vos réponses Smile
Le code suivant a fonctionné Smile :
Code:
.table-title, .table-title h2 {
  font-size: 24px;
  font-family: 'Dancing Script', cursive;
}

"
Mlle Alys a écrit:tu souhaites que la couleur de fond ne soit qu'une bordure
Non, ce n'est pas ça , mais je ne me suis pas bien exprimé, je vais mieux expliquer :
En fait pour cette catégorie par exemple :
Comment modifier l'ensemble des catégories Parten10 et aussi : Comment modifier l'ensemble des catégories Servic11

Je trouve que le texte , le haut et le bas du texte "Partenariat" par exemple est trop très du bord des catégories donc, je souhaite augmenter encore la hauteur des catégories sans pour autant augmenter la taille du texte des catégories. Je trouve aussi que c'est pas joli que les "ff" du mot "Affichage" touchent le bord du bas de la catégories Et, pour y remédier, il faudrait créer une bordure de 10 px autour des textes catégories, bordure de 10 px qui soit de la même couleur du fond des catégories.
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par MlleAlys Lun 15 Aoû 2022 - 19:45

AAAAAAH Donc augmenter la hauteur et non pas la diminuer ! Je comprends mieux !
Complétez le code précédent en ajoutant la ligne suivante :
line-height: 150%;
Cela augmente la hauteur de ligne, donc l'espace au dessus et en dessous du texte.
Vous pouvez diminuer ou augmenter le pourcentage.
Code:
.table-title, .table-title h2 {
  font-size: 24px;
  font-family: 'Dancing Script', cursive;
  line-height: 150%;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5325
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment modifier l'ensemble des catégories

Message par Féline1984 Lun 15 Aoû 2022 - 21:10

Bonjour

Je viens d'ajouter ce code et ça a marché :
Code:
  line-height: 150%;
}

Merci à tous pour votre aide, ce sujet est résolu.
Féline1984

Féline1984
***

Féminin
Messages : 105
Inscrit(e) le : 14/09/2018

Voir le profil de l'utilisateur http://felinepub.forumactif.com/
Féline1984 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum