Skins GuppY / ZitePlus

Habillage de sites web et de forums : réalisation graphique et technique.

Modérateur : Ze Techos

Avatar de l’utilisateur
InAme
Fou du clic droit
Messages : 70
Inscription : mar. févr. 16, 2010 5:50 pm
Localisation : France

Message par InAme » mer. mars 03, 2010 11:27 pm

haha! Là je serai encore plus intéressé ;)

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » mar. juin 22, 2010 9:42 am

Voici un début de site sur un projet "science-fantasy" (encore que, c'est plus compliqué encore...)

http://www.monde-des-forts.org/GN/Tramonde/

Ce CMS s'appelle Ziteplus et présente peu de fonctionnalités mais une excessive simplicité. :)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Skin GuppY

Message par Ishimaru Chiaki » mar. juin 22, 2010 7:57 pm

Très simple, mais très efficace. On sent l'univers fantasy par les images, sans avoir de surcharge là où se trouve l'essentiel du contenu.

Mais si j'avais plus de temps en ce moment (j'ai un rdv dans 15 minutes), j'aurais fait des tests avec Firebug pour te proposer une correction pour le menu qui ne se rend pas jusqu'au footer, car c'est le seul point qui cloche dans le skin.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
plovemax
Macgimpeur de choc
Messages : 1288
Inscription : jeu. oct. 12, 2006 9:43 pm
Localisation : quelque part pas loin du centre

Re: Skin GuppY

Message par plovemax » mar. juin 22, 2010 9:53 pm

Y a un problème à l'onglet calendrier. Sinon j'aime bien couleur image toussa toussa.

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Skin GuppY

Message par Ishimaru Chiaki » mer. juin 23, 2010 12:53 am

Me voilà enfin de retour.

Je viens d'examiner, et la seule possibilité "compatible" que je vois, c'est d'utiliser une image qui se répète, de la même couleur et de la même largeur que le bas du menu, et de mettre cette image au <div id="mid"> qui contient à la fois le main et le side. Perso, j'utilise cette méthode sur mon site puisque mon menu latéral est à largeur fixe.

Donc ça fait quelquechose du genre :

Code : Tout sélectionner

#mid {
    background-image:url('monimage.gif');
    background-repeat:repeat-y;
    background-position: top left;
}
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » jeu. juin 24, 2010 12:12 am

Merci pour les appréciations !

Pour le menu, c'est pas super gênant en soi, je mettrai au pire un dégradé pour que la transition soit harmonieuse. Je dors en moyenne 4 h par nuit en ce moment, du coup, je suis un peu fainéante...

Sinon, quel problème avec le calendrier ? Sur cette page? elle marche nickel chez moi. :wbperplexe:
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
plovemax
Macgimpeur de choc
Messages : 1288
Inscription : jeu. oct. 12, 2006 9:43 pm
Localisation : quelque part pas loin du centre

Re: Skin GuppY

Message par plovemax » jeu. juin 24, 2010 12:26 am

Oui cette page. Chez moi Safari 4.x j'ai le texte sur la partie gauche (je n'ai pas le terme technique) et non dans la zone prévue je pense à priori pour lui. C'est la seule page où çà me le fait. Une image étant plus parlante :
Image

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » jeu. juin 24, 2010 2:32 pm

Elle marche chez moi sous Firefox et IE... Elle n'a rien de techniquement différent des autres vu que c'est une bête page créée sous le CMS comme toutes les autres pages. Peut-être est-ce dû à l'usage des puces, ou du tableau.

Safari est coutumier d'interpréter les choses un peu bizarrement... ?
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
plovemax
Macgimpeur de choc
Messages : 1288
Inscription : jeu. oct. 12, 2006 9:43 pm
Localisation : quelque part pas loin du centre

Re: Skin GuppY

Message par plovemax » jeu. juin 24, 2010 3:05 pm

non pas depuis la version 4.
j'ai testé avec google chrome même problème par contre avec firefox rien. Donc le webkit (moteur safari et google chrome et d'autres) interprète un truc de travers

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Skin GuppY

Message par Ishimaru Chiaki » jeu. juin 24, 2010 8:18 pm

Je viens d'aller voir le code CSS et je pense que le problème soulevé par plovemax est une question de width et de margin.

Dans ton #main, il y a un width défini. Or, je ne conseille pas cette technique justement à cause des risques de bugs d'affichage.

Lorsqu'on utilise un menu latéral (flottant) et un bloc principal (non-flottant), seul le bloc flottant a besoin d'un width, afin de limiter sa largeur, surtout que ce bloc est sorti du flux normal de la page. Quant au bloc non-flottant, il faut savoir qu'un <div> prend par défaut toute la largeur disponible et donc, un width n'est pas nécessaire et peut même être source de bugs d'affichage. Dans ce cas, je conseille plutôt d'utiliser un margin-left (si le menu est à gauche) ou un margin-right (si le menu est à droite) avec une valeur équivalente ou supérieure à la largeur du menu flottant, afin de créer une marge dans le côté.

Pour l'illustrer en code :

Code : Tout sélectionner

#side {
    width:180px; /*Nécessaire dans le cas d'un flottant*/
}

#main {
    margin-left: 190px; /*Ceci remplacera le width*/
}
J'utilise tout le temps cette technique sur mes sites maison et les webdiz que je crée.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » jeu. juin 24, 2010 8:36 pm

Sauf que c'est un CMS tout prêt et que ce n'est pas moi qui emploie la technique, et que je n'ai pas franchement le temps ni l'envie d'aller fouiller dedans ;) (surtout quand je dors 4h par nuit pour mener à bien mon boulot et tous les projets sur le gril :P)

Si quelqu'un me trouve pourquoi cette page bugge et pas les autres (tableau, puce, autre...), j'ôterai l'élément offensant puis voilà tout ! :l0l:
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

PascalL
Maître pisteur
Messages : 1644
Inscription : ven. mai 07, 2004 7:53 am
Localisation : Suisse romande
Contact :

Re: Skin GuppY

Message par PascalL » ven. juin 25, 2010 9:12 am

Il y a un commentaire mal fermé dans le code (ligne 14):

Code : Tout sélectionner

<!-- <p align="justify">Derni&egrave;re mise &agrave; jour le 10/06/2010 <p>&nbsp;</p>  --><ul class="zul">
rajouter les tirets:

Code : Tout sélectionner

<!-- <p align="justify">Derni&egrave;re mise &agrave; jour le 10/06/2010 <p>&nbsp;</p>  --><ul class="zul"-->
Animateur GA
Je traîne avec les mauvaises gens, mais ce sont les seuls amis encore debout après la fermeture du dernier bal.

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » ven. juin 25, 2010 1:51 pm

Merci, mais... aïe, c'est toujours dans la partie "en dur" du CMS... :x Si on prend un CMS? c'est pour ne pas avoir à le recoder ! Ce soucis est sur toutes les pages et elles ne buggent pas... Il faut que je trouve ce qui ne va pas sur cette page spécifique... :x :x :x
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
InAme
Fou du clic droit
Messages : 70
Inscription : mar. févr. 16, 2010 5:50 pm
Localisation : France

Re: Skin GuppY

Message par InAme » mer. juin 30, 2010 9:52 pm

J'aime beaucoup les images du site, le rendu est très réussi. Les couleurs se marient bien, c'est agréable à l'oeil.

Par contre ce que j'aime moins:
Le menu qui n'est pas continu, ça choque un peu je trouve.
Ensuite le fond vert clair à droite du contenu. Pourquoi ne pas mettre une image dans le style de la bordure gauche? Ca fait un contraste étrange. J'opterai pour une image avec un dégradé avec ce vert clair pour ensuite afficher un fond vert pour les écrans vraiment trop grand.
Et dernier point négatif, le tableau du calendrier. Ca fait un peu vieux ce système de bordures je trouve. A la limite des bordures simples rendraient mieux je pense.

Ah encore une chose. Le lien déconnexion apparait alors que je ne suis pas connecté... A part ça je n'ai pas noté de bug sur le site.

Beau boulot, continue comme ça.

J'aimerai en connaitre un peu plus sur l'histoire. Le premier Cercle, c'est toi qui l'écrit?

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Skin GuppY

Message par Ishimaru Chiaki » sam. juil. 03, 2010 4:24 am

Flamme a écrit :Merci, mais... aïe, c'est toujours dans la partie "en dur" du CMS... :x Si on prend un CMS? c'est pour ne pas avoir à le recoder ! Ce soucis est sur toutes les pages et elles ne buggent pas... Il faut que je trouve ce qui ne va pas sur cette page spécifique... :x :x :x
Dans ce cas, si c'est en dure, n'hésite pas à les signaler sur le forum du développeur.

En ce moment, je n'ai pas le temps de tester de nouveaux CMS avec tout ce que j'ai à faire, mais si un moment donné je trouve le temps, je pourrais jeter un coup d'oeil.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skin GuppY

Message par Flamme » mer. déc. 01, 2010 4:50 pm

Quelques nouveauté en ZitePlus, basées sur le template "Lys" :

Déjà un petit site "littéraire" (pas encore trop rempli) :
http://www.lignes-en-jeu.org/lafeuillet ... /archives/

Un autre site destiné à mettre des infos sur un huis-clos :
http://monde-des-forts.org/GN/MagotPepe/
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skins GuppY / ZitePlus

Message par Flamme » sam. déc. 11, 2010 12:12 pm

Dans le fond, c'est assez ingrat de faire de templates pour des CMS peu connus ! :l0l:
D'abord parce que contrairement à ce que peut impliquer, par exemple, la création ou la modif d'un template de forum, je pense que les gens ne savant pas vraiment quelles sont les contraintes de base. Ensuite, parce que comme ils ne connaissent pas ces CMS, ils ne se sentent tout simplement pas concernés ! :l0l:

Juste two cents... ;)

Cependant, je me suis mise récemment à installer des "zite" pour mes amis qui n'avaient pas d'hébergement, c'est facile, rapide... Et très aisé d'approche, et dans la foulée, bien sûr, je les habille. :) Donc je ne désespèrerai pas à publier mes travaux sur ce fil !
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Skins GuppY / ZitePlus

Message par Ishimaru Chiaki » dim. déc. 12, 2010 10:39 pm

Flamme a écrit :Dans le fond, c'est assez ingrat de faire de templates pour des CMS peu connus ! :l0l:
D'abord parce que contrairement à ce que peut impliquer, par exemple, la création ou la modif d'un template de forum, je pense que les gens ne savant pas vraiment quelles sont les contraintes de base. Ensuite, parce que comme ils ne connaissent pas ces CMS, ils ne se sentent tout simplement pas concernés ! :l0l:
C'est un peu comme dans mon cas avec Connectix Boards qui a un bassin d'utilisateurs beaucoup plus petit que phpBB, et très majoritairement francophone. On voit bien quelques forums CB en anglais, mais en général, le fondateur desdits forums parle français.

Je connais suffisamment le CMS pour pouvoir faire une feuille CSS à partir de zéro, mais il y a très peu de graphistes qui savent en faire autant. Et d'ailleurs, je l'ai fait, pour faire une série de skins "à la FluxBB" qui peut servir de base pour d'autres skins.

Vivement que la 1.0 soit finalisée.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skins GuppY / ZitePlus

Message par Flamme » lun. déc. 13, 2010 10:21 am

Moui, j'imagine.

Je n'en suis pas là pour Zite, mais je commence à pouvoir faire des modifs majeures dans les CSS.

N'empêche que c'est toujours frustrant de n'avoir pas un seul retour sur un boulot sur lequel on a passé des heures. Même pour dire que c'est moche. :P
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6636
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Skins GuppY / ZitePlus

Message par Flamme » mer. janv. 12, 2011 9:23 am

Je vais me lancer dans le design annuel des Amis de Miss Rachel, j'espère avoir des retours sur celui-ci ! :wboeillangue:
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Répondre