[Problème] Ajout de position template css

[julien2810]

Tout d'abord bonjour à tout ceux qui me lirons et qui répondront quel que soit leurs réponses, tout est à prendre.

Je me suis déjà bien renseigné et j'arrive sans soucis à ajouté une position de module dans un template.
Le soucis que j'ai ici, c'est que je souhaite ajouter une position à côté d'une autre.

Exemple : J ai une position pour un slider en "header" mais elle prend toute la largeur du template.
J'aimerai ajouter à droite de celle-ci une position pour ajouter un module de contenus personnaliser pour pouvoir inséré une image fixe.
Je souhaiterais avoir le slider en 70% et 30% pour le module de contenus personnaliser.

Donc pour cela, je dois modifier les fichiers : index.php, templatedétail.xml et un fichier dans le dossier css.

Normalement, ça serait le fichier template.css, mais dans mon cas, je ne pense pas que ce soit celui la.

En premier lieu, j'ai ouvert le fichier index.php et je trouve le code qui m'intéresse :

<div id="jm-page">

<div id="jm-page-in">

<?php if ($this->countModules('header')) : ?>

<div id="jm-header">

<jdoc:include type="modules" name="header" style="jmmodule"/>

</div>

<?php endif; ?>

Donc ici je rajoute le même code juste en dessous en changeant le nom et en mettant "header2".
Ce qui nous fait ceci :

<div id="jm-page">

<div id="jm-page-in">

<?php if ($this->countModules('header')) : ?>

<div id="jm-header">

<jdoc:include type="modules" name="header" style="jmmodule"/>

</div>

<?php endif; ?>

<div id="jm-page">

<div id="jm-page-in">

<?php if ($this->countModules('header2')) : ?>

<div id="jm-header">

<jdoc:include type="modules" name="header2" style="jmmodule"/>

</div>

<?php endif; ?>

Ensuite je vais dans le fichier Templatedétail.xml et je rajoute la position que je vient de créer :

<position>menu-top</position>

<position>position-0</position>

<position>dj-menu-top</position>

<position>header</position>

<position>header2</position>

<position>top</position>

<position>position-7</position>

<position>breadcrumbsload</position>

<position>banner</position>

<position>content-bottom</position>

<position>rightload</position>

<position>bottom1</position>

<position>bottom2</position>

<position>menu-bottom</position>

<position>copyrights</position>

Donc pour le moment j'ai les 2 positions qui fonctionnent mais elles s'affichent l'une en dessous de l'autre.

Donc maintenant vient le moment ou je dois aller chipoter dans le fichier CSS.

Mais j'ai beau chercher et je ne trouve le code que je dois changer nul part.

Donc pour moi, le code ne se trouve pas dans template.css mais dans un fichier qui se nomme " module.css"

J'ai trouvé la partie du code qui me semble être celle que je devrais changer :

/*** module style with shadow suffix for header ***/



#jm-header .jm-module.shadow {

background: url(../images/header_shadow.png) no-repeat bottom center;

margin: 0;

padding: 0 0 75px;

}



#jm-header .jm-module.shadow h3.jm-title {

margin: 0 0 10px;

padding: 0;

color: #383838;

}



#jm-header .jm-module.shadow .jm-module-content {

padding: 0;

background: none;

border: none;

}



#jm-header .jm-module.shadow .jm-module-content.no_title {

border-top: none;

}


Mais je vous avoue que je ne comprend pas ou je dois placer les balises float avec le pourcentage que chaque module doit prendre.

Je ne me suis pas permis de mettre les fichiers source en entier vu que c'est un template payant mais vous pouvez voir un exemple et peut-être trouver grâce à firebug car de mon côté je n'ai rien trouvé.

Voila un site test. http://www.leroidupellet.com/test/

Un tout grand merci à toute les personnes qui prendront le temps de me répondre.

Ps: Je souhaite rajouter une position pour pouvoir avoir une image fixe a droite du slider, mais si vous connaissez un slider qui fait ça directement, je suis preneur.
Mais je suis quand même preneur pour la solution pour les positions, que je puisse apprendre ou sont mes erreurs.

[PATSXM971]

Re : Ajout de position template css

Bonsoir,

en fait il est bien d'encadrer les 2 dans une div
ensuite pour le header le fichier css, n'a pas d'importance, si ce n'est pour une question de nomenclature.
et il est possible de modifier les données en citant la div ou la classe plus bas, même si elle existe déjà

pour faire une largeur de header de 70%, ajouter simplement ceci :

#jm-header {
width:70%;
}

et compléter pour le header2

mais basez-vous sur d'autres template pour voir comment cela fonctionne

[julien2810]

Re : Ajout de position template css

Super pour ces réponses.
Je vient de modifier le layout.css pour donner la largeur voulue à mes 2 header, le soucis est qu'ils sont toujours l'un en dessous de l'autre et non l'un à coté de l'autre.

Je vais continuer à chercher, si vous trouvez une solution entretemps, je suis preneur.

Encore merci pour le temps que vous m'accordez.

[toffffe]

Re : Ajout de position template css

Tu devrais utiliser le float: left; sur jm-header et jm-header2

[lefabdu51]

Re : Ajout de position template css

<?php if ($this->countModules('header2')) : ?>

<div id="jm-header">

<jdoc:include type="modules" name="header2" style="jmmodule"/>

</div>

Il y as deux id identiques donc impossible que cela marches avec le code indiqué au dessus.

[julien2810]

Re : Ajout de position template css

En fait, grâce à toutes vos réponses, j'ai réussi à faire un bidouillage du code, mais si je change quoi que ce soit, mon template déconne en tout lol, mais si je ne touche à rien une fois fait, ça fonctionne

Si tu as une meilleur solution, je suis preneur aussi

En fait, ça prend en compte certaines choses, mais la position n'est pas créé, c'est plus du bidouillage en css