Fork me on GitHub






sizer92
Des CSS dans mes templates !
#1
Aspirant
Inscrit: 19/02/2006 16:44
De Paris
Messages: 29
Hello toute la communauté Xoops,

Il n'y a pas longtemps, je me suis remis à utiliser Xoops, je ne suis pas développeur (merci Xoops), je m'intéresse essentiellement au graphisme et donc au CSS.
Et dans ce domaine je dois bien avouer que Xoops n'est pas vraiment un modèle.
A savoir, quasiment tout les modules sont crées à partir de tableaux html !
Heureusement j'ai découvert la surcharge de templates (hourra)
J'ai donc surchargé mes templates, masi cette fois basta les <td> et les <tr> , je dis : "vive les <div>" !

Je me demandais si il ne serait pas possible de créer une partie sur le site ou l'on pourrais échanger des templates surchargés (modifiés à base de css) ça serait très pratique il me semble.

et vous que pensez-vous du css dans Xoops ?

Posté le : 06/01/2009 12:06

Portfolio : Mistersize.com
Blog : FreshPixel.fr
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Des CSS dans mes templates !
#2
Guest_
b'jour,

C'est une excellente idée, comme tout ce qui consiste à partager ce qu'on sait faire !

Où verrais-tu une telle rubrique ? Dans la section Thèmes ? Modules ?


Citation :
et vous que pensez-vous du css dans Xoops ?

... je ne comprends pas trop ta question. Ce qui est sûr : c'est perfectible, il y a encore pas mal de css dans le code php du core, les propriétés communes sont relativement limitées.

Citation :

/* ==== commun en principe à tous les templates de module === */
.outer {}
.head {}
.even {}
.odd {}
.foot {}

/* ==== se retrouve dans de nombreux modules (dont News) ==== */
.item {}
.itemHead {}
.itemInfo {}
.itemTitle {}
.itemPoster {}
.itemPostDate {}
.itemStats {}
.itemBody {}
.itemText {}
.itemFoot {}
.itemAdminLink {}
.itemPermaLink {}

/* ==== utilisés pour la mise en forme des commentaires ==== */
.comTitle {}
.comText {}
.comUserStat {}
.comUserStatCaption {}
.comUserStatus {}
.comUserRank {}
.comUserRankText {}
.comUserRankImg {}
.comUserName {}
.comUserImg {}
.comDate {}
.comDateCaption {}



D'autres class "universelles" ont été ajoutées dans les gabarits morphogenesis par Kris. Elles sont très utiles à l'usage (voir feuille content-data.css) :

Citation :

/*======== others float class ======== */
.floatleft {
float: left;
margin-top: 1em;
margin-right : 1em;
padding-left: 4px;
border: 0;
}
.floatright {
float: right;
margin: 0 0 10px 10px;
padding: 2px;
border: 0;
}
/*======== others alignment class ======== */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.middle { vertical-align: middle;}
.top { vertical-align: top;}
.bottom { vertical-align: bottom;}
/*======== others width class ======== */
.width100 { width: 100%; }
.width95 {width:95%}
.width75 { width: 75%; }
.width50 { width: 50%; }
.width33 { width: 33%; }
.width25 { width: 25%; }
.width20 { width: 20%; }
.padding30 {padding: 30px;}
.padding20 {padding: 20px;}
.padding10 {padding: 10px;}
.padding5 {padding: 5px;}
/* ========= others font class ========== */
.small {font-size: .92em;}
.normal { font-size: 1em;}
.big { font-size: 1.17em;}
.maxi { font-size: 1.5em;}
.bold { font-weight: bold;}
.italic {font-style: italic;}
/*======== others display class ======== */
.clear { clear: both; }
.block { display: block; }
.hide { display: none; }


Si cela peut t'aider à faire le ménage

Posté le : 06/01/2009 12:48
Partager Twitter Partagez cette article sur GG+
Rapport Haut
sizer92
Re: Des CSS dans mes templates !
#3
Aspirant
Inscrit: 19/02/2006 16:44
De Paris
Messages: 29
Citation :
Où verrais-tu une telle rubrique ? Dans la section Thèmes ? Modules ?

Je pense que dans la section "Thème" serait le mieux approprié, vu que les surcharges de templates sont mises dans les dossiers de thèmes de xoops.

Citation :
et vous que pensez-vous du css dans Xoops ?

C'était plus une façon d'engager le débat :p

Citation :
D'autres class "universelles" ont été ajoutées dans les gabarits morphogenesis par Kris

Effectivement, je ne me suis pas vraiment penché sur les thèmes de Kris, il faut que je regarde ça de plus près.

De mon point de vue Le principal est de virer les tableaux des templates.
remplacer les
Citation :
<td class="outer">...</td>

par des
Citation :
<div class="outer">...</div>


Concernant les noms des class ou des id, il faudrait qu'on se définisse une règle de nommage claire.

Pour ma part j'ai commencé comme suit :

voici un exemple pour le module de liens :
Citation :

<div id="content">
<div class="myLinkCatList">
<div class="linkCatItemImage">
</div>
<div class="linkCatItem">
</div>
</div>
</div>


Si vous voulez voir une version en ligne :
Voir la page en ligne

Comme vous pouvez le voir, grâce à la surcharge et à l'utilisation des div j'ai pu me lâcher un peu plus sur l'affichage, notamment celui des catégories. Les noms des id et des class peuvent être améliorés.

Intéressant aussi : créer un id pour chaque module, ainsi on pourrais imaginer pouvoir changer radicalement l'apparence d'un module par rapport au site :)

Posté le : 06/01/2009 14:00

Portfolio : Mistersize.com
Blog : FreshPixel.fr
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Des CSS dans mes templates !
#4
Guest_
Dans la section Thèmes... le plus simple dans ce cas pour les templates que tu souhaites partager, ce serait de les livrer avec un thème, en surcharge.

En effet, des templates peuvent convenir à un thème et se détraquer complètement pour un autre.

A moins que tu livres également avec les templates de module, une feuille css "béton" également surchargée (au cas où tu ne l'aies pas encore vu, tu peux aussi surcharger des feuilles css... dernière page du tutoriel sur la surcharge).

----

Tes conventions de nommage sont claires (myLinkCatList = nomdumodule + objet à mettre en forme). C'est donc facile ensuite à manipuler

----

Très beau design

----

Regardes attentivement le gabarit de thèmes morphogenesis.

Le fichier theme.html commence comme ceci :
Citation :
<body id="<{$xoops_dirname}>" ...

... c'est fou ce que cette variable smarty, placée à cet endroit, t'offre comme possibilités !!

Posté le : 06/01/2009 14:15
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Des CSS dans mes templates !
#5
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Bonjour,

une base sur le nommage est à prendre dans le thème zetareticuli
N'oublions pas que morphogenesis découle en grande partie de ce thème

@++

Posté le : 06/01/2009 20:18

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
sizer92
Re: Des CSS dans mes templates !
#6
Aspirant
Inscrit: 19/02/2006 16:44
De Paris
Messages: 29
ok, je vois que morphogenesis apporte beaucoup de bonnes choses que je ne connaissais pas, c'est un peu plus compliqué, je vais devoir me plonger dedans :)

Posté le : 06/01/2009 22:19

Portfolio : Mistersize.com
Blog : FreshPixel.fr
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Des CSS dans mes templates !
#7
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
ceci pour t'aider un peu --> http://labs.xoofoo.org/modules/wiwimod/ mais par à jour (il me manque un peu de temps )

@++

Posté le : 06/01/2009 22:28

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

106 Personne(s) en ligne (80 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 106 | Plus ...