Comment modifier l'ensemble des catégories

[Féline1984]

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.



Merci d'avance pour votre aide

[Féline1984]

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

[MlleAlys]

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.

[Féline1984]

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 :

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.

[MlleAlys]

Ce code suivant a diminué la hauteur des sous-forums, ce qui "ronge" les icones sur l'accueil :

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.

[Féline1984]

Bonjour

Merci pour votre réponse.

Ce code a fonctionné    :

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

[MlleAlys]

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 ?
Si c'est ce que vous souhaitez, utilisez le code css suivant :

Code:

li.header {
  background: #e4d5f2;
}

[_Tonton_]

Salut,

Essaie ce code

li.header dl.icon{
 height : 20px;
}

[Féline1984]

Bonjour

Merci encore pour vos réponses
Le code suivant a fonctionné :

Code:

.table-title, .table-title h2 {
  font-size: 24px;
  font-family: 'Dancing Script', cursive;
}

"

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 :
et aussi :

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.

[MlleAlys]

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

[Féline1984]

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.