Ajout de position template css

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Ajout de position template css

    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.

    Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture.jpg 
Affichages : 1 
Taille : 48,4 Ko 
ID : 1817304
    Dernière édition par toffffe à 22/05/2013, 21h44 Raison: url en claire merci

  • #2
    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
    sommaire thématique des astuces du forum e-commerce ici http://www.webtimarket.com/fr/telechargements
    http://virtuemart.fr

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        Re : Ajout de position template css

        Tu devrais utiliser le float: left; sur jm-header et jm-header2
        Auto-entrepreneur spécialiste Joomla https://www.stylitek.com

        Joomladay 2023 https://www.joomladay.fr/ 2 jours à ne pas manquer

        Commentaire


        • #5
          Re : Ajout de position template css

          Code:
          <?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.

          Commentaire


          • #6
            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
            Dernière édition par julien2810 à 22/05/2013, 22h41

            Commentaire

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire

            Hébergeur Web PlanetHoster
            Travaille ...
            X