je crois que c'est la ligne border-bottom : solid #D1D1E1 1px; qui était absente
merci quand meme

Ce serait possible d'adapter des thèmes existants pour d'autres forums? Ceux d'Invision Power Board sont sympas par ex, comme là

oui c'est possible, tu peux le faire

Un des thèmes proposé a été inspiré d'un de ceux d'IB

Le 4 je crois oui, mon préféré, mais spa de PHPBB plutôt?

le 5

Ok mci; y a de nouveaux thèmes prévus par défaut?

Heu on n'a pas prévu un nombre précis de thèmes, ça viendra au fur et à mesure de leur conception

j'ai ajouté les classes cadre_infos et cadre_erreur

- cadre_infos : s'affiche pour tout texte seul sur la page (la ou il n'y a pas de liste de topics/de messages et dans les cas ou le formulaire n'est pas seul, comme les pages de login, de deplacement de topic...)
- cadre_erreur : cadre qui contient le message d'erreur (ce cadre a deux classes : cadre_infos et cadre_erreur, donc vous pouvez ne pas définir cadre_erreur)

Pour les thèmes qui n'implémentent pas ces classes et qui ne définissent pas la classe formulaire, aucune différence n'apparaître par rapport à avant. Pour les autres, toutes les pages auront maintenant le même style.

Les thèmes de les-forums.com ont été mis à jour (il vous faudra peut-être recharger par ctrl-F5 si les css sont en cache)

oo merci pour ce topic... et ce forum... je pensais justement me faire un piti thème css plus adapté a mon forum... ça va me facilité la vie,

- div.message_choix_icone Le panneau juste a coté du  textarea pour choisir ses icones

c'est ce que je cherchais , ouf!

juste une petite question, si on fait un css qu'on met dans "Autre...", mais qu'on change juste quelques petites choses (par exemple l'alignement des icônes ds div.message_choix_icone) est on obligé de reprendre toutes les autres colonnes? ou elles se mettent par défault comme dans la version normale... enfin vous comprennez quoi...

le 02/09/2004 à 17:12:14, j'ai dit :

Juste une petite question, si on fait un css qu'on met dans "Autre...", mais qu'on change juste quelques petites choses (par exemple l'alignement des icônes ds div.message_choix_icone) est on obligé de reprendre toutes les autres colonnes? ou elles se mettent par défault comme dans la version normale... enfin vous comprennez quoi...

oui, bon apparemment oui -_- zut zut et zut

copier-coller c pas trop dur encore

non ça va... j'ai "déja" commencé a le personnalisé ... dison plutot... j'ai observé unpeu, j'ai testé... lol tres pretique ce topic... merci Fab

Quelques nouvelles classes font leur apparition pour la nouvelle zone de numérotation des pages

.zone_pages représente la zone complète
.zone_pages_topics représente la même zone, mais sur la page des topics seulement
.zone_pages_message idem pour la page des messages

.page représente chaque cadre interne
.page_infos représente en plus le premier cadre "page x sur y"
.page_en_cours représente en plus le cadre de la page en cours

voici les styles par défaut, hors thème :

.zone_pages {
  float : left;
  background : white;
  clear : both;
  border : dotted gray 1px;
}
.page {
  float : left;
  padding : 2px 0.5em;
  border-left : dotted gray 1px;
}
.page_infos {
  border-left : 0px;
  font-weight : bold;
}
.page_en_cours {
  font-weight : bold;
}

ils sont modifiés dans tous les thèmes officiels pour adapter les couleurs

Pour une meilleure harmonie des styles, quelques nouvelles classes font leur apparition pour la barre des liens "actualiser", "bas de la page"...

.zone_liens_ctxt représente la zone complète
.zone_liens_ctxt_forums représente la même zone, mais sur la page des forums seulement
.zone_liens_ctxt_topics idem pour la page des topics
.zone_liens_ctxt_message idem pour la page des messages

.lien_ctxt représente chaque cadre interne

voici les styles par défaut, hors thème :

.zone_liens_ctxt {
  float : right;
  background : white;
  border : dotted gray 1px;
  border-left : none;
}
.lien_ctxt {
  float : left;
  padding : 2px 0.5em;
  border-left : dotted gray 1px;
}
.zone_liens_ctxt a {
  display : block;
  cursor : pointer;
}
.zone_liens_ctxt div {
  padding-bottom : 0px;
  padding-top : 0px;
}
.menu_select_forum {
  display : inline;
  margin : 0px;
  padding : 0px;
}
.menu_select_forum select, .menu_select_forum input {
  font-size : 10px;
}
.menu_select_forum option, .menu_select_forum optgroup {
  font-size : inherit;
}

Ces classes ont déjà été ajoutées dans les styles officiels.

Exemple pratique sur le forum Démo (donc cf. le cadre de citation dans le message précédent):

A droite en bas du tableau des sous-forums/topics/messages, la zone qui s'appelle .zone_liens_ctxt contient:
- les liens Actualiser, Haut de la page et Topics,
- la liste déroulante Liste des sous-forums
- et le bouton Go
Sa couleur de fond est blanche (white) et du coup le petit espace entre le bloc des trois liens les plus à gauche, la liste déroulante et le bouton, est blanche.

Pour le supprimer on pourrait mettre un fond pour cette zone identique à celui de toute la page, soit la couleur #37b6e5 (bleu moyen clair), mais du coup le fond des trois liens les plus à gauche dans leur cadre bien rectangulaire deviendrait bleu aussi, hors on veut que ces trois-là restent avec leur fond blanc.

Il donc aussi modifier les propriétés des sous-ensembles de cette zone.

D'abord enlever le fond blanc appliqué à toute la zone:

.zone_liens_ctxt {
  background-color: #37b6e5;
}

Maintenant que tout le fond est de la même couleur que le fond général, c'est bien l'effet voulu sur la liste déroulante et le bouton, mais pas sur les trois boutons de gauche qui ont perdu leur fond blanc.
L'important est de bien chercher comment les atteindre:
- le cadre interne .lien_ctxt est trop générique, puisqu'il cible aussi la liste déroulante et le bouton, leur fond redeviendrait aussi blanc
- en revanche les liens à l'intérieur de la zone .zone_liens_ctxt sont spécifiques, eux. Attention, ça ne fonctionne que parce que dans notre cas, les liens A sont des blocs, comme un DIV ou un P ou un IMG, ou un FORM, etc... et non de simples éléments de texte comme c'est le cas par défaut; ceci grâce à la propriété display: block spécifique au thème.

Voici comment les atteindre et leur mettre un fond blanc

.zone_liens_ctxt a {
  background-color: white;
}

Autre problème maintenant: la bordure de la zone

Et bien oui, tant qu'à faire il serait sympa de ne l'appliquer qu'aux trois liens et non pas à toute la zone, comme c'est encore le cas.

Il faut procéder de la même manière que pour la couleur de fond blanc:

.zone_liens_ctxt {
  background-color: #37b6e5;
  border: none;
}

.zone_liens_ctxt a {
  background-color: #37b6e5;
  border: solid #7FA6B8 1px; /* Cette propriété était celle de .zone_liens_ctxt avant qu'on ne la change pour "none" */}

Ouf c'est presque fini. Encore un petit ajustement graphique: comme les bordures sont juxtaposées entre les liens, on dirait qu'à ces endroits elle est plus forte qu'ailleurs. La raison est simple: deux bordures de 1px l'une à côté de l'autre, ça donne l'impression d'une bordure de 2px. Logique...

En gros l'astuce consiste à enlever la bordure au même bord latéral de chaque lien. Si on enlève le bord de droite, il y aura fatalement, à droite du lien le plus à droite, une absence anormale de bordure. Si on enlève le bord de gauche, c'est la même chose à gauche.
Il faut donc spécifier un seul bord latéral du bloc contenant, soit .zone_liens_ctxt, du côté où ça nous arrange, c.a.d. à gauche, et surtout pas à droite où l'on ne veut pas de bord droit à côté du bouton !

On remodifie tout ça avec le bord *gauche*:

.zone_liens_ctxt {
  background-color: #37b6e5;
  border: none;
  border-left: solid #7FA6B8 1px;
}

.zone_liens_ctxt a {
  background-color: white;
  border: solid #7FA6B8 1px;
  border-left: none;
}

Terminé!

.zone_liens_ctxt {
  background-color: #37b6e5;
  border: none;
  border-left: dotted gray 1px;
}

.zone_liens_ctxt a {
  background-color: white;
  border: dotted gray 1px;
  border-left: none;
}

(et pour aller avec le reste les bordures seraient plutot solid #7FA6B8 1px)

ha oui, corrigé pour les deux. pour le bord, j'avais fait ces modifs sur arena donc j'ai confondu avec tes valeurs à toi

de plus pour .zone_liens_ctxt, tu aurais du mettre transparent plutôt qu'une couleur fixe, ainsi... c'est transparent

D'ailleurs, j'ai modifié le thème du forum demo pour aller avec ton idée, et au final mon css pour cette zone est :

.zone_liens_ctxt * {
  vertical-align : middle;
}
.zone_liens_ctxt {
  background-color: transparent;
  border: none;
  border-left: solid #7FA6B8 1px;
}

.zone_liens_ctxt a {
  background-color: white;
  border: solid #7FA6B8 1px;
  border-left: none;
}
.zone_liens_ctxt div {
  border-left: none;
  padding-left : 3px;
  padding-right : 0px;
}
input#go_button_bas, input#go_button_haut {
  background-color: white;
  border: solid #7FA6B8 1px;
  color : #0073A5;
  cursor : pointer;
  padding : 1px 0.5em;
  font-size : 12px;
}

input#go_button_bas:hover , input#go_button_haut:hover {
  color : #FF4400;
}
.menu_select_forum * {
  vertical-align : top;
}
.menu_select_forum select {
  font-size : 11px;
}

(j'ai oublié de préciser, le premier lien a deux classes : en plus de l simple classe "lien_ctxt", il a la classe "premier_ctxt")

C bien ! mais je vois que sur le bouton Go la taille de la police est plus petite que celle des autres liens

voilà, c'est corrigé et j'ai mis à jour le css dans mon msg précédent

Je ressors ce topic qui date maintenant de 4 ans.
Pour dire bonjour à Twidi et à l'équipe de les-forums.com.

Je sais pas si vous vous rappelez de moi. Mais, moi je me souviens de vous. C'est à cause de vous d'ailleurs que je suis dans la programmation et dans le web maintenant... xD

Je suis content que ce site reste actif! On a connu des périodes difficiles.
Un coup c'était payant pour un forum, ensuite c'est devenu gratuit, après il fallait payer tous les mois, et maintenant, je vois que le site reste gratuit. C'est tant mieux pour les admins des forums

Bonne journée à tous!