modules css personnalisé

[stefane123]

Bonjour,

J'ai besoin d'aide pour faire le css de mon module.

Pouvez-vous svp m'expliquer et m'aider à faire le css?

Voici de quoi sa dois avoir l'air:

Voici mon image découpé: http://www.bizhosting411.com/~auberged/cadre-2.zip

Merci!

p.s. Je débute et je suis sur joomla 2.5

[lefabdu51]

Re : modules css personnalisé

quel est le module utilisé?

[stefane123]

Re : modules css personnalisé

Je ne suis pas certains de comprendre le sens de ta question.

Alors, je t'explique se que je veux faire.

Plutôt que de me faire un template de A à Z j'ai acheté un template responsive dont la disposition des modules correspond à mes besoin de desing http://www.youjoomla.com/demos/?templates=youtrader

Maintenant, je veux modifier le template pour y mettre 2 classe css correspondant au design créé par ma graphiste.

Ces classe css de module serviront pour divers module tel; custom html, gallerie de photo ...

[jisse03]

Re : modules css personnalisé

Bonjour,

Tous les templates YouJoomla sont basés sur le framework YJSG (Simple Grids).

Pour chaque style du template, il y a un CSS attaché (blue.css par exemple). Les modules ont également plusieurs styles (square, rounded...)

Pour changer le CSS des modules, 2 méthodes: soit dériver un nouveau style à partir d'un style existant: http://www.yjsimplegrid.com/document...ate-style.html

soit utiliser custom.css pour surcharger le style désiré (yjsquare par exemple).

Eviter de modifier directement le code du template d'origine, il vaut mieux utiliser soit la dérivation, soit custom.css, pour que les mises à jour soit du template, soit du framework, ne puissent écraser les modifications.

[stefane123]

Re : modules css personnalisé

Merci jisse03

Après avoir chercher et essayé toute la journée. Je comprend que changer le css est une chose mais modifier le html en est une autre.

Donc, prenons l'exemple que je veux modifier l'apparence de mod_custom j'ai compris que je dois surcharger le template en ajoutant dans templates/youtrader/html/mod_custom un nouveau fichier de mise en forme.

Là le fichier que j'ai créé a 2 problèmes

1- Le titre du module ne veut pas s'afficher
2- Je n'arrive pas a afficher les images via le css sauf si j'y met l'adresse entière tel: http://www.bizhosting411.com/~auberg...cadre-2_03.png

Voici mon code:

<?php
/**
* @version $Id: default.php 20196 2011-01-09 02:40:25Z ian $
* @package Joomla.Site
* @subpackage mod_custom
* @copyright Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// no direct access
defined('_JEXEC') or die;
?>
<style type="text/css">
<!--

.cadre-2 {
width: 320px;
height: auto;
float: left;
position: relative;
}

.cadre-2-01_ {
width: 320px;
height: 66px;
background-image: url(http://www.bizhosting411.com/~auberg...dre-2_01.png);
float: left;
}

.cadre-2-02_ {
width: 280px;
height: auto;
background-image: url(http://www.bizhosting411.com/~auberg...dre-2_02.png);
float: left;
padding: 20px;
}

.cadre-2-03_ {
width: 320px;
height: 27px;
background-image: url(http://www.bizhosting411.com/~auberg...dre-2_03.png);
float: left;
position: relative;
}

-->
</style>


<<?php echo $module_tag ?>>



<div class="cadre-2">
<div class="cadre-2-01_"> <?php if ($module->showtitle) : ?> <<?php echo $header_tag.$header_class ?>>
<?php echo $show_icon.$title;?>
</<?php echo $header_tag ?>> <?php endif; ?></div>
<div class="cadre-2-02_">
<?php echo $module->content; ?>
</div>
<div class="cadre-2-03_"></div>
</div>
</<?php echo $module_tag ?>>

[jisse03]

Re : modules css personnalisé

Pour que le tout soit propre, la portion CSS du code du module devrait se trouver dans le template, en CSS, dans le fichier custom.css, et non embarqué dans le code du module.

Pour le problème d'URL absolues dans ce CSS, si le code est embarqué dans le module, le chemin des images n'est plus relatif au chemin des styles, ce qui explique le problème.

Ce template étant responsive, tes éléments CSS sont à rajouter dans /youtrader/css/custom_responsive.css. Attention, en cas d'utilisation de K2, il faut également revoir customk.css

[al1pb]

Re : modules css personnalisé

Bonjour,

Mais, nous allons fêter le grand retour à Jisse03 sur le forum, quelle bonne nouvelle...

Sinon, si tu veux utiliser un affichage html des titres et de l'enrobage des modules, tu peux utiliser les styles (de module) avec le modChrome dans le fichier html/module.php du template. Si ça t’intéresse, va voire la doc officielle en anglais ou recherche sur la toile.

Bon courage

[jisse03]

Re : modules css personnalisé

@al1pb
Merci

Sinon, si tu veux utiliser un affichage html des titres et de l'enrobage des modules, tu peux utiliser les styles (de module) avec le modChrome dans le fichier html/module.php du template. Si ça t’intéresse, va voire la doc officielle en anglais ou recherche sur la toile.

Le chrome de ce template étant quelque peu complexe, avec des références bootstrap partout, il est plus élégant d'utiliser le custom.css lié à un des styles (square, rounded...) et le suffixe de classe, tout bricolage intempestif du chrome risquant de briser le mode responsive du template.

La documentation YJSG est très complète et bien écrite, ce qui simplifie grandement les personnalisations http://www.yjsimplegrid.com/documentation/