- Mots clés (3 caractères minimum) :
  
  *Froum :
  
  Auteur (3 caractères minimum) :
  
  Les champs marqués d'un * sont obligatoires.
- Connectez vous pour voir qui est la !
- Connectez vous pour accéder à votre messagerie privée !
- Tous les blogs
- Inscription

Les champs marqués d'un * sont obligatoires.

Aide sur les thèmes

Bas de page

zulios
C'est comme ça qu'est-ce que j'y peux...
Avatar de zulios

Administrateur

Cliquez ici pour voir les articles de zulios

Cliquez ici pour visiter le site de zulios

Message laissé le 21/07/11 à 00:54

Ce sujet est dédié pour vos demandes d'aide sur la création de thèmes. Pour créer un thème : mode d'emploi de la création de thèmes .

Message édité 1 fois. Dernière édition par zulios le 21/07/11 à 00:55.

- - - - - - - - - -

GG le club des papas ! Pensez aux gosses Smiley : lag28.png

Yohmgaï
iFourbe
Avatar de Yohmgaï

Cliquez ici pour voir les articles de Yohmgaï

Cliquez ici pour visiter le site de Yohmgaï

Message laissé le 26/07/11 à 10:19

Yop Smiley : lag33.gif

Merci beaucoup pour avoir mis à la disposition de la communauté cet outil, c'est fantastique Smiley : lag18.png
Je travaille lentement sur un thème en ce moment, mais je me heurte à deux obstacles…

Dans la box infouser, j'ai vu que je pouvais remplacer effectivement la couleur de fond par une image. Je voudrais savoir s'il était possible, par contre, d'avoir trois images au lieu d'une (en fait, un header, un motif répété pour le corps, et un footer) ce qui donnerait quelque chose comme ça (par exemple) :

Header

Body

Footer

Par ailleurs, je voulais savoir si tu autorisais l'intégration de polices avec l'attribut @font-face Smiley : lag11.png

Merci d'avance Smiley : lag33.gif

Message édité 1 fois. Dernière édition par Yohmgaï le 26/07/11 à 10:20.

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

zulios
C'est comme ça qu'est-ce que j'y peux...
Avatar de zulios

Administrateur

Message laissé le 26/07/11 à 10:57

Yo yo ! Smiley : lag01.png

Pas de souci pour les @font-face (ou tout autre attribut récent), de toute façon les gens qui ont un navigateur relativement ancien se rabattront sur le thème par défaut. Je l'ai volontairement conçu pour ça.

Sur ton problème de header / body / footer dans la zone infouser, j'avoue que je n'y avais pas pensé précédemment. Cependant tu pourrais utiliser le background multiples (CSS3) non ? Ce serait dans la continuité du premier point.

Message édité 2 fois. Dernière édition par zulios le 26/07/11 à 11:33.

- - - - - - - - - -

GG le club des papas ! Pensez aux gosses Smiley : lag28.png

Yohmgaï
iFourbe
Avatar de Yohmgaï

Message laissé le 26/07/11 à 11:56

Merci pour ta réponse Smiley : lag11.png

Alors, voilà où j'en suis rendu pour le moment :

Code :

	.post_infouser, .post_infouser_mp
	{ 
		float:left; 
		width: 160px; 
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 5px; 
		margin-right: 5px;
		padding: 5px; 
		overflow: hidden; 
		color: #FFFFFF; 
		background-color: none; /* rouge */
		background:url('images/cadre-header5px.png') no-repeat top, 
		url('images/cadre-footer5px.png') no-repeat bottom, 
		url('images/cadre-body5px.png' ;)  repeat; 
		-moz-border-radius: none; 
		-o-border-radius: none; 
		-webkit-border-radius: none; 
		border-radius: none; 
	}

C'est presque bon, mais y'a quand même un truc que je n'arrive pas à faire : le background "body" qui donc se répète dynamiquement selon la hauteur du block infouser, passe sous les deux autres images, et donc apparaît sous leur masque de transparence… je sais que les priorités sont gérées selon l'ordre d'apparition, donc j'ai mis le header et le footer en premier pour ne pas qu'il les recouvre… mais je n'ai pas trouvé comment dire à l'image "body" de se situer entre header et footer, ou au pire, de lui dire de commencer avec une marge de 5 pixels en haut et de se terminer avec une marge de 5 pixels en bas… j'ai essayé des trucs un peu bizarres dans la ligne "url('images/cadre-body5px.png') repeat; ", comme d'ajouter "padding: 5px" ou encore "margin-top: 5px" de la même manière que "bottom" ou "repeat", mais ça n'a fait que faire tout disparaître Smiley : lag08.png
Au pire, si c'est trop compliqué, je vire la transparence des bordures, mais c'est du bidouillage et ça oblige à changer les images si je change d'avis sur la couleur de fond :/

Merci d'avance, maître Zu Smiley : icon_yeux_triangle1.gif

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

zulios
C'est comme ça qu'est-ce que j'y peux...
Avatar de zulios

Administrateur

Message laissé le 26/07/11 à 13:02

Pour le positionnement de ton fond tu as un truc tout simple : tu mets des coordonnées x et y. Quelque chose comme ça :

background: url('images/monimage.png') 10px 10px;

Première propriété pour les coordonnées x, la seconde pour les coordonnées y. ça marche aussi avec des pourcentages. C'est une technique couramment utilisée pour les sprites css.

-- edit --

Faut vraiment que je m'occupe de cette balise code, j'utilise la balise html dédiée mais je n'aime pas son comportement.

Message édité 1 fois. Dernière édition par zulios le 26/07/11 à 13:03.

- - - - - - - - - -

GG le club des papas ! Pensez aux gosses Smiley : lag28.png

Yohmgaï
iFourbe
Avatar de Yohmgaï

Message laissé le 02/08/11 à 06:58

Bien, mon thème est presque fini (en V1, en tout cas, il y aura sûrement des trucs à changer ou corriger), mais je me suis heurté à un problème en vérifiant la page sur ff…

Voilà la partie de code concernée (enfin, je crois…)

Code :

	/***** 
	Tableaux de listing des données (listing des forums, des sujets...)
	*****/
	.tableau_data
	{
		background-color: #FFFFFF;
		opacity: 0.8;
		-moz-border-radius: 5px; 
		-o-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		border-radius: 5px; 
		margin-bottom: 5px;
		margin-top: 5px;
		border: 1px #ffcb00;
		border-top-style: solid;
		border-bottom-style: solid;

Et voilà ce que j'obtiens…

À gauche, webkit, à droite, gecko. Il y a deux problèmes, d'abord l'espacement entre les cellules, beaucoup plus important sur Firefox, et ensuite, le fait qu'il ait apparemment ignoré la largeur des cellules que j'ai pourtant bien spécifiée dans Colonnes de la liste des topics d'un forum … comment faire ? Smiley : lag04.png

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

Chann
Mireille Matthieu en herbe
Avatar de Chann

Modérateur

Cliquez ici pour voir les articles de Chann

Message laissé le 02/08/11 à 21:39

Yohm, est-ce que tu as vérifié que la somme des colonnes + margin + border ne dépasse pas la longueur totale du cadre englobant tout le forum ? Parce que sur la ligne des titres, je ne vois pas d'espace pour la colonne de modération comme ceci :

Peut-être que sur la ligne des intitulés, la cellule correspondant à la colonne modération est "zappée" car vide

- - - - - - - - - -
Club des Mamies et des Papys ! Smiley : lag28.png

Yohmgaï
iFourbe
Avatar de Yohmgaï

Message laissé le 03/08/11 à 06:55

Merci pour l'aide, en fait ce n'étaient pas les valeurs qui posaient problème, mais la taille de la police… ça m'ennuie un peu de la réduire, mais bon, au moins ça fonctionne maintenant Smiley : icon_yeux_triangle1.gif
Par contre, le mystère de l'espacement vertical sur Firefox demeure Smiley : lag21.png

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

zulios
C'est comme ça qu'est-ce que j'y peux...
Avatar de zulios

Administrateur

Message laissé le 03/08/11 à 10:28

En toute logique FF doit additionner margin-bottom + margin-top ce qui mène à 10px entre deux lignes. Tu as à peu près ça ?

Est-ce que tu as essayé de voir avec un outil type firebug s'il n'y a pas un héritage quelque part qui viendrait modifier les propriétés ?

- - - - - - - - - -

GG le club des papas ! Pensez aux gosses Smiley : lag28.png

Yohmgaï
iFourbe
Avatar de Yohmgaï

Message laissé le 03/08/11 à 10:51

Citation :

zulios a écrit :
En toute logique FF doit additionner margin-bottom + margin-top ce qui mène à 10px entre deux lignes. Tu as à peu près ça ?

Suite à ça, je me suis donc contenté de retirer "margin-bottom: 5px;", qui ne me sert pas à grand-chose, et cela semble fonctionner parfaitement sous FF et Safari maintenant Smiley : lag18.png je ne saurais pas trop me servir de l'outil dont tu parles, je ne suis vraiment pas bon dans tout ça… je me contente de remplacer des valeurs Smiley : icon_yeux_triangle1.gif
Merci encore, je crois que mon thème sera prêt dans très peu de temps maintenant Smiley : lag11.png

En fait, il n'y a plus qu'un seul truc (à ma connaissance) qui me pose encore problème, ce sont les pages inscription et profil, car j'utilise un fond avec motif, et ensuite des fonds transparents par-dessus… or, ces deux pages ne semblent pas avoir de section dédiée dans la feuille de style (ou alors je ne sais pas où ajouter mon background-color Smiley : icon_yeux_triangle1.gif ), du coup le texte est directement sur le motif, sans le fond transparent, ce qui laisse la page lisible, mais c'est pas top (surtout pour les intitulés…).

Message édité 2 fois. Dernière édition par Yohmgaï le 04/08/11 à 08:52.

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

Yohmgaï
iFourbe
Avatar de Yohmgaï

Message laissé le 04/08/11 à 08:50

À part ça, mon thème est fini Smiley : lag11.png

Par contre, j'ai une question… j'ai remplacé pas mal de fichiers image plutôt que de les rediriger vers de nouveaux fichiers. Dois-je créer un nouveau dossier avec les images de mon thème, ou est-ce que le thème ira puiser dans sa propre arborescence pour toutes les images ?

Merci d'avance Smiley : lag11.png

Oh, pendant que j'y suis, une petite liste de ce que j'aurais aimé pouvoir modifier :
Le champ de pseudo et de titres (taille, par exemple)
L'agencement du menu principal (je voulais le faire plus compact en faisant tenir par exemple le menu recherche sur une voire deux lignes, et ainsi éviter que le menu ne cache le reste du froum)
Avoir une zone d'édition/citation/modération différente entre les MP et les messages du froum (pour ne pas être obligé de devoir adapter sa taille pour les MP alors qu'il y a moins d'options dans le froum)
Et le problème de mon message précédent, à savoir avoir la main sur la page d'inscription et d'édition du profil Smiley : lag33.gif

Je précise que c'est vraiment pas important et vraiment pas pour me plaindre, juste histoire que tu sois au courant des trucs sur lesquels j'ai buté Smiley : icon_yeux_triangle1.gif

Message édité 2 fois. Dernière édition par Yohmgaï le 04/08/11 à 10:20.

- - - - - - - - - -
code ami Switch : SW-3328-2412-9032

zulios
C'est comme ça qu'est-ce que j'y peux...
Avatar de zulios

Administrateur

Message laissé le 09/08/11 à 20:04

L'un ou l'autre ne me pose pas de souci existentiel, je crée une arborescence dédiée pour chaque thème Smiley : lag11.png Si je vois que tu as conservé certaines images cependant je linke vers celles-ci, ça optimise le site à tous niveaux.

Pour la suite il faut simplement m'envoyer le zip avec les fichiers par email (je te la rappelle par mp) et on passe le thème au process de validation pour intégration.

J'ai bien pris note des points que tu souhaiterais modifier, je vais étudier cela dès que j'ai un moment pour me poser la-dessus.

Ah et au fait très joli les images, j'ai vu ça sur l'autre sujet Smiley : lag33.gif J'attends de voir de façon plus détaillée mais ça me plaît bien d'emblée.

Message édité 1 fois. Dernière édition par zulios le 09/08/11 à 20:09.

- - - - - - - - - -

GG le club des papas ! Pensez aux gosses Smiley : lag28.png

Haut de page

// Blam ! Version 2.0 Ecrit avec nos petits pieds 44 fillette. //