Connectix Boards

Bienvenue, vous n'êtes pas connecté. ( Se connecter - S'enregistrer )

Dernière version sortie: 0.8.4!
Venez tester la version 1.0 beta :)

Connectix Boards > Zone développement > Skins & Templates > [En cours] Id_liteblue

Pages (2): [1] - 2
RSS >  [En cours] Id_liteblue, Inspirée par un thèmeur phpBB
Ishimaru Chiaki #1 25/05/2009 - 10h48

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Bonjour.

Bien que je n'ai aucune idée d'une date probable de la sortie de la beta de la 1.0, je me suis quand même replongée dans la création de nouveaux skins, suite à une poussée d'inspiration.

J'ai donc dépoussiéré une ébauche que j'avais et je l'ai retravaillé pour en faire un skin contenant deux styles à largeur fixe : l'une pour les petites résolutions (800), l'autre pour les résolutions moyennes (1024) et qui ne prendra pas une largeur excessive sur les grosses résolutions.  Ce style 1024 a sa version "gros caractères" en plus de la version normale.

Pour le style, je me suis inspirée de certains thèmes phpBB de Vjacheslav Trushkin, un graphiste très connu de la communauté phpBB où il est aussi connu sous le pseudo de CyberAlien

Voici donc mon WIP, où je viens pas mal de finir le layout et fait quelques tests IE : http://ishimaru-design.servhome.org/tests/cb

Comme vous voyez, j'ai poussé en masse les possibilités du CSS de CB et ce skin sera appelée à être plus abouti que mes skins précédents.
Ce message a été édité par Ishimaru Chiaki le 25/05/2009 à 10h50.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Martin #2 25/05/2009 - 11h18

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

J'aime beaucoup  :love:
Je retirerais peut-être quelques borders dans les tableaux comme celui de la page d'accueil avec les forums. Je trouve plus joli de les éviter... (enfin, ce n'est que mon avis :rolleyes: )
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
120forever #3 25/05/2009 - 19h00

Groupe : Habitué
Messages : 127
Enregistré le : 19/05/2007

Hors ligne

Il manque une couleur, tel le orange. Parce que ca fait juste du bleu et je trouve cela choquant visuellement.
Peut-être tout simplement en mettant une autre couleurs aux liens ?

Le design est extensible ?

Sinon j'aime beaucoup.   :love:
Ishimaru Chiaki #4 25/05/2009 - 22h54

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

120forever @ 25/05/2009 - 13h00 a dit:

Il manque une couleur, tel le orange. Parce que ca fait juste du bleu et je trouve cela choquant visuellement.
Peut-être tout simplement en mettant une autre couleurs aux liens ?



J'avais pensé un peu pour le orange, mais je n'étais pas sûre si ça allait être suffisamment lisible, suivant la configuration d'écran et la vision du visiteur.  Je ne veux pas un orange trop clair.

Le design est extensible ?



Je l'ai spécifié plus haut que j'ai fait deux styles fixes, l'une en 800 et l'autre en 1024, mais je pourrais aussi en faire un en 1280 pour satisfaire les grosses résolutions (sachant que plusieurs utilisateurs de grosses résolutions n'aiment pas trop quand la page est trop large).  Pour que ça soit extensible, il faudrait que je fasse un jeu de template personnalisé où j'ajoute des éléments HTML pour permettre une extensibilité totale, car le template actuel ne me permet qu'une demi-extensibilité, comme dans Bluewhite et donc, à faire de grandes images qui finissent par peser lourd sur le poids de l'archive.

Sinon j'aime beaucoup.   :love:



Merci ^^
Ce message a été édité par Ishimaru Chiaki le 25/05/2009 à 22h56.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Ishimaru Chiaki #5 26/05/2009 - 03h52

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

J'ai finalement changé la couleur des liens, en prenant un orange qui soit suffisamment foncé pour que ce soit bien lisible.

J'ai aussi fait les folders des groupes de sujet.

Capture : http://img.photobucket.com/albums/v381/ladykatt/liteblue-demo1.png

Gris tout court : Messages lus
Gris avec flèche : Forum-lien
Bleu avec un crocher : Messages non-lus

Donc, j'ai fait en sorte que le marqueur de nouveaux messages et le marqueur de forum-lien se démarquent du marqueur de messages lus.
Vu l'utilisation de fonds en dégradé, j'ai enregistré les icones en GIF, en prenant soin de mettre un calque s'adaptant à la forme du bouton et utilisant la même couleur que le fond des cellules, pour des raisons esthétiques.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
120forever #6 26/05/2009 - 07h12

Groupe : Habitué
Messages : 127
Enregistré le : 19/05/2007

Hors ligne

Y'a pas a dire, c'est tout du suite plus mignon !  :lol:

Sinon, vus que c'est censé être le style de la version 1.0, autant en profité pour éditer le html de manière a ce que le design soit entièrement extensible, non ?

Pour ce qui est des images arrondis, pas obligé de faire une grande image de la longueur, juste 4 coins suffisent avec un positionnement en absolu.

On peut même aller chercher plus loin en faisant un design extensible "intelligent", qui ne prend pas toute la largeur de l'écran si la personne a un écran 24" ou au contraire toute la largeur si la personne a un 15".
Une largeur de 90% centré horizontalement grâce aux marges automatiques et une utilisation de min-width et max-width pour l'empêcher de prendre une largeur trop faible ou trop importante. Certains navigateurs ne prennent pas encore en charge ces propriétés ? Est-ce gênant ? Je pense pas, l'utilisateur aura simplement un design sur toute la largeur, comme actuellement.


mon conteneur principal {
 width: 90%;
 max-width: 90em;
 min-width: 850px;
 margin-left: auto;
 margin-right: auto;
}
Ce message a été édité par 120forever le 26/05/2009 à 07h28.
Ishimaru Chiaki #7 26/05/2009 - 08h35

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

120forever @ 26/05/2009 - 01h12 a dit:

Sinon, vus que c'est censé être le style de la version 1.0, autant en profité pour éditer le html de manière a ce que le design soit entièrement extensible, non ?



Jusqu'à maintenant, je l'ai fait pour la 0.8.  Je n'ai encore eu aucune indice d'une date pour la beta et donc, je ne sais pas du tout si je dois attendre la 1.0 ou non avant de continuer les skins.

Pour ce qui est des images arrondis, pas obligé de faire une grande image de la longueur, juste 4 coins suffisent avec un positionnement en absolu.



Mais là il ne s'agit pas d'un cadrage sans effet, mais d'un cadrage AVEC des effets comme sur celui-ci ou sur Bluewhite :
- Sans édition du HTML : Je dois user de gymnastique, même pour un style semi-extensible avec 2 images pour le haut, 2 pour le milieu et 2 pour le bas
- Avec édition du HTML : Possibilité de pouvoir placer 8 images et de modérer leur grosseur.

Là je viens de mettre à jour le skin en ligne.
Identifiants du compte-test, si je me souviens bien : test + test00

EDIT : encore updaté
Ce message a été édité par Ishimaru Chiaki le 26/05/2009 à 10h31.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Martin #8 26/05/2009 - 10h41

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Pour la 1.0 beta, je suis désolé de ne pas pouvoir donner de date, mais ca se rapproche tout doucement, j'ai pu avancer sur certains points récemment.

Au niveau de la skin, c'est très zouli!
Mes remarques:
- Je trouve le orange très flash, j'aurais tendance à mettre quelque chose de plus pastel
- Les icones devant les groupes de sujets sont fort grandes
- Les titres des groupes de sujet (quand ils sont en listes) et des sujets (en liste aussi) me paraissent un tout petit peu trop grands
- Profil utilisateur et IE7, il y a un cadre autour des arrondis
- Les gris des tableaux sont peut-être un peu foncés

Sinon, du très bon boulot!  ;)

Comme le proposait 120forever, je suis pour l'idée d'avoir une largeur intelligente. Seulement, tous les navigateurs ne connaissent pas le max-width... Solution?

120forever a dit:

Sinon, vus que c'est censé être le style de la version 1.0, autant en profité pour éditer le html de manière a ce que le design soit entièrement extensible, non ?

Il s'agit d'un style qui sera prévu pour la version 1.0, mais il n'y a pas encore eu de décision quant au style officiel qui sera retenu. Des propositions sont vivement attendues à ce sujet dans le topic ad-hoc :)
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
Ishimaru Chiaki #9 26/05/2009 - 11h23

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Martin @ 26/05/2009 - 04h41 a dit:

- Je trouve le orange très flash, j'aurais tendance à mettre quelque chose de plus pastel



Si je le fais plus clair, ça devient pas assez lisible, si je le fais plus foncé, ça devient flash :/

- Les icones devant les groupes de sujets sont fort grandes



Je vais essayer de voir pour les rapetisser un poil, mais si je rapetisse trop, ça me met à refaire tous mes icones internes, en particulier l'étoile et la petite "pin".
C'est un tic qui vient de mon passé d'ancien utilisateur de forumactif (où tout est hyper accessible, même à ceux qui ont peu de connaissances informatiques), et comme on voit beaucoup de débutants exagérer sur les tailles (où les folders pouvaient péter les 100*100), je conseillais donc comme maximum une taille de 60*60 pour les folders des forums, et 50*50 pour les folders des sujets, question de trouver un juste milieu.  Donc, à côté des placards de 100*100 et plus sur lesquels je pouvais tomber, même les folders de topics de 40*40 ne me paraissent pas énormes.
Tu peux d'ailleurs voir certaines de mes réalisations ici : http://fr.hitskin.com/utilisateurs/ishimaru-design-37271.htm (la plupart ont été adaptés pour phpbb2)
Et d'autres, moins en détails, là : http://ishimaru-portfolio.servhome.org

- Les titres des groupes de sujet (quand ils sont en listes) et des sujets (en liste aussi) me paraissent un tout petit peu trop grands



Euh... tu parles bien des grands titres en orange ?  Car je ne les trouve pas trop grands, je préfère quand même que ce soit un petit peu plus grand que la description.  Peut-être est-ce causé par le changement de style de police ?

- Profil utilisateur et IE7, il y a un cadre autour des arrondis



Problème récurrent au bloc .container...  Le fait que les <h2> soient directement imbriqués dans .container, et qu'il n'y ait pas de bloc qui vient après <h2> et qui englobe le reste du contenu, tout en étant imbriqué dans .container, ça m'oblige à utiliser des margin négatifs, qui sont durs à faire gober à IE...

Est-ce prévu dans la prochaine version de faire ceci :
<div class="container">
   <h2>titre</h2>
   <div class="contenu">
   <!-- le contenu -->
   </div>
</div>

au lieu de cela :
<div class="container">
  <h2>titre</h2>
  <!-- le contenu -->
</div>

Car ça faciliterait grandement la mise en place de barres aux coins arrondis, du moins pour les designs fixes et ça m'éviterait ainsi de faire de telles gymnastiques sans toucher aux templates.  Dans Bluewhite, j'avais dû utiliser le positionnement relatif pour arriver à faire gober ça à IE, mais ça cause un léger problème d'esthétique au niveau de la petite bordure en bas de la barre <h2>

- Les gris des tableaux sont peut-être un peu foncés



*a l'impression d'entendre Flamme de Gimp-Attitude parler XD*
Je me suis pourtant efforcée de ne pas prendre trop foncé.  Si je poste mon style sur GA, watch out si Flamme va pas me dire la même affaire XD

[quote]Comme le proposait 120forever, je suis pour l'idée d'avoir une largeur intelligente. Seulement, tous les navigateurs ne connaissent pas le max-width... Solution?

Moi, ce que je dirais, c'est d'utiliser un conteneur externe pour la grande largeur, et le conteneur interne qui aura une largeur variable.
<div id="externe">
 <div id="interne">
 </div>
</div>

#externe {
   width: 1200px;
}
#interne {
   width: 90%
}

À tester.

"Martin" a dit:

120forever a dit:

Sinon, vus que c'est censé être le style de la version 1.0, autant en profité pour éditer le html de manière a ce que le design soit entièrement extensible, non ?

Il s'agit d'un style qui sera prévu pour la version 1.0, mais il n'y a pas encore eu de décision quant au style officiel qui sera retenu. Des propositions sont vivement attendues à ce sujet dans le topic ad-hoc :)



Je me suis remise dans la création de skins CB aussi dans l'optique de proposer au staff de mon forum des idées de design pour la prochaine version de mon site, étant donné que je n'ai pas encore trouvé d'idée définitive malgré deux tentatives.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
120forever #10 26/05/2009 - 13h09

Groupe : Habitué
Messages : 127
Enregistré le : 19/05/2007

Hors ligne

C'est la panique là http://ishimaru-design.servhome.org/tests/cb/forum-t7-p1,liste-modifications-timezone-sans-today-yesterday-fix.html

Ce orange est bien trop flash, c'est certain.
Ce message a été édité par 120forever le 26/05/2009 à 13h10.
Ishimaru Chiaki #11 26/05/2009 - 17h59

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

120forever @ 26/05/2009 - 07h09 a dit:

C'est la panique là http://ishimaru-design.servhome.org/tests/cb/forum-t7-p1,liste-modifications-timezone-sans-today-yesterday-fix.html



Même en pleine largeur, ça le fait, et même ici ça le fait.

Ce orange est bien trop flash, c'est certain.



Je viens de baisser un peu la saturation dans les liens  Je ne l'ai pas encore fait pour les icones.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
120forever #12 26/05/2009 - 20h48

Groupe : Habitué
Messages : 127
Enregistré le : 19/05/2007

Hors ligne

Ishimaru Chiaki @ 26/05/2009 - 17h59 a dit:

120forever @ 26/05/2009 - 07h09 a dit:

C'est la panique là http://ishimaru-design.servhome.org/tests/cb/forum-t7-p1,liste-modifications-timezone-sans-today-yesterday-fix.html



Même en pleine largeur, ça le fait, et même ici ça le fait.



A cause de l'overflow qui est en "auto" ?
Peut être avec un "overflow: scroll"

ou a cause du "display: block" peut être.
Et en metant un "width : 90%" ?
Ishimaru Chiaki #13 27/05/2009 - 04h25

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

120forever @ 26/05/2009 - 14h48 a dit:

Ishimaru Chiaki @ 26/05/2009 - 17h59 a dit:

120forever @ 26/05/2009 - 07h09 a dit:

C'est la panique là http://ishimaru-design.servhome.org/tests/cb/forum-t7-p1,liste-modifications-timezone-sans-today-yesterday-fix.html



Même en pleine largeur, ça le fait, et même ici ça le fait.



A cause de l'overflow qui est en "auto" ?
Peut être avec un "overflow: scroll"

ou a cause du "display: block" peut être.
Et en metant un "width : 90%" ?



Il n'y a pas d'overflow tout court, et si je me souviens bien, quand ce n'est pas défini, c'est à scroll.

Jusqu'à maintenant, j'ai fait plusieurs essais (overflow:auto, width:90%, white-space:normal, et ce à différents éléments), je n'ai pas encore trouvé de solution autre qu'une largeur fixe pour le bloc de codes, et c'est pareil sur le site du zéro.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Martin #14 27/05/2009 - 09h24

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Le orange, même des liens, reste agressif je trouve.

Je prends note des remarques au niveau des templates, merci!

Sinon, pour les titres que je trouve grands, je trouve en fait que le fait qu'ils soient déja en gras et en orange justifie de garder une même taille de police (même si ce n'est pas le cas sur Zephyr!).
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
Ishimaru Chiaki #15 27/05/2009 - 10h14

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Je viens encore de le mettre à jour.

Cette fois, j'ai fait une copie de la dernière version que vous avez vue, pour pouvoir la travailler sur un forum non moddé et en modifiant fortement le template pour permettre l'extensibilité totale et appliquer les fix nécessaires, vu que vous semblez insister sur l'extensibilité du skin alors que je ne peux pas avec un Official non modifié.

http://ishimaru-design.servhome.org/tests/cb (test + test00)
Ce message a été édité par Ishimaru Chiaki le 27/05/2009 à 10h15.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Pages (2): [1] - 2

 >  Réponse rapide

Composez votre message

Connectix Boards > Zone développement > Skins & Templates > [En cours] Id_liteblue

 >  Informations du forum

1 personne(s) présente(s) durant une période de 15 minutes (0 membre(s) et 1 invité(s)).