Fork me on GitHub

Page « 1 2 (3) 4 »

Xoopser un template xhtml/css en moins de 10mn

200510
Juillet
  Christian Documentations 37903

4. Mise en oeuvre

Nous allons commencer par créer un nouveau dossier dans le répertoire themes, appelons le xhtml.
Puis nous y enregistrons le fichier modele15.htm préalablement téléchargé sur Alsacréations. Renommons ce fichier en theme.html.
On termine cette étape en copiant les fichiers suivants du répertoire default :

  • style.css
  • styleNN.css
  • styleMAC.css
  • theme_blockcenter_c.html
  • theme_blockcenter_l.html
  • theme_blockcenter_r.html
  • theme_blockleft.html
  • theme_blockright.html


La suite de l'exercice va donc consister à aménager notre fichier theme.html pour le rendre compatible avec la norme Xoops.

4.1 Le fichier style.css

On va commencer par intégrer dans notre feuille de style (style.css) les classes et id qui sont dans notre fichier theme.html.
Ouvrons le fichier xthml/theme.html avec un éditeur de texte. Copier les lignes 8 à 93 pour les coller au tout début du fichier xhtml/style.css du même répertoire et sauvegarder ce fichier.

4.2 En-tête du fichier xhtml/theme.html

Dans votre fichier xhtml/theme.html supprimer toutes les lignes présentes avant la balise < body >
Ouvrez le fichier default/theme.html, copier les toutes les lignes jusqu'à la balise et coller les dans la partie supérieure de votre fichier xthml/theme.html.
Le début de votre fichier xhtml/theme.html doit donc ressembler à ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
<
meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<
meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<
meta name="robots" content="<{$xoops_meta_robots}>" />
<
meta name="keywords" content="<{$xoops_meta_keywords}>" />
<
meta name="description" content="<{$xoops_meta_description}>" />
<
meta name="rating" content="<{$xoops_meta_rating}>" />
<
meta name="author" content="<{$xoops_meta_author}>" />
<
meta name="copyright" content="<{$xoops_meta_copyright}>" />
<
meta name="generator" content="XOOPS" />
<
title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<
link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- 
RMVadded module header -->
<{
$xoops_module_header}>
<
script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>
</head>
<body>
<div id="conteneur">
      <div id="header">Header (modèle utilisant les positionnements flottants)<a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les modèles)</a>
      </div>....

4.3 Header

Toujours dans votre fichier xhtml/theme.html, retirons le texte dans la balise header pour y mettre les premiers éléments xoops. Pour avoir une couleur d'arrière-plan identique au thème default, nous allons éditer la feuille de style, rechercher la class header et remplacer la couleur #99CCCC par celle-ci : #2F5376;
On va positionner notre logo en trois étapes:

  • création d'un répertoire images dans notre dossier xhtml, puis on colle dedans le fichier logo.gif
  • dans le fichier xhtml/style.css on ajoute à la fin cet id :
    #logo {
        
    background-imageurl("images/logo.gif");
        
    background-repeatno-repeat;
        
    width150px;
        
    height80px;
        
    floatleft;
    }
  • dans notre fichier xhtml/theme.html il nous reste plus qu'à faire appel à cet id pour le positionner

...
<
div id="header">
  <
div id="logo">&nbsp;</div>
...


Si vous souhaitez utiliser le système de bannières de Xoops pour afficher des bannières aléatoires, nous avons juste deux éléments à compléter:

  • dans la feuille de style, on ajoute un nouvel id comme ceci

  • #banniere {
        
    floatright;
        
    width468px;
        
    height60px;
        
    padding-right 10px;
        
    padding-top 10px;
    }
  • puis on le positionne dans le fichier xhtml/theme.html à la suite du logo


<div id="header">
     <
div id="logo">&nbsp;</div>
     <
div id="banniere"><{$xoops_banner}></div>
</
div>

4.4 Menu horizontal

Pour implémenter un menu horizontal, on va utiliser la solution proposée avec des listes pour en faire des éléments de menu, mais en l'enrichissant avec la variable smarty <{$xoops_url}> qui représente l'url de votre site, ce qui va donner :
<ul id="menuhaut">
      <
li><a href="<{$xoops_url}>/index.php" target="_self"  title="Accueil">Accueil</a></li>
      <
li><a href="<{$xoops_url}>/modules/news/" target="_self" title="Articles">Articles</a></li>
      <
li><a href="<{$xoops_url}>/modules/mylinks/" target="_self" title="Liens">Liens</a></li>
      <
li><a href="<{$xoops_url}>/modules/contact/" target="_self" title="Contact">Contact</a></li>
</
ul>

En utilisant la variable smarty <{$xoops_url}>, cela vous évite d'écrire le chemin complet de votre site, et ce lien fonctionnera autant dans votre environnement de test (en local par exemple) que sur votre site web de production.


4.5 Colonnes gauche et droite

Il convient de commencer par retirer les commentaires écrits par Raphael afin d'y positionner notre boucle sur les blocs de gauche que nous allons récupérer dans le thème default. Avec votre éditeur de texte , ouvrez le fichier default/theme.html, copier la boucle d'affichage sur les blocs de gauche, ce qui donne ceci :


...
<
div id="gauche">
<!-- 
Début de la boucle pour affichage des blocs dans la colonne de gauche -->
<{foreach 
item=block from=$xoops_lblocks}>
  <{include 
file="xhtml/theme_blockleft.html"}>
<{/foreach}>
</
div>
<
div id="droite">....

Effectuez la même opération pour les blocs de droite

4.6 Colonne centrale

Maintenant que vous avez assimilé comment positionner l'affichage des blocs de xoops, le reste n'est plus qu'un "jeu d'enfant". Il ne vous reste donc qu'à positionner les boucles sur les blocs centrés et la variable smarty pour afficher le contenu des modules.

4.7 Pied de page

Retirer le texte de présentation, et incorporez juste la variable <{$xoops_footer}>.

Note: 9.00 (4 votes) - Noter cet article -
Page « 1 2 (3) 4 »

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris Posté le: 11/07/2005 01:19  Mis à jour: 11/07/2005 01:19
 Re: Xoopser un template xhtml/css en moins de 10mn
Félicitations pour cet excellent tuto, qui va ravir les membres de frxoops.
J'ai mis moins de temps à faire mon thème que christian ses 4 pages de cours !!

Un article de professionnel
:tucartonnes:
Semi pro
Inscrit le: 06/01/2004
De: Non loin de Paris
Contributions: 666
zoullou Posté le: 11/07/2005 10:46  Mis à jour: 11/07/2005 10:46
 Re: Xoopser un template xhtml/css en moins de 10mn
Excelent tuto, va faloir que je m'en inspire, mais je croit que le plus dur c'est d'ajouter les block center/left et center/right :banana:
Régulier
Inscrit le: 09/07/2005
De: Les Sables 85
Contributions: 159
pwmac Posté le: 12/07/2005 18:24  Mis à jour: 12/07/2005 18:24
 Re: Xoopser un template xhtml/css en moins de 10mn
Tuto peut etre super mais pour moi il faut le ré-intituler :xhtml/css en moins de dix ans!!!!!
Trop compliqué pour moi, vous allez peut être raler, mais depuis que j'essaie d'installer mon site avec xoops, je ne trouve aucune explication SIMPLE et EXPLICITE pour un débutant.
Newbie
Inscrit le: 12/07/2005
De:
Contributions: 1
SuperDevy Posté le: 12/07/2005 19:57  Mis à jour: 12/07/2005 19:57
 Re: Xoopser un template xhtml/css en moins de 10mn
Génial, je commençais à démoraliser en voyant tous ces templates à base de tableau. Certain tutos appreinnement même à les utiliser !

Merci, je crois que que si cet article n'avait pas été là j'aurai abandonné Xoops ...
Anonyme Posté le: 12/07/2005 21:15  Mis à jour: 12/07/2005 21:15
 Re: Xoopser un template xhtml/css en moins de 10mn
pwmac,

A tu posé les questions sur les points qui te posent problèmes ?

A+
Hervé
Admin Frxoops
Inscrit le: 04/02/2003
De: Blois
Contributions: 3071
philou Posté le: 12/07/2005 21:25  Mis à jour: 12/07/2005 21:25
 Re: Xoopser un template xhtml/css en moins de 10mn
oups... Il me semble pourtant que c'est très simplement expliqué.
Tu as essayé de suivre à la lettre ?
Régulier
Inscrit le: 09/07/2005
De: Les Sables 85
Contributions: 159
pwmac Posté le: 12/07/2005 23:13  Mis à jour: 12/07/2005 23:13
 Re: Xoopser un template xhtml/css en moins de 10mn
bonsoir à tous

Le pb c'est que je suis trop habitué a dreamweaver (qui m'a permis de construire mon site) non pas que dreamweaver soit simple mais plus abordable pour moi .
Mon pb consiste en un point capital, c'est que je ne comprend rien au language php,(il faut dire que je ne fais pas partie de la génération qui assimile aussi facilement que vous) et franchement les questions/réponses des forums ne m'apprennent rien du tout, il faut se rendre sur un autre article, etc etc ... trop pointu.
Puisque nous sommes dans les confidences, je n'ai pas trouvé un seul screnshoot qui me dise ce qu'est:
-un bloc
-une section
-un article etc etc.
Même pour un malheureux album, je ne saisi pas la façon de faire des sous menus, alors que la case "inclure les sous dossiers est cochée !!!!!
Bien sur j'ai trouvé comment faire (pour certains) mais rien de vraiment concluant.
Malgré les efforts de titoine76 (encore merci) je
suis limite de décrocher, et me servir uniquement des modules xoops tel que sondages,(ou peut etre petites annonces)et de les intégrer dans mon site, puique ça au moins j'arrive à le faire.
Je pensais quand même y arriver plus facilement.

Bon je vais m'arreter là, si vous avez une VRAIE documentation à me signaler........

Merci
Semi pro
Inscrit le: 06/01/2004
De: Non loin de Paris
Contributions: 666
zoullou Posté le: 13/07/2005 00:16  Mis à jour: 13/07/2005 00:17
 Re: Xoopser un template xhtml/css en moins de 10mn
Pas besoin de s'ennervé .
L'utilisation basique de XOOPS (installation et utilisation de module) n'est pas bien dure aprés un petit temps d'adaptation.
Par contre, il est sur qu'il faut avoir quelques connaissance en (X)HTML/CSS pour pouvoir modifier ou créer un thème, c'est comme si tu disais que tu n'arrive pas à réparer ta voiture alors que tu n'a aucune connaissance en mécanique.
Heureusement pour toi, les forums de XOOPS France sont là pour t'aider. Tu peut utiliser préalablement la fonction recherhcer (en haut à droite) et si tu ne trouve pas de réponse pose ta question, nous nous ferons un plaisir de te répondre.

A+

PS : Tout le monde est bénévole ici
Semi pro
Inscrit le: 05/04/2003
De:
Contributions: 1645
fooups Posté le: 14/07/2005 09:00  Mis à jour: 14/07/2005 09:00
 Re: Xoopser un template xhtml/css en moins de 10mn
Bonjour,

tout d'abord, les commentaires des articles ne sont pas mis en place pour faire du support, je vais donc devoir être bref .

Pour plus de connaissances en HTML/CSS, va voir (par exemple) les tutoriels sur developpez.com et pour en apprendre un peu plus sur le PHP (bien que cela ne soit absolument pas nécessaire, tant que tu ne souhaites pas modifier les fichiers de ton XOOPS, va regarder du côté du site du zero.

Je pense que cela devrait déjà te donner quelques bases.

@+
Supporter Xoops
Inscrit le: 13/05/2005
De: Le théíƒÂ¢tre de la vie
Contributions: 340
mediateur Posté le: 24/07/2005 16:37  Mis à jour: 24/07/2005 16:37
 Re: Xoopser un template xhtml/css en moins de 10mn
ça cartonne ce tuto !
merci !
Régulier
Inscrit le: 26/08/2005
De:
Contributions: 390
bobjean Posté le: 26/08/2005 03:37  Mis à jour: 26/08/2005 03:37
 Re: Xoopser un template xhtml/css en moins de 10mn
dsl mais je voi po kel fichier je doit telecharger sur le site alsacreation lol

voulez vous bien préciser s'il vous plait, je suis nouveau merci
Semi pro
Inscrit le: 05/04/2003
De:
Contributions: 1645
fooups Posté le: 26/08/2005 09:16  Mis à jour: 26/08/2005 09:16
 Re: Xoopser un template xhtml/css en moins de 10mn
Il faut regarder dans les gabarits ici

@+
Supporter Xoops
Inscrit le: 13/05/2005
De: Le théíƒÂ¢tre de la vie
Contributions: 340
mediateur Posté le: 04/09/2005 09:09  Mis à jour: 04/09/2005 09:09
 Re: Xoopser un template xhtml/css en moins de 10mn
J'utilise actuellement le travail réalisé par les autres et je grimpe au plafond quand je parviens à en faire des adaptations personnelles. Quand même, tjrs dans le même esprit, comme je me suis fortement intéressé aux thèmes, je me dis qu'il pourrais bien y avoir un utilitaire, style module de fabrication de thèmes, qui permettrait de ne rien oublier, étant donné qu'il y a des incontournables. Partant de modèles standards, ça serait possible de les faire à sa main, comme je le vois sur le système de blog de msn qui en est à proposer des trucs simples en drag and drop.... Je sais, c'est facile de dire "J'aimerais..." A tout hasard, je le dis
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris Posté le: 04/09/2005 14:15  Mis à jour: 04/09/2005 14:15
 Re: Xoopser un template xhtml/css en moins de 10mn
Pour les utilisateurs de dreamweaver il existe une extension, voir cet article sur xoops.org
Team FrXoops
Inscrit le: 01/11/2004
De:
Contributions: 1823
patz Posté le: 06/09/2005 07:18  Mis à jour: 06/09/2005 07:18
 Re: Xoopser un template xhtml/css en moins de 10mn
super article comme d'habitude (même moi j'y suis arrivé c'est dire)mais comme je suis un peu flemmard j'ai trouvé ce site csscreatoravec la page 1 qui permet de creer untemplate css en ligne en complétant des champs et celle-ci pour le style css très sommaire de la page
Semi pro
Inscrit le: 27/08/2003
De: Perpignan
Contributions: 1255
Paul Posté le: 27/11/2005 16:16  Mis à jour: 27/11/2005 16:21
 Re: Xoopser un template xhtml/css en moins de 10mn
salut, d'abord bravo à Christian...

Je viens de lire la réflexion de pwmac au sujet de dreamweaver... juste pour te dire que :
tu n'as pas à trop comprendre le html pour faire un thème mais plutôt le css, qui est carrement éditable dans dream... ce qui te permet d'avoir le thème "en clair" (évidemment je parle des couleurs et images, pas du code...) et de changer les couleurs ou autres (fonction chercher remplacer #FFFFF par #EFEFEF par exemple)...
Voir la documentation de dreamweaver.
Aspirant
Inscrit le: 11/07/2008
De: France - 87 Haute Vienne
Contributions: 52
jeromehej Posté le: 21/09/2010 20:46  Mis à jour: 21/09/2010 20:46
 Re: Xoopser un template xhtml/css en moins de 10mn
Salut,
et ben, c'est super. Après avoir créé un template avec des tuto diverses dont Alsacréation, ce tuto m'a permis en peu de temps de l'adapter à xoops, tout au moins pour la base, c'est à dire hors design des blocks, forum,...
Merci beaucoup.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

28 Personne(s) en ligne (3 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 28 | Plus ...