> [presque fini] Série Lite, après une grosse pause
|
|
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
Pour ceux qui avaient eu connaissance du développement du thème Liteblue que j'avais commencé, j'ai m'y suis finalement remise et là, je viens de terminer les icones des 7 variantes : bleues, verte, violet, jaune, gris, orange, rose.
Ils utilisent tous un template personnalisé qui sera mis en ligne dans un même package que les skins.
Pour visionner les skins : login : test - mdp : test00
Je suis même en train de penser à les renommer en pastelxxx au lieu de litexxx vu les tons pastels que j'ai utilisés.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
kristoch |
|
Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009
Hors ligne Site Web
|
c'est magnifique et de plus tu as arrondis les angles...   |
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
Il a fallu que je fasse pas mal de modifications dans les templates pour obtenir ces arrondis tout en restant extensible et compatible avec l'ensemble des navigateurs courants. Je n'ai donc pas utilisé border-radius, ceci n'est pas encore reconnu par IE.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
kristoch |
|
Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009
Hors ligne Site Web
|
oui je viens juste de voir ça et qu'un site génère les arrondis...
ai modifié ma feuille css d'admin afin de faire mes essais au réel en live sans gêner le forum!
ai crée mon cadre, le tour, le centrage et ai regardé les arrondis, l'image de fond et les boutons.
je survole et me disperse car en fait c'est très intéressant
ai pris connaissance avant ça de ton début d'explication du CSS de CB!
sous admin dans le forum de test.
en fait je rêve depuis longtemps d'un site moins large et aux coins arrondis
afin également par la suite d'y mettre du menu à gauche pourquoi pas fixe.
je passe par la modification afin de ne pas recouvrir le message de Martin derrière moi!
y'a jusqu'à 8 méthodes! dont les angles... très limité.
et le coup du javascript donc avec HTML en sus et si désactivé: !
selon moi le meilleur est avec les images d'angles: x4
ça permet d'élergir et allonger tant qu'on veut sans limite.
après soit on complète avec des lignes pour les bords
sur lesquelle on applique un style, une densité...
soit avec des des images de bord: x4 aussi
(haut, bas, gauche et droite) en mode repeat
apparemment sur CB on fonctionne déjà ainsi
par exemple pour le header et la barre, les titres
l'avantage est que là on peut mettre des lignes mais
aussi des dégradés, ombrages, effets relief, de l'épais...
et là chacun fout ses propres images ou les modifie à volonté.
sinon en mode le plus simple avec images des coins:
<div class="upperleft">
<div class="upperright">
<div class="lowerleft">
<div class="lowerright">
Votre texte ici.
</div>
</div>
</div>
</div>
Pour éviter d'utiliser trop de balises (ajout de conteneurs), la balise de plus haut niveau est utilisée pour définir la taille de la boite et celle de plus bas niveau pour définir les marges intérieures.
(les images utilisées sont de format 10x10) et voici la feuille de style:
html{
background-color : #DDDDDD;
}
body{
background-color : #DDDDDD;
font-family : Trebuchet MS, Verdana, Arial, sans-serif;
font-size : 10pt;
}
h1{
font-size : 14pt;
margin : 0%;
}
acronym{
cursor : help;
}
pre{
margin : 0%;
}
.upperleft{
width : 50%;
margin-left : auto;
margin-right : auto;
background-color : #C0C0C0;
background-image : url('upperleft.png');
background-repeat : no-repeat;
background-position : top left;
}
.upperright{
background-image : url('upperright.png');
background-repeat : no-repeat;
background-position : top right;
}
.lowerleft{
background-image : url('lowerleft.png');
background-repeat : no-repeat;
background-position : bottom left;
}
.lowerright{
background-image : url('lowerright.png');
background-repeat : no-repeat;
background-position : bottom right;
padding : 3% 3% 3% 3%;
}
l'intérêt ici: le div sert de conteneur! cool! 
extrait du code source du site de test d'Ishi:
</head>
<body>
<div id="template">
<div id="main">
<div id="head">
<div id="head-left">
<div id="head-right">
<h1 id="header">
<a href="forum.html" id="headerlink"><span>Forum de test</span></a>
</h1>
</div>
</div>
</div>
ETC ETC ETC
<div class="bottom"><div class="bottom-left"><div class="bottom-right"></div></div></div>
</div>
</div>
<div id="footer">
<div id="footer-left">
<div id="footer-right">
<p id="copyright">
Powered by <a href="http://www.connectix-boards.org">Connectix Boards</a> 0.8.4 © 2005-2009 (5 queries, 0.249 sec)
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ce message a été édité par kristoch le 16/10/2009 à 16h23. |
|
Martin |
|
Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005
Hors ligne Site Web
|
Ishi, tu pourrais me suggérer les modifications de template que tu opères pour ce genre de résultat, histoire de voir si je ne pourrais pas les intégrer au template de base?
Merci d'avance!
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
|
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
Pour les curieux qui veulent examiner le skin et le template, voici l'archive de la bêta du skin, ainsi que l'archive du template pour aller avec :
http://ishimaru-design.servhome.org/dl/cb-skins/id_liteblue-beta.zip
http://ishimaru-design.servhome.org/dl/cb-skins/fullextend.zip
J'ai aussi mis à jour les skins et le template en ligne sur le forum de test : login: test - mdp: test00
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
connectix_lover |
|
Groupe : Nouveau
Messages : 42
Enregistré le : 28/09/2009
Hors ligne Site Web
|
vraiment très magnifique mr ishimaru
|
|
kristoch |
|
Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009
Hors ligne Site Web
|
connectix_lover @ 17/10/2009 - 17h34 a dit: vraiment très magnifique mr ishimaru
non mademoiselle ou madame!
apparemment ça apporte un plus dirait-on
|
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
kristoch @ 17/10/2009 - 11h46 a dit: connectix_lover @ 17/10/2009 - 17h34 a dit: vraiment très magnifique mr ishimaru
non mademoiselle ou madame!
apparemment ça apporte un plus dirait-on
+1. C'est pas pour rien que mon Tux est mauve 
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
kristoch |
|
Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009
Hors ligne Site Web
|
Ishimaru Chiaki @ 17/10/2009 - 10h09 a dit: (...)J'ai aussi mis à jour les skins et le template en ligne sur le forum de test : login: test - mdp: test00
j'ai la berlue ou quoi?
auparavant les barres du dessus des forums et stats étaient arrondies
et plus maintenant?! je préférais avant, franchement. ben zut alors!
sinon ne pas faire attention: c'est moi qui devait être... rond! mdr
|
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
D'oh, problème de chemin >.<
EDIT : C'est corrigé, il y avait deux liens où j'avais oublié d'ajouter "layout/" dans le chemin.
Je te donne directement le lien du CSS : http://ishimaru-design.servhome.org/tests/cb/skins/id_liteblue/style.css
(Clic-droit > Enregistrer la cible du lien sous)
EDIT2 : Encore mis à jour, je viens de terminer la partie Firefox des sept skins, et j'ai ajouté les deux images manquants pour chacun : msg_unread.gif et msg_read.gif
Pour le thème bleu, la feuille du lien est donc la dernière version.
Quant aux images, voici les liens :
http://ishimaru-design.servhome.org/tests/cb/skins/id_liteblue/msg_read.gif
http://ishimaru-design.servhome.org/tests/cb/skins/id_liteblue/msg_unread.gif
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
kristoch |
|
Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009
Hors ligne Site Web
|
oui j'suis trop nul avec ma remarque: dans les images on retrouve bien
ces arrondis donc suffit de corriger les 2 liens et puis c'est tout quoi...
mais ça prouve que je m'intéresse au moins!
Martin @ 16/10/2009 - 11h06 a dit: Ishi, tu pourrais me suggérer les modifications de template que tu opères pour ce genre de résultat, histoire de voir si je ne pourrais pas les intégrer au template de base?
Merci d'avance!
oui d'autant plus que ça rapproche et que c'est bientôt hein! 
lalalalalalalalèèèèreuh
oh c'est joli aussi vu à l'envers 
hum! |
|
Ishimaru Chiaki |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
Pour Martin, je pense que le plus pressant est de pouvoir être capable d'utiliser les commentaires conditionnels sans avoir à toucher aux templates, comme c'est le cas pour PunBB 1.3, car en ce moment, pendant que j'arrive à régler les problèmes de décalage des morceaux se trouvant dans le conteneur des tableaux sous IE6 et IE7, je me bats encore pour arriver à corriger ça sous IE8 ! Et avec le système actuel, on ne peut recourir qu'aux hacks qu'on utilise à même le code CSS.
Ce qui coince en ce moment, c'est le caption qui dépasse encore et toujours de 1px à gauche sous IE8, et ça fait je ne sais pas combien de fois que j'enregistre et envoie la feuille mise à jour sur le FTP pour ensuite faire prendre la capture par IE Net Renderer pour vérifier.
Donc, en ce moment c'est IE8 qui me met en échec.
EDIT : ENFIN !!!
Il fallait que je fasse ça :
table caption {
padding:0px;
text-align:left;
margin-left: -1px;
border: none;
border-bottom:1px solid #cccccc;
background: #cbe4ff url(layout/bar-m.png) repeat-x;
}
table caption {
margin-left: 0px\9
}
au lieu de ça :
table caption {
padding:0px;
text-align:left;
margin-left: -1px;
margin-left: 0px\9
border: none;
border-bottom:1px solid #cccccc;
background: #cbe4ff url(layout/bar-m.png) repeat-x;
}
pour qu'IE8 finisse par gober ce hack pour toutes les versions d'IE !
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 |
|
Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008
Hors ligne Site Web
|
Je viens juste signaler qu'en plus d'avoir résolu le bug d'affichage sous IE8 qui m'a valu bien des prises de tête, je viens de mettre à jour tous les ficheirs CSS pour tous les harmoniser, en m'aidant d'un logiciel de comparaison de fichiers source. Maintenant, mise à part d'autres bugs d'affichage que je pourrais ne pas avoir vus, il reste à régler pour la taille des folders, puisque ce n'est qu'en comparant les fichiers que je m'en suis aperçue que ceux de liteblue sont à la bonne taille (36px), mais pas ceux des autres variantes (40px)
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
|
|
Martin |
|
Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005
Hors ligne Site Web
|
Ishimaru Chiaki @ 19/10/2009 - 06h37 a dit: Pour Martin, je pense que le plus pressant est de pouvoir être capable d'utiliser les commentaires conditionnels sans avoir à toucher aux templates, comme c'est le cas pour PunBB 1.3, car en ce moment, pendant que j'arrive à régler les problèmes de décalage des morceaux se trouvant dans le conteneur des tableaux sous IE6 et IE7, je me bats encore pour arriver à corriger ça sous IE8 ! Et avec le système actuel, on ne peut recourir qu'aux hacks qu'on utilise à même le code CSS.
Tu peux développer? Merci d'avance!
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
|
